Grow your CSS skills. Land your dream job.

help with setting up navigation bar

  • # April 29, 2009 at 2:42 am

    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.

    # April 29, 2009 at 2:52 am
    "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

    # April 29, 2009 at 4:47 am

    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!

    # April 29, 2009 at 5:18 am

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

    # April 29, 2009 at 5:28 am

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".