Foros del Web » Creando para Internet » CSS »

Problema con inline-block en un menu

Estas en el tema de Problema con inline-block en un menu en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/11/2014, 13:35
 
Fecha de Ingreso: julio-2007
Mensajes: 28
Antigüedad: 15 años, 5 meses
Puntos: 0
Problema con inline-block en un menu

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!
  #2 (permalink)  
Antiguo 04/11/2014, 14:10
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 11 años, 9 meses
Puntos: 17
Respuesta: Problema con inline-block en un menu

display:inline; no es igual a display:inline-block;
tus elementos de la lista los tienes en display:inline, pero no inline-block;
ahora, tengo una duda ¿por que width:100% en .principal li ?
te recomiendo que por el momento, a todos tus elementos les pongas un borde de 1 pixel en un color en cual puedas distinguir, estoy seguro que eso te orientara mejor para que encuentres el detalle que tienes, cualquier duda, comenta

pd: enlace de tu imagen http://hostingd.imagecross.com/image...36captura1.jpg

tu imagen

Etiquetas: background, color, hover, html, width
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 21:45.