Foros del Web » Creando para Internet » CSS »

Descuadre con Menu CSS según el ZOOM

Estas en el tema de Descuadre con Menu CSS según el ZOOM en el foro de CSS en Foros del Web. Buenas, expongo mi problema. Hice un menú en css el cual con zoom 100% del navegador se ve perfectamente y sin ningún fallo. Sin embargo ...
  #1 (permalink)  
Antiguo 08/08/2011, 21:05
 
Fecha de Ingreso: junio-2009
Mensajes: 101
Antigüedad: 14 años, 10 meses
Puntos: 13
Descuadre con Menu CSS según el ZOOM

Buenas, expongo mi problema. Hice un menú en css el cual con zoom 100% del navegador se ve perfectamente y sin ningún fallo. Sin embargo cuando alejo o acerco el zoom empieza a descuadrarse. He probado ya muchísimas cosas pero siguo igual.

CSS:

Código PHP:
#cuerpo{
    
margin:0 auto;
    
width:803px;
}

#menu{
    
position:absolute;
    
border2px #000000 solid;
    
top:189px;
    
width:803px;
    
max-width803px;
}

#menu ul {
    
border0px #000000 solid;
    
list-style:none;
    
width:803px;
    
margin:0;
    
padding:0;
}

#menu li {
    
margin:0;
    
float:left
}

#menu li a{
    
display:block;
    
color:#FFFFFF;
    
background-image:url("img/menu-off.jpg");
    
color:#FFFFFF;
    
padding6px 38px 7px 38px;
    
border-left:1px #000000 solid;
    
text-decoration:none;
    
font-weight:bold
}


#menu li a:hover{
    
background-image:url("img/menu-on.jpg");


HTML:
Código HTML:
<div id="cuerpo">
	<div id="header"></div>

	<div class="menu" id="menu">
	<ul>
		<li><a href="index.php">Inicio</a></li>
		<li><a href="order.php">Servidores de Juego</a></li>
		<li><a href="more.php">M&aacute;s Productos</a></li>
		<li><a href="servers.php">Pruebanos</a></li>
		<li><a href="contact.php" style="padding:6px 34px 7px 33px;">Contactanos</a></li>
	</ul>
	</div>
</div> 
¿Estoy haciendo algo mal? No lo entiendo. Llevo semanas probando cosas diferentes. Ya nos es algo puntual, es algo que quiero "estudiar" por llamarlo de alguna manera cómo corregirlo la próxima vez. Espero que podáis ayudarme. Muchas gracias.

Un saludo

EDITO (imagenes):
Zoom - 100%:


Zoom - 83%:

Última edición por BanNsS1; 08/08/2011 a las 21:14 Razón: Imagenes
  #2 (permalink)  
Antiguo 09/08/2011, 05:01
Avatar de Karmac  
Fecha de Ingreso: agosto-2011
Ubicación: Bilbao
Mensajes: 196
Antigüedad: 12 años, 8 meses
Puntos: 34
Respuesta: Descuadre con Menu CSS según el ZOOM

El problema es que defines el ancho como 803px, así que al cambiar el zoom, todo cambia menos el ancho del contenedor, y el borde queda descuadrado.

Tal como veo ese menú… yo creo que si es los contenedores pones display: block; en lugar del width: 803px; te funcionará. Saludos.
  #3 (permalink)  
Antiguo 09/08/2011, 08:16
 
Fecha de Ingreso: junio-2009
Mensajes: 101
Antigüedad: 14 años, 10 meses
Puntos: 13
Respuesta: Descuadre con Menu CSS según el ZOOM

Sigue descuadrándose. Sin embargo ahora el borde derecho se pega al último <li> y deja un espacio en blanco a la derecha. ¿Alguna otra ocurrencia?

Muchas gracias aún así Karmac!
  #4 (permalink)  
Antiguo 09/08/2011, 09:23
Avatar de Karmac  
Fecha de Ingreso: agosto-2011
Ubicación: Bilbao
Mensajes: 196
Antigüedad: 12 años, 8 meses
Puntos: 34
Respuesta: Descuadre con Menu CSS según el ZOOM

Puedes probar poniendo tus medidas en proporciones en vez de pixels, quiero decir, % en vez de px.

De todas formas el Zoom no creo que lo use mucha gente, y si se descuadra es culpa del que lo use, no hay por que estar atento a todo cuando se diseña algo.

Saludos.
  #5 (permalink)  
Antiguo 09/08/2011, 18:43
 
Fecha de Ingreso: junio-2009
Mensajes: 101
Antigüedad: 14 años, 10 meses
Puntos: 13
Respuesta: Descuadre con Menu CSS según el ZOOM

Eso es lo que yo opino también pero ya he recibido quejas de gente que habitualmente utiliza un zoom diferente. Por lo menos ahora no salta de linea según si se aleja o acerca mucho. Sigue quedando un poco mal pero bueno.
Voy a probar eso que dices aunque creo que ya lo había probado.
Muchas gracias nuevamente, un saludo.


Edito:

-Si utilizo % no sé por qué me hace un salto de linea en los textos. Le he puesto max-height y min y sigue haciendolo pero fuera del div.

-¿Hay alguna forma de obtener el zoom que esta utilizando el navegador?
Lo que quiero hacer es que si hace mas zoom haga una accion que yo determine
y si hace menos haga otra. La cuestión estaría en establecer un padding-right al último botón
según el zoom que utilice

Última edición por BanNsS1; 09/08/2011 a las 19:17

Etiquetas: 100%, desencuadre, zoom
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 13:01.