...

View Full Version : Aligning a row of floated images to their bottoms



lostsanity90
01-23-2012, 09:15 PM
Hey I am very new to the CSS and HTML world, so forgive me if this is something really simple I am over looking.

The problem is I have four images, one of which is taller than the rest. I making a nav bar. I got the images to float and have the desired space between them but the problem is they are aligning to the top of the image. I want them to be all on the same level at the bottom:

html code:

<nav>
<div id="menu">
<ul>

<li><a href="home.html"><img src="home_button_unselected.png" width="134" height="41" alt="home" /></a> </li>
<li><a href="comics.html"><img src="comics_button_selected.png" width="137" height="48" alt="comics"/></a> </li>
<li><a href="animated_shorts.html"><img src="animatedshorts_button_unselected.png" width="255" height="41" /></a> </li>
<li><a href="contact_us.html"><img src="contactus_button_unselected.png" width="179" height="41" /></a> </li>

</div>

</ul>
</div>
</nav>

css code:

#menu {
margin-left: 19px;
position:absolute;
}

nav li {
float: left;
list-style: none;
padding: 0;
margin-top: 230px;
margin-right: 19px;
margin-bottom: 0;
display:table-footer-group;
}

Thank you in advance for all the help.

AJ

DarkLaika
01-23-2012, 09:19 PM
Could you possibly link us to the page that's you're working on?

lostsanity90
01-23-2012, 09:43 PM
Sorry I can't but here is a image of the page to show the problem:

ARCLite Studio
01-24-2012, 01:36 PM
AJ,

Without going into a long explanation what your trying to do takes a bit of manipulation using position:relative and position:absolute on the containing div then the child div's.

But, I'm going to offer a simpler solution, just use a table contained in DIV(menu), set the menu div to position:absolute and then move the menu (DIV) into position as needed:

CSS


#menu { width:765px; height:48px; position:absolute;}
#nav td {vertical-align:bottom;}


HTML


<div id="menu">
<table width="100%" height="48" cellpadding="0" cellspacing="0" id="nav">
<tr>
<td><a href="home.html"><img src="home_button_unselected.png" alt="home" width="134" height="41" border="0" /></a></td>
<td><a href="comics.html"><img src="comics_button_selected.png" alt="comics" width="137" height="48" border="0"/></a></td>
<td><a href="animated_shorts.html"><img src="animatedshorts_button_unselected.png" width="255" height="41" border="0" /></a></td>
<td><a href="contact_us.html"><img src="contactus_button_unselected.png" width="179" height="41" border="0" /></a></td>
</tr>
</table>
</div>

Hope this Helps.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum