CODEWITHSUNDEEP
htmlcss
Eric Goncalves
Eric Goncalves

Reputation: 5353

Line Text with Nav Bar in HTML

I have a navbar right under the title to the site, but I want to be line up the first and last items in the navbar with the beginning and end of the Title. I don't have a live preview, but I attached an image. I can get it to line up in one browser, but when I open it in the other, its off again. Is there an easy way to line the text up so it works for everything? thank you

screenshot

HTML:

<body onload="play()">
    <div class="heading">UPRISING</div>
    <div class="container_12"> 
       <div id="topnav" align="center">
         <ul id="list-nav">
           <li><a href="home.html">HOME</a></li>
           <li><a href="about.html">ABOUT</a></li>
           <li><a href="trailer.html">TRAILER</a></li>
           <li><a href="stills.html">STILLS</a></li>
           <li><a href="news.html">NEWS</a></li>
           <li><a href="contact.html">CONTACT</a></li>
           <!-- <li><a href="distribution.html">DISTRIBUTION</a></li> -->
         </ul>
       </div>

<!-- START OF CONTAINER -->

  <div class="trailer">
    <img id="imgHolder" />    
  </div>
 </div> <!-- END OF CONTAINER 12 -->

CSS:

#topnav li {
  margin-right: 110px;
}

#topnav li:nth-last-child(1) {
  margin-right: 0px;
}

Upvotes: 0

Views: 286

Answers (3)

Starx
Starx

Reputation: 79069

This is a kind of problem which call for good old tables.

<table id="list-nav">
     <tr>
           <td><a href="home.html">HOME</a></td>
           <td><a href="about.html">ABOUT</a></td>
           <td><a href="trailer.html">TRAILER</a></td>
           <td><a href="stills.html">STILLS</a></td>
           <td><a href="news.html">NEWS</a></td>
           <td><a href="contact.html">CONTACT</a></td>          
     </tr>
</table>

The widths will be evenly distributed problem solved.

Or...

#list-nav li:last-child { text-align: right; }

Upvotes: 1

roger
roger

Reputation: 271

You can work with text-align: justify

See a demo

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324820

Set a fixed width for your list items. Align the first one to the left and the last to the right, all those in the middle should be center-aligned. This way, you're not leaving yourself at the mercy of the font renderer.

Update with CSS:

#topnav li {
    text-align: center;
    width: Xpx; /* X is total width divided by number of list items */
}
#topnav li:first-child {
    text-align: left;
}
#topnav li:last-child {
    text-align: right;
}

Upvotes: 0

Related Questions