Esto debe ser una consulta muy muy sencilla, pero el que es ciego no lo ve, y yo en esto de CSS me meto de atrevido nomás...
Tengo este problema, estoy maquetando para pasar un sitio a CSS y dejar de usar tablas...
Siguiendo un consejo, cada div que estoy poniendo, los pongo con borde de 1px para ver bien donde estan ubicados e ir logrando lo que quiero...
Aca las 3 imagenes de lo que logro, y el problema que tengo cuando anulo los bordes...
Al sacar los bordes, todo se descompagina... Les dejo los códigos... A ver que hago mal...
Código HTML:
<html>
<head>
<title>el</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="contenedor">
<div id="header">
<div id="logo"></div>
<div id="rss"></div>
<div id="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Especiales</a></li>
<li><a href="#">Presentación</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Código HTML:
body
{
font-family: Tahoma, Verdana, Arial;
font-size:14px;
color:#FFFFFF;
background:#000033;
}
#contenedor
{
width:900px;
margin: 10 auto 10 auto;
border: 1px solid #fff;
}
#header
{
width:880px;
height: 130px;
margin: 0 auto 0 auto;
border: 1px solid #fff;
}
#logo {
float: left;
width: 300px;
height: 49px;
margin: 5px;
background: url(images/gastro.gif) no-repeat;
background-position: left 0px;
}
#rss {
float: right;
width: 60px;
height: 60px;
margin: 5px;
background: #ddd;
}
#menu {
width: 870px;
height: 51px;
margin: 70 auto 0 auto;
border: 1px solid #fff;
}
#menu a {
text-decoration: none;
color: #000;
}
#menu ul{
list-style:none;
margin:0;
padding:0;
}
#menu li{
display: block;
text-align: center;
font-weight: bold;
width: 142px;
height: 41px;
margin: 0px;
padding-top: 12px;
float:left;
background: url(images/top1.gif) no-repeat;
background-position: left 0px;
}
#menu li:hover{
background: url(images/top2.gif) no-repeat;
background-position: left 0px;
}
#menu li:hover a{
display: block;
}
Para sacar el borde anulo la linea border: 1px solid #fff;