April 8, 2012
Line Text with Nav Bar in HTML
Question by Eric
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
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;
}
Answer by user934278
Answer by Starx
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; }
