Newbie alignment question.

My CSS

#menu li{ 
 
	/* Top left corner */
	border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
 
	/* Top right corner*/
	border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
 
	/* Opacity */
	opacity: 0.7;			
 
	background: #efefef;
	float:left;
	margin: 0px 8px 0px 0px;
	padding: 8px 20px 8px 20px;	
}
img.logo{
	line-height:120px;
	vertical-align:baseline;
	float:left;
}
	

Code (markup):

and my HTML

<header>
<nav>
<img src="images/logo.gif" alt="logo" class="logo"/>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Cart</a></li>
<li><a href="#">Printing</a></li>
<li><a href="#">On Sale</a></li>
</ul>
</nav>
</header>

Code (markup):

Produces this:



How would I go about aligning the tabs to the bottom of the logo?

Thanks for any help!

 

Try adding top padding to the #menu ul so that a space is formed and the tabs come down.

May be you need around 80px or so it seems #menu { padding: 80px 0 0; }

PS: Once you have applied float on the img.logo, the line-height & vertical-align properties become useless, so you may remove them, it won't change anything.

 

Add clear:right to img.logo