Nuevo en Css... Aprendiendo

[albertcito]

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.

[willyfc]

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

[rb3m]

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;
}

[albertcito]

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

pronto seré un master!! jij

saludos :D se pasaron!!!! :D