Buenas tardes,
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:
<!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>
Y aqui el CSS.
Código:
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;
}
Seria genial que alguien pudiera ayudarme. He buscado por todas partes y no encuentro solucion.
Gracias de antemano!