SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast am_dorky's Avatar
    Join Date
    Sep 2008
    Location
    Bucks
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question how to code separators within a nav menu

    Hey Guys,

    The example below shows the menu I am trying to create, but I am having a few problems. The separator doesn't sit right.

    Example:
    HOME | PORTFOLIO | CONTACTS

    How do you add and position those separators in between each link?

    I have created the separator in photoshop and added it to my code as shown below but I don't know how to position it in the right place. Am I going about this all wrong?

    My Code:
    HTML Code:
    <body>
    <ul id="nav">
    <li><a href="home.html">HOME</a><img src="images/link_separator.gif" /></li>
    <li><a href="#">BIOGRAPHY</a><img src="images/link_separator.gif" /></li>
    <li><a href="#">PORTFOLIO</a><img src="images/link_separator.gif" /></li>
    <li><a href="#">CONTACT</a></li>
    </ul>
    </body>
    Code CSS:
    #nav, #nav li {
    float: left;
    list-style: none;
    font: 95%/1.5em "Trebuchet MS", Verdana, Geneva, Helvetica, sans-serif;
    font-weight: bold;
    }			
    #nav li a {
    text-decoration: none;
    color: #339bbb;
    padding: 10px;
    }			
    #nav li a:hover, #nav li a:visited {
    color: #000;
    text-decoration: none;
    }

  2. #2
    SitePoint Addict joaquin_win's Avatar
    Join Date
    Jul 2005
    Location
    Venezuela
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #nav li {
    background:transparent url(path/to/separator.gif) no-repeat top right;
    }
    http://www.w3schools.com/css/pr_background.asp

    Edit: And of course, remove the <img> tags from the markup.
    Edit: as a matter of fact, if an image you're using is for aesthtics and not as information then don't use <img>'s, use css. This is called separation of content and presentation.

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I normally just use a right border on the <li>s without an image at all.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    I normally just use a right border on the <li>s without an image at all.
    That's what I typically do as well. Having a light colored border on one side and a dark colored border on the other can create a nice effect when done properly.

  5. #5
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep me too - right borders on the list item.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  6. #6
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or you can create a gradiant in photoshop and place the image as a background.To seperate each Link.


    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  7. #7
    SitePoint Enthusiast am_dorky's Avatar
    Join Date
    Sep 2008
    Location
    Bucks
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Thanks Guys...

    I've gone with the border right on the <li>s which works an absolute treat!!!

    Dan, how do you create the effect your talking about? Any chance you can show me an example or post a link?

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's easy. On the left side put a light (or dark) color, and on the right side put a dark (or light) color. Like white on the left and black on the right. Of course, you'd have to take care of the list itself otherwise the whole thing would look goofy.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Effectively it gives the line greater contrast, to help make it pop.
    PSDTUTS has a very good tutorial about web design polish which covers that and much more.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Effectively it gives the line greater contrast, to help make it pop.
    PSDTUTS has a very good tutorial about web design polish which covers that and much more.
    Good job.Thank you for taking your time to find that link for all of us.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  11. #11
    SitePoint Enthusiast am_dorky's Avatar
    Join Date
    Sep 2008
    Location
    Bucks
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanks so much guys for taking the time to explain and provide me with a link.

    Really appreciate the help!!!


Bookmarks

Posting Permissions

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