Vertical Align

[jasondubya]

I am having the most difficult time getting text to align to the bottom of a div.

The page that I am currently working on is located at http://janix.net/newsite/newsite2.html

Here is the code that I am working with:

HTML:

<div class="top">
<span class="top_nav">
<a href="http://janix.net/" class="nav_top">Home</a>
<a href="http://janix.net/sitemap.php" class="nav_top">Site Map</a>
<a href="http://janix.net/contact.php" class="nav_top">Contact Us</a>
<a href="http://janix.net/search.php" class="nav_top">Search</a>
</span>
</div>


And the CSS associated with it:

.top {
width: 700px;
height: 70px;
background-image: url( img/logo.gif );
background-repeat: no-repeat;
background-position: 0% 50%;
text-align: right;
vertical-align: bottom;
padding-bottom: 5px;
}
A.nav_top {
font-weight: bold;
color: #ffcc33;
text-decoration: none;
padding: 5px;
vertical-align: bottom;
}

A.nav_top:hover {
border-top: 2px solid #ffcc33;
color: #ffffff;
}


Can anyone tell me what I am doing wrong?

[ray326]

I'd recommend you rethink the nav lists as <ul> lists and use the techniques from the List-O-Matic to produce your nav bars.

http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp

[Paul Jr]

Or just go here: http://css.maxdesign.com.au/

[jasondubya]

I like what those tools offer, and I will consider using that sort of tool for my nav bars. However, I still cannot get the text to align to the bottom.

How do I get the text to align to the bottom?

[Jish]

Originally posted by Paul Jr
Or just go here: http://css.maxdesign.com.au/

I clicked on this link and followed a few simple tutorials and came up with this:


<DIV class=top>
<ul>
<li><A href="http://janix.net/">Home</A></li>
<li><A href="http://janix.net/sitemap.php">Site Map</A></li>
<li><A href="http://janix.net/contact.php">Contact Us</A></li>
<li><A href="http://janix.net/search.php">Search</A></li>
</ul>
</DIV>


and this:


.top ul {
list-style-type: none;
margin: 0;
padding: 55px 0 0; }

.top ul li {
display: inline; }

.top ul li a {
color: #ffcc33;
font-weight: bold;
padding: 0 5px ;
text-decoration: none; }

.top ul li a:hover {
color: #fff; }


it works fine when tested locally, on my computer.

[jasondubya]

Okay, so the tool works. Did it align to the bottom of the div for you?