www.webdeveloper.com
Results 1 to 5 of 5

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

  1. #1
    Join Date
    Aug 2004
    Location
    70 klicks above the Do Lung bridge
    Posts
    654

    Horizontal list. Trying to vertically align li to image

    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;
    }

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    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.

  3. #3
    Join Date
    Aug 2006
    Posts
    2

    whats that iemac hack thing for in your code?

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

    hi just wondered what this was for?

  4. #4
    Join Date
    May 2006
    Posts
    135
    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*

  5. #5
    Join Date
    Aug 2004
    Location
    70 klicks above the Do Lung bridge
    Posts
    654
    Not sure how long ago MS stopped working on IE for mac. Terrible browser!
    Thansk for your help toicontien. That's sorted it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles