Foros del Web » Creando para Internet » CSS »

Soy muy nuevo en esto

Estas en el tema de Soy muy nuevo en esto en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/10/2008, 08:58
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Soy muy nuevo en esto

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;
  #2 (permalink)  
Antiguo 20/10/2008, 10:45
Avatar de America|UNK  
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 11 años
Puntos: 56
Respuesta: Soy muy nuevo en esto

#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;
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */
  #3 (permalink)  
Antiguo 20/10/2008, 11:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Soy muy nuevo en esto

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;
}
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 20/10/2008, 11:26
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Respuesta: Soy muy nuevo en esto

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... :(

Última edición por American2010; 20/10/2008 a las 11:33
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:58.