Soy muy nuevo en esto

American2010 · #1 (**permalink**) 20/10/2008, 07:58

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&oacute;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;

America|UNK · #2 (**permalink**) 20/10/2008, 09:45

#menu

Código HTML:

#menu {
float:left;
width: 870px;
height: 51px;
padding-left:50px;
}

PD: Por cierto en algunos estilos para el margin solo hace falta poner margin:0px auto en vez de margin:0px auto 0px auto;

Mikmoro · #3 (**permalink**) 20/10/2008, 10:03

Dos cosas:

1.- creo que sería conveniente que añadieras clear:both al menú:

Cita:

#menu {
width: 870px;
height: 51px;
margin: 70 auto 0 auto;
border: 1px solid #fff;
clear: both;
}

de esa manera irá obligatoriamente a la segunda línea.

2.- Tienes un error en este selector que hace que no funcione debedamente:

Cita:

#contenedor
{
width:900px;
margin: 10 auto 10 auto;
border: 1px solid #fff;
}

Debería ser:

Cita:

#contenedor
{
width:900px;
margin: 10px auto;
border: 1px solid #fff;
}

American2010 · #4 (**permalink**) 20/10/2008, 10:26

Gracias, ahora si queda perfecto :D

Lo que note que si al menú le dejo float left, no lo puedo centrar con la funcion auto en margin, pero si pongo como decías clear: both si...

#menu {
clear: both;
width: 870px;
height: 41px;
margin: 0px auto;
}

Ahora una gran gran duda, yo que vengo de las tablas y aun las quiero, se que mi sitio se vería bien en cualquier navegador... Ahora... CSS no me dá ninguna garantía no?

Lo digo porque por ejemplo, para que todo quede centrado, tuve que añadir al body, text-align: center, aunque sin eso en firefox lo veía bien... Y por ejemplo el hover que reemplaza la imagen de fondo, en IE no funciona... :(