Hola, soy nuevo con html y css. Estoy intentado realizar mi primera maquetación y por ahora tengo básicamente dos inconvenientes...
-Tengo una imágen como cabecera que enlaza hacia el index de la página, es decir tiene el link y la info en span oculta, etc. El tema es que en IE todo marcha bien, pero en Firefox y Chrome el enlace se sale del DIV de la cabecera (header) y aparece como un item más del próximo DIV (una lista, el menú) donde se puede ver el enlace al index. En la imágen que pongo en este post pueden verlo en la primer imágen como el recuadro celeste que está al lado de "Nosotros", el cual enlaza al index como también lo hace la cabecera. Mientras que en la segunda imágen se ve como en IE todo marcha bien y no aparece.
-Algo similar sucede con el menú. En IE se acomoda al DIV correspondiente, mientras que en los otros navegadores se sale del mismo, copando espacio de la cabecera.
-Otra duda, ¿cómo puedo eliminar los espacios que hay entre los distintos items de las listas? Es decir, en la imágen, eliminarlos de tal manera que no se vea el fondo verde entre ellos.
Muchas gracias!, les dejo la imágen de la zona de conflicto y el código HTML y CSS.
HTML
Código HTML:
<body>
<div id="container">
<div id="header">
<h1> <a href="index.html" title="MARCA"> <span> MARCA - SLOGAN</span> </h1>
</div>
<div id="menu">
<ul>
<li><a href="nosotros/nosotros.html" title="bla bla bla">Nosotros</a></li>
<li><a href="servicios/servicios.html" title="bla bla bla">Servicios</a></li>
<li><a href="trabajos/clientes.html" title="bla bla bla">Clientes</a></li>
<li><a href="contacto/contacto.html" title="bla bla bla">Contacto</a></li>
</ul>
</div>
<div id="main">
<p>Contenido principal. bla bla bla bla bla bla bla bla.</p>
</div>
<div id="footer">
<p> calle Esquina 5 <br> 4g99-1051<br> Copypaightr. </p>
</div>
</div>
</body>
</html>
CSS
Código HTML:
* { margin: 0; padding: 0;}
body {background-image: url(backhead.jpg); background-position: top; background-repeat: repeat-x; background-color: #90b6fc; color: #666; font-family: Arial, Tahoma, Verdana; text-align: center; height: 100%;}
#container {width: 960px; height: 100%; margin: 0px auto; text-align: left; background: #000000;}
#header {width: 960px; height: 150px; float: left; background: url(header.jpg);}
#header a {width: 960px; height: 150px; display: block; text-decoration: none;}
#header a span {visibility: hidden;}
#menu {width: 960px; height: 20px; float: left; background: #00FF00;}
#menu li {display: inline;}
#menu li a {padding: 10px; font-size: h3; background-color: #2175bc;}
#menu li a:hover {background-color: #2586d7; margin-bottom: -1px; padding-bottom: 12px;}
#main {width: 960px; min-height: 500px; float: left; background: #0000FF;}
#footer {width: 960px; min-height: 50px; float: left; background: #536783;}
.img {border: none;}
a:link, a:visited {text-decoration:none; color: #141484;}
a:hover {text-decoratio:none; color: #1E82C8;}
a:active {text-decoratio:none; color: #C11111;}