web-dev-qa-db-fra.com

Comment puis-je empêcher une mise en forme CSS de se déformer lors d'un zoom avant/arrière?

J'ai mis en place un site très basique avec une div #container qui inclut #navbar et #content. Cependant, lorsque je fais un zoom avant ou arrière, la barre de réglage #navbar se déforme, si je fais un zoom avant, les liens sont poussés l'un en dessous de l'autre au lieu d'être en ligne. Si je fais un zoom arrière, trop de bourrage est ajouté entre les liens. Comment puis-je arrêter ça? 

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;

}

Comment puis-je l'empêcher de se déformer? 

De plus, je suis encore relativement novice en CSS, on m'a appris à utiliser% au lieu de px. Est-ce correct? Également tout ce que vous devez signaler, faites-le-moi savoir. 

Merci d'avance! 

csszoomingdistortion
17
Pztar

Cette question ayant toujours des points de vue constants, je vais publier la solution que j'utilise actuellement. 

Requêtes de médias CSS:

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

/*Write your css here*/

}

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

}

Découvrez: astuces CSS + tailles d’appareils et Requêtes multimédia

3
Pztar

J'ai eu un problème similaire que j'ai résolu en ajoutant un div supplémentaire autour de mon menu de navigation. J'ai ensuite ajouté ce qui suit 

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

}

Cela l’empêcha d’emballer. Esperons que ça marche. 

5
London804

Pour résoudre le problème de zoom avant, essayez d’ajouter l’attribut min-width à votre compte extérieur (#container ou #navbar?) . Le réglage de min-width empêche la page Web d’essayer de réduire au-delà de la largeur spécifiée (300px). Si vous effectuez un zoom avant trop important, au lieu que les éléments à l'intérieur du <div> sautent sur la ligne suivante, la barre de navigation cesse de se réduire et une barre de défilement apparaît en bas de la page.

Exemple (dans votre feuille de style):

#navbar {min-width:300px;}

Un autre moyen d'y parvenir consiste à appliquer l'attribut min-width au corps de la page.

Exemple (dans votre feuille de style):

body {min-width:300px;}

Enfin, si vous souhaitez que votre barre de navigation couvre toute la largeur de la page, utilisez {clear:both;} dans la feuille de style.

1
helper

Je voudrais juste définir des hauteurs et des largeurs absolues pour tous les éléments/divs de la page.

id {hauteur: 250px; largeur: 500px}

Vous pouvez également utiliser largeur minimale/maximale/largeur pour ajuster la mise en page sur différentes tailles d'écran ou lors du redimensionnement de la fenêtre du navigateur.

0
Dominik Schmidt

Vous allez vouloir utiliser une requête média css pour définir des points de rupture pour différents styles dans votre css. Qui, s’ils sont utilisés correctement, réglera les problèmes de distorsion.

0
jimmybisenius

Voilà, cela ressemble beaucoup aux suggestions ci-dessus, mais il a une zone de contenu de largeur fixe, si vous cherchez une largeur totale, je suis désolé (; _;)

<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>
0
Gordon Mcleod

C'est principalement parce que vous avez défini vos propriétés de largeur ou de marge en pourcentage. Si vous le faites, assurez-vous de fournir une largeur maximale à cet élément.

0
RedDevils

Différents navigateurs utilisent différentes techniques de zoom. Tous ont des défauts. L'utilisation de pourcentages introduira des erreurs d'arrondi. Il n'y a pas de réponses faciles.

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

0
Diodeus - James MacFarlane

Hmm .... avez-vous déjà essayé d'ajouter des propriétés min-width/min-height? Vous pouvez simplement inclure ces propriétés sur votre div #container. Cela pourrait faire l'affaire.

0
Lobabob