comment - ¿Cómo puedo evitar que un diseño CSS se distorsione al acercar/alejar?

css important

Question

He configurado un sitio muy básico con un div #container que incluye el #navbar y #content. Sin embargo, al acercar o alejar la imagen, el #navbar se distorsiona, si acerco los enlaces, los empujo hacia abajo uno debajo del otro en lugar de estar en línea. Si me alejo, 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 evitar que se distorsione?

Además, todavía soy bastante nuevo en CSS, me enseñaron a usar% en lugar de px. ¿Está bien? También cualquier otra cosa que tenga que señalar, por favor hágamelo saber.

¡Gracias por adelantado!

Answer 1

Aquí tienes, esto se parece mucho a las sugerencias anteriores, pero tiene un área de contenido de ancho fijo, si estabas buscando el 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 2

Como esta pregunta sigue recibiendo vistas constantes, publicaré la solución que utilizo actualmente.

Consultas de medios CSS:

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

/*Write your css here*/

}

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

}

Echa un vistazo a: CSS-Tricks + tamaños de dispositivos y consultas de medios

Answer 3

Diferentes navegadores utilizan diferentes técnicas para hacer zoom. Todos ellos tienen fallas. El uso de porcentajes introducirá errores de redondeo. No hay respuestas fáciles.

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

Answer 4

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

Answer 5

Hmm ... ¿has intentado agregar propiedades de min-width / min-height? Solo puedes incluir esas propiedades en tu div #container. Eso podría hacer el truco.

Answer 6

Para solucionar el problema de la ampliación, intente agregar el atributo de min-width a su countainer exterior (¿ #container o #navbar ?). La configuración min-width evita que la página web intente reducirse más allá del ancho especificado (es decir, 300 px). Si acercas demasiado, en lugar de que los elementos dentro de <div> salten a la siguiente línea, la barra de navegación dejará de reducirse 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 lograr esto es aplicar el atributo de ancho mínimo al cuerpo de la página.

Ejemplo (en su hoja de estilo):

body {min-width:300px;}

Finalmente, si desea que su barra de navegación abarque todo el ancho de la página, use {clear:both;} en la hoja de estilo.

Answer 7

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

id {altura: 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 8

Tuve un problema similar que solucioné agregando un div adicional alrededor de 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 9

Vas a querer usar una consulta de medios css para establecer puntos de ruptura para diferentes estilos en tu css. Que si se usa correctamente arreglará cualquier problema de distorsión.