Nuevamente tengo un problema relacionado con css. Intentare ser claro:
Tengo una web con un contenedor #container que lo contiene todo. La anchura de ese contenedor es de 811px. --> En este momento, esta a 850px, porque si lo dejo en 811px como quiero, me manda el ultimo elemento del menu a una segunda fila. Este es el principal problema.
El banner o header ocupa 811px, y me lo muestra bien. Como todo, esta dentro del contenedor.
A continuacion, tengo un DIV #cuerpo, que contiene el contenido propiamente. Le asigno un color transparente de fondo y se me muestra como es debido. En la portada, este div se llama #cuerpoPrincipal.
Y a continuacion, otro DIV de nombre #menus, que contiene dos menus distintos. A traves de css y con el atributo inline-block lo pongo como me gustaria. Pero por lo visto, este atributo es un poco... no se como llamarlo para no sonar grosero jejeje, y lo que hace es poner unos pixeles de separacion entre elemento y elemento. He conseguido solucionarlo un poco modificando la anchura de algunos elementos, pero no consigo el resultado deseado. A continuacion pego el enlace a un servidor de esos temporales por si alguien le puede echar un ojo. Es una captura del estado actual.
http://www.imagecross.com/d/image-hosting-view-07.php?id=36captura1.jpg
Vereis que hay un espacio perdido al lado izquierdo, el cual me gustaria ganar y no se como. La suma de todos los pixeles es 811.
A continuacion pongo el index.html
Código:
Y aqui el CSS.<!DOCTYPE html> <html lang="es"> <head> <title>Ordinadors del Maresme - Inici</title> <link href="css/estilos.css" rel="stylesheet" type="text/css"> <link rel="shortcut icon" href="img/favicon.png"> </head> <body> <div id="container"> <header> <img src="img/retolcomplert.png" /> </header> <div id="cuerpoPrincipal"> <img src="img/logoComplert.png" /> </div> <div id="menus"> <ul class="principal"> <li class="reparacion"><a href="reparacion.html"></a></li><li class="recuperacion"> <a href="recuperacion.html"></a></li><li class="mantenimiento"> <a href="mantenimiento.html"></a></li><li class="urgencias"> <a href="urgencias.html"></a></li> </ul> <ul class="auxiliar"> <li class="solicitar"><a href="solicitar.html"></a></li><!-- --><li class="tarifas"><a href="tarifas.html"></a></li><!-- --><li class="facebook"><a href="#"></a></li><!-- --><li class="contacto"><a href="contacto.html"></a></li> </ul> </div> </div> </body> </html>
Código:
Seria genial que alguien pudiera ayudarme. He buscado por todas partes y no encuentro solucion.body{
width: 100%;
height: 100%;
margin: 0px;
background-color: white;
background-image: url('../img/fondo.png');
background-position: left bottom;
background-repeat: no-repeat;
}
#container {
width: 850px;
height: 768px;
margin: 0 auto;
}
header{
width: 100%;
margin: 0 auto;
margin-top: 35px;
text-align: center;
}
#cuerpoPrincipal{
margin-top:15px;
}
#cuerpo{
margin-top: 15px;
height: 390px;
background-color: rgb(224,224,224);
opacity: 0.5;
}
#menus{
margin:0 auto;
}
#principal{
height: 120px;
}
#logo{
float: left;
}
.principal li{
width:100%;
display: inline;
margin:0;
padding:0;
word-spacing: -1px;
font-size: 1px;
letter-spacing: -1px;
}
.principal li a{
height: 65px;
margin: 0;
padding: 0;
display: inline-block;
word-spacing: normal;
font-size: 2rem;/*u otra unidad para IE8 y -*/
letter-spacing: normal;
white-space: normal;
}
.auxiliar li{
width:100%;
display: inline;
margin:0;
padding:0;
word-spacing: -1px;
font-size: 1px;
letter-spacing: -1px;
}
.auxiliar li a{
height: 33px;
margin: 0;
padding: 0;
display: inline-block;
word-spacing: normal;
font-size: 2rem;/*u otra unidad para IE8 y -*/
letter-spacing: normal;
white-space: normal;
}
li.reparacion a{
background: url("../img/btnRep.png") no-repeat;
width: 199px;
}
li.reparacion a:hover {
background: url("../img/btnRepHover.png") no-repeat;
width: 199px;
}
li.recuperacion a{
background: url("../img/btnRec.png") no-repeat;
width: 237px;
}
li.recuperacion a:hover {
background: url("../img/btnRecHover.png") no-repeat;
width: 237px;
}
li.mantenimiento a{
background: url("../img/btnMant.png") no-repeat;
width: 256px;
}
li.mantenimiento a:hover {
background: url("../img/btnMantHover.png") no-repeat;
width: 256px;
}
li.urgencias a{
background: url("../img/btnUrg.png") no-repeat;
width: 119px;
}
li.urgencias a:hover {
background: url("../img/btnUrgHover.png") no-repeat;
width: 119px;
}
li.solicitar a{
background: url("../img/btnSol.png") no-repeat;
width: 215px;
}
li.solicitar a:hover {
background: url("../img/btnSolHover.png") no-repeat;
width: 215x;
}
li.tarifas a{
background: url("../img/btnTar.png") no-repeat;
width: 279px;
}
li.tarifas a:hover {
background: url("../img/btnTarHover.png") no-repeat;
width: 279px;
}
li.facebook a{
background: url("../img/btnFace.png") no-repeat;
width: 178px;
}
li.facebook a:hover {
background: url("../img/btnFaceHover.png") no-repeat;
width: 178px;
}
li.contacto a{
background: url("../img/btnCont.png") no-repeat;
width: 133px;
}
li.contacto a:hover {
background: url("../img/btnContHover.png") no-repeat;
width: 133px;
}
Gracias de antemano!
