Results 1 to 8 of 8
  1. #1
    5 Star Lounger
    Join Date
    Mar 2004
    Posts
    924
    Thanks
    0
    Thanked 0 Times in 0 Posts

    gradient style navigation box

    (Edited by Leif to make link live - see the quick guide and/or <!help=19>Help 19<!/help>)

    I am trying to do a gradient style navigation box in CSS similiar to the one in website in http://www.renn.co.uk

    I have no idea as to how this is done.
    Can anyone help.
    Any assistance would be appreciated.

    Justin.

  2. #2
    Plutonium Lounger Leif's Avatar
    Join Date
    Dec 2000
    Location
    U.K.
    Posts
    14,010
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: gradient style navigation box

    If you are referring to the panel which fades from white to grey and includes the links to 'Pygmy Goats' and 'Renn Genealogy', it seems to be a table with that cell containing a background image, "bg2.gif".

    View the source code of the page to see how it has been done - usually the fastest way to learn something! - and look for the line which includes:

    <code>height="25" colspan="3" background="images/bg2.gif"><table width="100%" border="0" cellpadding="0" cellspacing="0"</code>

  3. #3
    5 Star Lounger
    Join Date
    Mar 2004
    Posts
    924
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: gradient style navigation box

    I therefore assume it is possible to create something like this nav bar in Fireworks and import into a CSS file.
    Is this possible?

    Justin.

  4. #4
    Plutonium Lounger Leif's Avatar
    Join Date
    Dec 2000
    Location
    U.K.
    Posts
    14,010
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: gradient style navigation box

    That I can't help you with as I have never found time to dabble with CSS, but I should imagine so. Hopefully someone more knowledgeable will jump in with advice.

  5. #5
    Silver Lounger
    Join Date
    Jan 2001
    Location
    Indianapolis, Indiana, USA
    Posts
    1,862
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: gradient style navigation box

    The CSS has very little to do with the gradient. It's all about the image. Yes, you can do that with Fireworks - just search the helpfile for Gradient. Create the image you want and set it as the background of the table cell, as Leif suggested.

  6. #6
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: gradient style navigation box

    Justin

    I used to use Fireworks all the time, getting a bit rusty these days though as job is changing.

    Due to the move over to XHTML standards javascript is tending to frowned upon for accesibility, it is best to put the content in the HTML document and the page design in the CSS. Fireworks has a tendency to create massives amount of javascript to run menu bars and navbars. I would suggest you create an image (in Fireworks) and place it as a background image within your css file. You can create a class called menubar and work the rest for border colour.

    I apologise if I am teaching you to suck eggs, I do not know what level you are but it sounds pretty good if you know your way around css files. Try W3Schools.com they have the facts and figures for attributes and CSS style sheet stuff
    Jerry

  7. #7
    5 Star Lounger
    Join Date
    Mar 2004
    Posts
    924
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: gradient style navigation box

    Thanks for that l will look at that website.

    Justin

  8. #8
    Star Lounger
    Join Date
    Feb 2003
    Location
    DC Metro, District Of Columbia, USA
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: gradient style navigation box

    Hi jj1234(N to the nth?) <grin>:
    here is the link to the file you are asking about --
    http://www.macromedia.com/cfusion/exchange...ame=Dreamweaver Exchange&avm=1
    there you will see the categories scroller, click on 'Style/Format', scroll to 'add gradient/background style' and click on the link, some Very cool CSS stuff.
    HTH
    jl

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •