Horizontal list. Trying to vertically align li to image

**Dopple** · 08-30-2006 09:32 AM

I have a horizontal list which I am using for my nav menu. I have a small image in the list (before you say that isn't symantic markup, it's still a link to the home page). I am wanting to align the <li>s to the middle of the image but they will not align. I have tried everything including trying to sopecify the "top" values for many of the elements within the list but have had absolutely no joy. Can anyone tell me the best way to do this?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>James</title>

<style type="text/css" media="screen,projection">
    /* backslash hack hides from IEmac \*/
	    @import url(dubhprais.css);
    /* end hack */
</style>
</head>
<body>

<div id="wrapper">

<ul id="menu">
<li><a href="index.php"><img src="http://www.dubhpraisrestaurant.com/img/pot2cms.jpg" alt="banner"></a></li>
<li><a href="index.php">HOME</a></li>
<li><a href="james.php">JAMES</a></li>
<li><a href="history.php">HISTORY</a></li>
<li><a href="services.php">SERVICES</a></li>
<li><a href="menu.php">MENU</a></li>
<li id="links"><a href="links.php">LINKS</a></li>
</ul>



<p><img  id="name" src="http://www.dubhpraisrestaurant.com/img/dubhprais.jpg" alt="Dubh Prais Restaurant" /></p>


</div>

</body>
</html>

Code:

body {
	text-align: center;
	min-width: 600px;
	background-color:#000;
}
img {
	border:0;
}
p {
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
}
h1 {
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
}

#wrapper {
	margin:0 auto;
	width:1000px;
	text-align: left;
}

#menu {
	position:relative;
	background:#fff;
	padding:0;
	margin:0;
	color:#000;
	font-family: arial, helvetica, sans-serif;
	white-space:nowrap;
	list-style-type:none;
	font-weight:900;
	width:1000px;
}
	
#menu li {
	display:inline;
}

#menu li a {
	background:#fff;
	color:#000;
	text-decoration:none;
	float:left;
	padding:0 30px 0 30px;
}



#menu li a:hover {
	background:#fff;
	color:#444;
}

**toicontien** · 08-30-2006 11:20 AM

Code:

body {
#menu li {
	float: left;
	line-height: [height of 'home' link image]px;
}

#menu li a {
	background:#fff;
	color:#000;
	display: block;
	text-decoration:none;
	padding:0 30px 0 30px;
}

#menu li img {
	vertical-align: bottom;
}

This should work.

**stevenboyce** · 08-30-2006 11:45 AM

/* backslash hack hides from IEmac \*/ @import url(test.css); /* end hack */

hi just wondered what this was for?

**Rossario123** · 08-30-2006 12:44 PM

it hides it from i.e that runs off a mac. Because i.e mac has its own problems...*shivvers to the thought of all the problems it has*

**Dopple** · 08-30-2006 03:32 PM

Not sure how long ago MS stopped working on IE for mac. Terrible browser!
Thansk for your help toicontien. That's sorted it.

Thread: Horizontal list. Trying to vertically align li to image

Thread Tools

Display

Horizontal list. Trying to vertically align li to image

whats that iemac hack thing for in your code?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions