Foros del Web » Creando para Internet » CSS »

Nuevo en Css... Aprendiendo

Estas en el tema de Nuevo en Css... Aprendiendo en el foro de CSS en Foros del Web. Soy nuevo en css y estoy tratando de aprender, mi código css es el siguiente: Código: body { text-align: center; margin: 0 0 0 0; ...
  #1 (permalink)  
Antiguo 05/12/2008, 08:30
 
Fecha de Ingreso: diciembre-2007
Mensajes: 169
Antigüedad: 10 años
Puntos: 6
Pregunta Nuevo en Css... Aprendiendo

Soy nuevo en css y estoy tratando de aprender, mi código css es el siguiente:
Código:
body {
	text-align: center;
	margin: 0 0 0 0;
	background: #D8D8D8 url("http://www.uach.cl/img/fondo_oscuro.jpg") repeat-x scroll center top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
img {
	border: none;
}
#menu{
	background-image: url(menu.jpg);
	width: 800px;
	height: 19px;	
}
#menu ul{
	list-style-type: none;
	margin: 0 0 0 0;
}
#menu ul li{
	display: inline;
}
#menu ul li a{
	color:#fff;
	text-decoration: none;
	font-weight:bold;
	padding:15px;
}
#menu ul li a:hover{
	color: #EED057;
}
y el html es el siguiente:
Código HTML:
 <div id="contenedor">
		<div id="header">
			<img src="http://www.uach.cl/img/skin_superior_oscuro.jpg" width="800" height="21" />
			<img src="http://www.uach.cl/img/skin_central_oscuro.jpg" width="800" height="51" />
			<div id="menu">
				<ul>
					<li><a href="#">Admisión</a></li>
					<li><a href="#">Facultades</a></li>
					<li><a href="#">Organización</a></li>
					<li><a href="#">Extensión</a></li>
					<li><a href="#">Investigación</a></li>
					<li><a href="#">Servicios</a></li>
				</ul>
			</div>
		</div>
	</div> 
pero así se ven en los navegadores....





si alguien me puede ayudar por favor!!! :D


Actualización:
a la clase "img" le coloque display: block; y quedo bien en ie pero en firefox se ve pegado a la izquierda.
  #2 (permalink)  
Antiguo 05/12/2008, 09:45
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Nuevo en Css... Aprendiendo

aquí puedes tener un problema

Código:
#menu ul li a{
	color:#fff;
	text-decoration: none;
	font-weight:bold;
	padding:15px;
}
al decir padding:15px; solo estas dando a los 4 lados y te puede estar abriendo la lista
  #3 (permalink)  
Antiguo 05/12/2008, 09:46
 
Fecha de Ingreso: noviembre-2008
Mensajes: 94
Antigüedad: 9 años
Puntos: 6
Respuesta: Nuevo en Css... Aprendiendo

Bueno, así es como lo haría yo:

#header {
width: 800px;
margin: 0 auto;
}

#header img {
display: block;
margin: 0; padding: 0;
border-width: 0;
width: 100%;
}

Bueno, y a todo esto ¿alguna razón para no hacer:

#header {
width: 800px;
height: 80px; <-- o lo que sea de la imagen
margin: 0 auto;
background: url('imagen con la foto y escudo');
position: relative;
}

#header #menu {
width: 800px;
height: 19px;
position: absolute;
bottom: 0; left: 0;
}

Y en tu html puedes tener simplemente:

<div id="header">
<div id="menu">
<ul>
bla bla bla
</ul>
</div>
</div>

Hmmm... incluso podríamos sacar ese <div id="header"> de ahí y dejar nada más menú:

#menu {
width: 800px;
height: 80px; <-- o lo que sea de la imagen
margin: 0 auto;
background: url('imagen con la foto y escudo');
position: relative;
}

#menu ul {
width: 800px;
height: 19px;
position: absolute;
bottom: 0; left: 0;
}

Última edición por rb3m; 05/12/2008 a las 10:12
  #4 (permalink)  
Antiguo 05/12/2008, 15:22
 
Fecha de Ingreso: diciembre-2007
Mensajes: 169
Antigüedad: 10 años
Puntos: 6
De acuerdo Respuesta: Nuevo en Css... Aprendiendo

muchas gracias !!!!!!! ....

pronto seré un master!! jij

saludos :D se pasaron!!!! :D
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 08:00.