SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict caser85's Avatar
    Join Date
    May 2002
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nav menu problems

    I'm trying to create a navigation menu that horizontal and has an image spacer in between each link. The problem I'm having is that the second div I create pushes down the next text item and creates a new line. Here is my CSS:

    Code:
     
    <!--
    .nav {
     font-family: Trebuchet MS, Verdana, Arial;
     font-size: 14px;
     font-weight: bold;
     background-color: #CCC;
     text-align: left;
     height: 22px;
     width: 725px;
     border: 1px solid #6699CC;
    }
    
    .navlinks {
     padding-right: 7px;
     padding-left: 7px;
    }
    -->
    </style>
    Here is my HTML:

    Code:
    <div class="nav"><div class="navlinks"></div><div class="navlinks">Photos</div><img src="images/divider.gif" alt=""></div>
    Can anyone see what I'm doing wrong? Is there anyway to improve this? I'm kind of new at CSS .

  2. #2
    SitePoint Enthusiast blakems's Avatar
    Join Date
    Oct 2002
    Location
    Utah
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you need to do is give the div a style of "display: inline;" or you can try "float: left;" on each div. Also there is no need to use spacer gif. Use margin-left and margin-right on the divs for your spacing you need, much better code.
    blakems.com
    "reaching more of your brain cells"


  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    A div is a block level element and will always start on a new line (unless you change it with display:inline).

    Use the span tag for inline content.

    e.g.

    Code:
    <div class="nav"><span class="navlinks">Link 1</span><span class="navlinks">Link 2</span><span class="navlinks">Link 3</span><span class="navlinks">Link 4</span><span class="navlinks">Link 5</span></div>
    To space your links use margin-left: 10% in your navlinks class (or some other specific measurement).

    Paul

  4. #4
    Incoherent drivel since 1975 Zopester's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or for a semantically meaningful menu (that has the benefit of displaying as an unordered list for those browsers that don't support CSS properly) use this:

    HTML:
    Code:
    <div class="nav">
    <ul>
    <li><a href="whatever">Whatever</a></li>
    <li><a href="whatever">Whatever</a></li>
    <li><a href="whatever">Whatever</a></li>
    </ul>
    </div>
    CSS:
    Code:
    .nav ul {
    margin:0;
    padding:0;
    }
    
    .nav ul li {
    display:inline;
    margin-left:5px;
    margin-right:5px;
    }
    Recommended Reading:
    Why we won't help you - An article by Mark Pilgrim.

    http://www.zopester.com - Coming Soon!


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
  •