|
Posted by SigelsTankMage on 10/02/38 12:01
this took me less than five minutes so i went the extra mile. i used
code from blue robot and css listamatic since i thought it would be
better if you used lists for the images you had.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="content">
<div id="navcontainer">
<ul id="navlist">
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
</ul>
<br />
<ul id="navlist">
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
<li><img src="img/40.jpg" width="40" heigh="40" /></li>
</ul>
</div>
</div>
</body>
</html>
body {
margin:50px 0px; padding:0px;
text-align:center;
}
#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li
{
display: inline;
list-style-type: none;
}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
ul>li{
padding:0 0 0 100px;
}
Navigation:
[Reply to this message]
|