Wie verhindere ich, dass ein CSS-layout verzerren beim Zoomen in/out?

Ich habe eine sehr einfache Website, die mit einem #div-container enthält, der #navbar und #content. Allerdings, wenn ich zoom in oder out, der #navbar verzerrt, wenn ich die zoom in-links nach unten gedrückt unter einander, statt inline. Wenn ich verkleinern, zu viel Polsterung ist zwischen den links. Wie kann ich das verhindern?

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;

}

Wie kann ich verhindern, dass es zu verzerren?

Auch, ich bin noch ziemlich neu in CSS, ich wurde gelehrt, mit % statt px. Ist das richtig? Auch alles, was Sie haben zu zeigen, lassen Sie es mich bitte wissen.

Vielen Dank im Voraus!

InformationsquelleAutor der Frage Pztar | 2012-03-14

5

Hatte ich ein ähnliches problem habe ich behoben, indem ein zusätzliches div meine Navigations-Menü. Ich habe dann noch folgende
```
#menu-container {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;

}
```
Dieser verhinderte, dass es zu Verpacken. Hoffe, es funktioniert.

InformationsquelleAutor der Antwort London804
2

Da diese Frage wird immer noch konstant Ansichten, poste ich die Lösung, die ich derzeit nutze.

CSS Media Queries:
```
@media screen and (max-width: 320px) { 

/*Write your css here*/

}

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

}
```
Check out:
CSS-Tricks + - Gerät Größen und Media Queries

InformationsquelleAutor der Antwort Pztar
1

Beheben Sie das problem mit Zoomen, versuchen Sie, den min-width Attribut zu Ihrem äußeren countainer (#container oder #navbar?).
Einstellung min-width verhindert, dass die Webseite von der aus Sie versuchen zu verkleinern über die angegebene Breite (z.B. 300px). Wenn Sie zoom-in zu weit, anstelle der Elemente innerhalb der <div> springen Sie nach unten auf die nächste Zeile, Ihre Navigationsleiste wird aufhören zu schrumpfen und eine Bildlaufleiste erscheint am unteren Rand der Seite.

Beispiel (in deinem stylesheet):
```
#navbar {min-width:300px;}
```
Weiterer guter Weg, dies zu erreichen, ist die Anwendung der min-width-Attribut auf der Seite Körper.

Beispiel (in deinem stylesheet):
```
body {min-width:300px;}
```
Schließlich, wenn Sie wollen, um Ihr navbar span die volle Breite der Seite nutzen {clear:both;} in der stylesheet.

InformationsquelleAutor der Antwort helper
0

Hmm....haben Sie versucht, indem in min-width/min-height-Eigenschaften noch? Sie konnte nur gehören diese Eigenschaften auf Ihren #container-div. Das könnte nur den trick tun.

InformationsquelleAutor der Antwort Lobabob
0

Verschiedenen Browsern Benutzer verschiedene Techniken für zoom. Alle haben Fehler. Mit Prozentzahlen wird die Einführung von Rundungsfehlern. Es gibt keine einfachen Antworten.

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

InformationsquelleAutor der Antwort Diodeus - James MacFarlane
0

Ich würde einfach eingestellt absoluten Höhen und breiten, die für alle elements/divs auf der Seite.

id {height: 250px; Breite: 500 Pixel}

Oder Sie können auch die min/max-Breite/Höhe anpassen des Seitenlayouts an verschiedene Bildschirm-Größen oder wenn die Größe des browser-Fensters.

InformationsquelleAutor der Antwort Dominik Schmidt
0

Ist es vor allem, weil u haben, setzen Sie Ihre Breite oder margin-Eigenschaften in Prozent. Wenn Sie das tun, stellen Sie sicher, u bieten maximale Breite auf ein solches element

InformationsquelleAutor der Antwort RedDevils

Hier gehen Sie, dies ist ein viel wie die oben genannten Vorschläge, aber die hat eine Feste Breite content-Bereich, wenn Sie waren auf der Suche für die volle Breite I ' m sorry (;_;)

<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>

InformationsquelleAutor der Antwort Gordon Mcleod

0

Sind Sie gehen zu wollen, um die Verwendung einer css-media-query-Breakpoints zu setzen, die für verschiedene Stile in der css. Die, wenn Sie richtig eingesetzt wird fix jede Verzerrung Fragen.

InformationsquelleAutor der Antwort jimmybisenius

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

id {height: 250px; Breite: 500 Pixel}