Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS help with setting up navigation bar

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #24723
    davidliu
    Member

    Dear CSSers,

    I am a newbie to CSS and am feeling my way to getting acquainted with it. I’ve been exercising to set up a navigation bar but couldn’t work around it.

    Below are screenshot image of the website:
    [attachment=1]navigation_problem01.gif[/attachment]
    [attachment=0]navigation_problem02.gif[/attachment]

    This is the link http://www.daveatwork.com/navigation_problem.html

    I use tables to set up the navigation bar, however I can’t figure out how to achieve the desired result.

    Please advice on:
    1. How in the world do I create this navigation bar? Do I need to create image for the ‘current’ URL? Do I even have to use tables?
    2. How do I make the width stretch to fit the links in relation with the container? *OK this is weird because I specify exact width of 473px, but it appears to stretch (which I want). Something I’m not getting?*
    3. I use padding-top to align email link to the bottom of navigation table, is this an acceptable method?
    *Optional 4. How do I create the drop shadow effect? It’s not neccessary but it would be nice if that’s possible.

    Not sure if those are the right questions to ask, thank you for your participation and help.

    #56891
    AshtonSanders
    Participant
    "davidliu" wrote:
    1. How in the world do I create this navigation bar? Do I need to create image for the ‘current’ URL? Do I even have to use tables?
    2. How do I make the width stretch to fit the links in relation with the container? *OK this is weird because I specify exact width of 473px, but it appears to stretch (which I want). Something I’m not getting?*
    3. I use padding-top to align email link to the bottom of navigation table, is this an acceptable method?
    *Optional 4. How do I create the drop shadow effect? It’s not neccessary but it would be nice if that’s possible.

    Not sure if those are the right questions to ask, thank you for your participation and help.

    1. There are many tutorials out there, try this one to start with: http://www.456bereastreet.com/archive/2 … ation_bar/
    This will answer most of your questions about creating a navigation bar with CSS. Then the rest of the questions can be answered simply.

    2. The width of an element will equal width + right padding + left padding so by adding padding to the inside of an element, you’ll need to decrease the width (if that’s what you want.)

    3. If it works in FF, IE6 and IE7. I’d say you’re golden.

    4. Shadows will have to be done with images. CSS currently doesn’t provide a shadow.

    -Ashton Sanders

    #56892
    davidliu
    Member

    With your advice, I’ve managed to reached this stage:
    http://www.daveatwork.com/home.html
    The only working links are ‘HOME’ and ‘NAVBAR’ at the moment.

    It’s not exactly the look I want but the tutorial and tips are very helpful.

    There’s a small detail that I would like to achieve: How do I get the ‘current URL’ tab to be touching the white bar at the bottom? I want to create a seamless visual like this:

    [attachment=0]navigation_problem02.gif[/attachment]

    I have tried tweaking with different values in the #nav and #body to no avail. Thanks again for your advice!

    #56893
    apostrophe
    Participant

    Just take the 2 pixel margin off the bottom of it.

    #56894
    davidliu
    Member

    That was so obvious and I feel so silly now…

    Thank you for your help everyone, I appreciate it very much.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.