Comment puis-je arrêter une mise en forme CSS de distorsion lorsque le zoom in/out?
J'ai créé un site de base avec un #div conteneur qui comprend le #navbar et #contenu. Cependant, quand je fais un zoom avant ou arrière, le #navbar fausse, si je zoom dans les liens poussés vers le bas ci-dessous les uns des autres au lieu d'être en ligne. Si je zoom, trop de remplissage est ajouté entre les liens. Comment puis-je arrêter?
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 arrêter de distorsion?
Aussi, je suis encore assez nouveau pour le CSS, j'ai appris à utiliser % au lieu de px. Est ce que le droit? Aussi tout ce que vous avez à ce point, s'il vous plaît laissez-moi savoir.
Merci d'avance!
Quel navigateur utilisez-vous pour faire des tests? Ils traitent d'un zoom très différemment. Je pense que les pourcentages vont jeter les choses ainsi.
Je ne serais pas s'inquiéter à ce sujet. Certains navigateurs ont "zoom texte" plutôt que le zoom de la page entière. C'est probablement préférable de concentrer les efforts sur la mise en page et de ne pas devenir déformée lorsque la taille du texte les changements ... pas de navigateur zoom de la mise en œuvre, elle sera variable et vous ne pouvez pas vraiment contrôler.
J'utilise firefox. Il y a un moyen de l'empêcher de se déformer, je sais que quand j'ai essayé de faire une mise en forme css avant, les différentes sections de la page de distorsion et de passer sous les uns des autres.
Pztar, avez-vous jamais donner une réponse que vous avez pensé était-elle satisfaisante?
Concernant les pourcentages, il ya un temps et un lieu. Cela vaut également pour px, em, rem, pt, pc, etc etc... Pour garder la mise en page à la recherche de la même chose, vous voulez probablement les éléments associés à l'utilisation px
Je ne serais pas s'inquiéter à ce sujet. Certains navigateurs ont "zoom texte" plutôt que le zoom de la page entière. C'est probablement préférable de concentrer les efforts sur la mise en page et de ne pas devenir déformée lorsque la taille du texte les changements ... pas de navigateur zoom de la mise en œuvre, elle sera variable et vous ne pouvez pas vraiment contrôler.
J'utilise firefox. Il y a un moyen de l'empêcher de se déformer, je sais que quand j'ai essayé de faire une mise en forme css avant, les différentes sections de la page de distorsion et de passer sous les uns des autres.
Pztar, avez-vous jamais donner une réponse que vous avez pensé était-elle satisfaisante?
Concernant les pourcentages, il ya un temps et un lieu. Cela vaut également pour px, em, rem, pt, pc, etc etc... Pour garder la mise en page à la recherche de la même chose, vous voulez probablement les éléments associés à l'utilisation px
OriginalL'auteur Pztar | 2012-03-14
Vous devez vous connecter pour publier un commentaire.
J'ai eu un problème similaire que j'ai corrigé par l'ajout d'un supplément div autour de mon menu de navigation. J'ai ensuite ajouté les éléments suivants
Cela l'a empêché de s'enrouler. Espérons que cela fonctionne.
OriginalL'auteur London804
Que cette question n'en est toujours constante points de vue, je vais poster la solution que j'utilise actuellement.
CSS Media Queries:
Découvrez:
CSS-Tricks + appareil tailles et Les Media Queries
OriginalL'auteur Pztar
De résoudre le problème avec zoom, essayez d'ajouter la
min-width
attribut à votre extérieur countainer (#container
ou#navbar
?).Réglage
min-width
empêche la page web de réduire vers le bas au-delà de la largeur spécifiée (c'est à dire 300px). Si vous zoomez trop loin, au lieu de les éléments à l'intérieur de la<div>
de sauter vers le bas sur la ligne suivante, votre barre de navigation va cesser de rétrécissement et une barre de défilement apparaîtra au bas de la page.Exemple (dans votre feuille de style):
Un autre bon moyen d'y parvenir est d'appliquer le min-width attribut du corps de la page.
Exemple (dans votre feuille de style):
Enfin, si vous voulez faire de votre barre de navigation couvrant la totalité de la largeur de la page, utilisez
{clear:both;}
dans la feuille de style.OriginalL'auteur helper
Hmm....avez-vous essayé d'ajouter en min-largeur/min-hauteur de propriétés encore? Vous pouvez simplement inclure ces propriétés sur votre #div conteneur. Qui pourrait bien faire l'affaire.
OriginalL'auteur Lobabob
Différents navigateurs de l'utilisateur pour les différentes techniques de zoom. Tous ont des défauts. À l'aide de pourcentages va introduire 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
OriginalL'auteur Diodeus - James MacFarlane
Je voudrais juste absolu hauteurs et les largeurs de tous les éléments/vrd sur la page.
id {height: 250px; width: 500px}
Ou vous pouvez également utiliser la fonction min/max-largeur/hauteur pour ajuster la mise en page sur différentes tailles d'écran ou lors d'un redimensionnement de la fenêtre du navigateur.
OriginalL'auteur Dominik Schmidt
C'est principalement parce que u ont défini la largeur de votre ou de marge propriétés en pourcentage. Si vous le faites, assurez-u fournir le maximum de la largeur de cet élément
OriginalL'auteur RedDevils
Ici, vous allez, c'est un peu comme les suggestions ci-dessus, mais son obtenu une largeur fixe de la zone de contenu, si vous avez été à la recherche pour la largeur je suis désolé (;_;)
OriginalL'auteur Gordon Mcleod
Vous allez avoir à utiliser un css media query pour définir des points d'arrêt pour les différents styles dans votre css. Qui, si utilisé correctement, il aura résoudre les éventuels problèmes de distorsion.
OriginalL'auteur jimmybisenius