The background image is not resizing itself, just the <li> is only the height of the text. As the links will contain <a> elements, display the <a>s as blocks, give them a size to suit the graphic, and apply the graphics to the <a> instead of the <li> (this will allow you to change the graphic on the hover for a rollover if needed). The <li>s can be floated left, and the <ul> styled to eliminate the div (and multiple id). Try html:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<link href="master.css" rel="stylesheet" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page Mockup 1</title>
</head>
<body>
<div id="header"></div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</body>
</html>
and css :
Code:
* {
margin: 0;
padding: 0;
}
body {
font-family:"Lucida Grande",tahoma,sans-serif;
font-size:11px;
background-color: #FFFFFF;
}
#header {
height: 70px;
background-color: #333333;
}
#nav {
height: 20px;
border-top: 1px solid #FFFFFF;
padding-left: 100px;
background-color: #ADD8E6;
}
#nav li {
float: left;
display: inline;
list-style: none;
}
#nav a {
display: block;
width: 75px;
height: 20px;
background-image: url('images/home.jpg');
color: #333333;
text-align: center;
text-decoration: none;
line-height: 20px;
}
#nav a:hover {
font-weight: bold;
color: #000;
}
Cheers
Graeme
Originally Posted by Kravvitz
Bookmarks