Es la primera vez que hago un menu con <li>, y me ha costado un mundo lograr la distancia correcta y estilos y demás para que parezca un menu, ahora, he tratado de insertarle una imágen ( que quiero ponerle un hover tambien) y no he logrado hacerlo. Segui los pasos de libros.es de css pero no se muestra mi imágen, y una vez que si la saque, se veia el texto muy abajo. En esta página pueden ver el resultado:
http://sichemsdachurch.org/test/
y asi quiero que me quede:
http://sichemsdachurch.org/
mi código va así:
Código css:
Ver originalul {
margin:34px 0 0 0;
padding-left: 1.5em;
}
ul.menu li , a:link , a:visited{
width:100px;
float: left;
font-weight:bold;
font-size:12px;
font-family:Tahoma, Arial, "Headache";
display:block;
height:25px;
list-style-image:url(../images/dot-normal.jpg);
text-decoration: none;
color:#fff;
}
mi html
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/div-style.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<!--[if IE]>--> <link href="css/styles-ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="header"> <img src="images/logo-index.gif" alt="Logotype" id="logotype" height="82" />
<p class="church-title" style="display:inline">Sichem SDA Church, Inc.</p>
<br />
<span class="slogan">Everybody is Somebody at Sichem</span>
<ul class="menu">
<li ><a href="#" title="Home Page">Home</a></li>
<li><a href="#" title="Home Page">About us</a></li>
<li><a href="#" title="Home Page"> Mission</a></li>
<li> <a href="#" title="Home Page">Donations</a></li>
<li><a href="#" title="Home Page">Contact us</a></li>
</ul><br /><br /><br />
<img src="images/head-img.jpg" id="header-img" alt="Header" />
</div>
<div id="content">
</div>
</div>
</body>
</html> la imagen de la iz tiene un float right, por aquello de que afecte.