Line Text with Nav Bar in HTML

Question

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;
}

score 2 · Accepted Answer · edited Apr 08 '12 at 17:53

2

You can work with text-align: justify

See a demo

edited Apr 08 '12 at 17:53

Starx

77,474
47
185
261

answered Apr 08 '12 at 17:45

roger

271
1
7

Hey, that seems to work! Nice one. Simpler than the other answer. – Tony R Apr 08 '12 at 17:48

Starx · Answer 2 · 2012-04-08T17:56:43.157

1

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; }

edited Apr 08 '12 at 17:56

answered Apr 08 '12 at 17:51

Starx

77,474
47
185
261

But tables are evil! [Or are they?](http://stackoverflow.com/questions/890850/table-for-layouts-is-evil-right) – Tony R Apr 08 '12 at 17:53
@TonyR, No, tables were never evil. People though they were – Starx Apr 08 '12 at 17:55
People still rage over this today. Good that you threw the table solution in, though. I'm indifferent myself but because of everyone raging about it, I never use tables for layout. There's almost always a decent CSS solution, at least in my experience. The other answer got accepted anyway but +1 for this =) – Tony R Apr 08 '12 at 17:57
@TonyR, Tabulation has its own place for layout design. Most of the people avoid this fact. Another good point about tables, is cross browser compatibility, layouts made from table are cross broswer from default. There are many point... lets not get into that. Thanks for the +1. – Starx Apr 08 '12 at 18:03

score 0 · Answer 3 · edited Apr 08 '12 at 17:43

0

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;
}

edited Apr 08 '12 at 17:43

Starx

77,474
47
185
261

answered Apr 08 '12 at 17:27

Niet the Dark Absol

320,036
81
464
592

1

Maybe use [jsfiddle](http://www.jsfiddle.net) for a working example. If you can get this working I will +1 you until Christmas because I've had a similar problem and this looks like a good solution – Tony R Apr 08 '12 at 17:44

Line Text with Nav Bar in HTML

3 Answers3