¿Cómo impido que un diseño CSS se distorsione al acercar/alejar?

Question

He creado un sitio muy básico con un #container div que incluye #navbar y #content. Sin embargo, cuando acerco o alejo, el #navbar se distorsiona, si amplío, los enlaces se colocan uno debajo del otro en lugar de estar en línea. Si alejé, se agrega demasiado relleno entre los enlaces. ¿Cómo puedo detener esto?

HTML:

<div id="navbar"> 
<ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="top.html">Top</a></li> 
    <li><strong><a href="free.html">FREE</a></strong></li> 
    <li><a href="photo.html">Photo</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="contact.html">Contact Us</a></li> 
</ul> 
</div> 

<div id="content"> 

<p>Some sample text.<p> 

</div> 


</div> 

CSS:

#container { 

    position: static; 
    background-color: #00bbee; 
    margin-left: 20%; 
    margin-right: 20%; 
    margin-top: 7%; 
    margin-bottom: 15%; 
    border: 2px solid red; 


} 

#navbar ul{ 

    list-style: none; 



} 

#navbar li{ 

    display: inline; 

} 

#navbar li a{ 

    text-decoration: none; 
    color: #11ff11; 
    margin: 3%; 
    border: 1px dotted orange; 
    padding-left: 4px; 

} 

#navbar li a:hover { 

    background-color: white; 
    color: green; 

} 

#navbar { 

    background-color: #eeeeee; 
    padding-top: 2px; 
    padding-bottom: 5px; 
    border: 1px solid yellow; 

} 

¿Cómo puedo dejar que se deforme?

Además, sigo siendo bastante nuevo en CSS, me enseñaron a usar% en lugar de px. ¿Está bien? También hay algo más que tienes que señalar, por favor házmelo saber.

¡Gracias de antemano!

Answer 1

Como esta pregunta todavía se pone vistas constantes, voy a publicar la solución que uso actualmente.

CSS Consultas de medios:

@media screen and (max-width: 320px) { 

/*Write your css here*/ 

} 

@media screen and (max-width: 800px) { 

} 

Salida: CSS-Tricks + device sizes y Media Queries

Answer 2

Diferentes navegadores usan diferentes técnicas para acercar. Todos ellos tienen fallas. Usar porcentajes introducirá errores de redondeo. No hay respuestas fáciles.

Ver: http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html

Answer 3

Hmm .... ¿Usted ha intentado la adición de las propiedades min-width/min-height todavía? Puede simplemente incluir esas propiedades en su #container div. Eso podría hacer el truco.

Answer 4

Tuve un problema similar al que arreglé agregando un div adicional en mi menú de navegación. Luego agregué lo siguiente

#menu-container { 
    position: absolute; 
    white-space: nowrap; 
    overflow: hidden; 

} 

Esto evitó que se envolviera. Espero que funcione.

Answer 5

Para solucionar el problema con el acercamiento, intente agregar el atributo min-width a su countainer externo (#container o #navbar?). La configuración min-width evita que la página web intente encogerse más allá del ancho especificado (es decir, 300 px). Si amplía demasiado, en lugar de los elementos dentro del <div> saltando a la siguiente línea, la barra de navegación dejará de encogerse y aparecerá una barra de desplazamiento en la parte inferior de la página.

Ejemplo (en su hoja de estilo):

#navbar {min-width:300px;} 

Otra buena manera de conseguir esto es aplicar el atributo-min anchura de cuerpo de la página.

Ejemplo (en su hoja de estilo):

body {min-width:300px;} 

Por último, si usted desea hacer su barra de navegación abarcan todo el ancho de la página, utilice {clear:both;} en la hoja de estilo.

Answer 6

Simplemente establecería alturas y anchuras absolutas para todos los elementos/divs en la página.

id {height: 250px; ancho: 500px}

O también puede usar min/max-width/hight para ajustar el diseño de la página en diferentes tamaños de pantalla o al cambiar el tamaño de la ventana del navegador.

Answer 7

Se debe principalmente a que ha configurado sus propiedades de ancho o margen en porcentaje. Si lo hace, asegúrese de proporcionar el ancho máximo a dicho elemento

Answer 8

Aquí va, esto es muy parecido a las sugerencias anteriores pero tiene un área de ancho fijo, si buscaba ancho completo lo siento (; _;)

<style> 
body { 
    margin:0px; 
} 
#container { 
    width:990px; 
    background-color: #00bbee; 
    margin:0 auto; 
    border: 2px solid red; 
} 
#navbar ul { 
    list-style: none; 
} 
#navbar li { 
    display: inline; 
} 
#navbar li a { 
    text-decoration: none; 
    color: #11ff11; 
    margin: 3%; 
    border: 1px dotted orange; 
    padding-left: 4px; 
} 
#navbar li a:hover { 
    background-color: white; 
    color: green; 
} 
#navbar { 
    background-color: #eeeeee; 
    padding-top: 2px; 
    padding-bottom: 5px; 
    border: 1px solid yellow; 
} 
</style> 

<div id="container"> 
    <div id="navbar"> 
    <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="top.html">Top</a></li> 
     <li><strong><a href="free.html">FREE</a></strong></li> 
     <li><a href="photo.html">Photo</a></li> 
     <li><a href="about.html">About</a></li> 
     <li><a href="contact.html">Contact Us</a></li> 
    </ul> 
    </div> 
    <div id="content"> 
    <p>Some sample text. 
    <p> 
    </div> 
</div> 

Answer 9

vas a querer utilizar una consulta de medios CSS para definir puntos de separación para diferentes estilos en el CSS. Que si se usa correctamente solucionará los problemas de distorsión.