Wie baue ich eine Centered Feste Breite Floating-Layout für die HTML5 und CSS3 Programmierung

Fester Breite Layouts sind häufig, aber sie sehen ein wenig seltsam, wenn der Browser nicht die Breite in der CSS3 angegeben ist. Wenn der Browser zu schmal ist, wird das Layout nicht funktioniert, und die zweite Spalte (in der Regel) fallen in die nächste Zeile nach unten.

Wenn der Browser zu breit ist, wird die Seite auf den linken Rand mit viel Weißraum auf der rechten Seite verzog werden.

Die natürliche Lösung ist eine relativ schmale fester Breite Design zu machen, die in der gesamten Seite zentriert wird.

bild0.jpg

Einige dieser Art von Design genannt haben eine (mit fester Breite im Browser zentriert floating) Wackelpudding Layout, weil es nicht ganz flüssig und nicht ganz festgelegt ist.

Einen Ersatzkörper mit einem All div

In jedem Fall erfordert die HTML nur ein neues Element, ein alle div, die alles andere in den Körper einhüllt:

fixedWidthCentered.html 
Feste Breite Centered-Layout
Linke Spalte
Rechte Spalte
Fußzeile

Die gesamte Seiteninhalte werden nun in einem speziellen div eingekapselt. Dieses div wird auf einer Standardbreite (typischerweise 640 oder 800 Pixel) der Größe verändert werden. Das alle Element wird in den Körper zentriert werden, und die anderen Elemente innerhalb gestellt werden alle als ob es der Körper:

#all {width: 800px; height: 600px; margin-left: auto-margin-right: auto-border: 1px solid gray -} # header {background-color: # e2e393-border-bottom: 3px solid black-text- align: center-width: 800px; height: 100px; padding-top: 1em -} # links {float: left; width: 200px; clear: left; border-right: 1px solid schwarz-height: 400px; padding-right: .5em -} # rechts {float: left; width: 580px; height: 400px; padding-left: .5em -} # footer {width: 800px; height: 60px; text-align: center-background-color: # e2e393 -border-top: 3px Doppel schwarz-padding-bottom: 1em-clear: both-}

Wie die Jello-Layout funktioniert

Dieser Code ist sehr ähnlich dem Stil, aber es hat einige wichtige neue Funktionen:

  • Das alle Element hat eine feste Breite. Diese Breite des Elements wird die Breite des festen Teils der Seite bestimmen.

  • alle auch braucht eine feste Höhe. Wenn Sie nicht über eine Höhe angeben, alle wird 0 Pixel hoch sein, weil alle Elemente im Inneren schwebte werden.

  • Center. Denken Sie daran, zum Zentrum divs (oder andere Elemente auf Blockebene) Sie setzen margin-left und margin-right beides Auto.

  • Machen nicht schweben alle. Das margin: auto Trick funktioniert nicht auf Floats. alle sollte kein haben schweben Attribut gesetzt.

  • Sicherstellen, dass die Innenbreiten summieren sich zu alle'S Breite. Ob alle eine Breite von 800 Pixel hat, sicher sein, dass die Breiten, Grenzen und Ränder der alle Elemente innerhalb alle in den genau 800 Pixel auf. Wenn Sie auch nur ein Pixel über gehen, wird etwas überschwappen und die Wirkung versauen. Sie können mit den Breiten Geige müssen alles funktioniert.

  • Passen Sie die Höhen: Wenn Ihr Design eine feste Höhe hat, werden Sie auch mit den Höhen Geige brauchen, um alles genau richtig aussehen. Berechnungen erhalten Sie schließen, aber Sie werden in der Regel einige Zeit das Hantieren mit genauen Messungen verbringen müssen einfach alles richtig zu machen.

Einschränkungen des Jello-Layout

Jello Layouts stellen einen Kompromiss zwischen festen und flüssigen Layouts, aber sie sind nicht perfekt:

  • Implizite Mindestbreite: Sehr schmale Browser (wie Handys) kann das Layout nicht so, wie Sie wollen, machen. Glücklicherweise ist der Inhalt immer noch sichtbar, aber nicht in genau dem Format, das Sie wollten.

  • Vergeudet Platz auf dem Bildschirm: Wenn Sie das gerenderte Teil der Seite schmal zu machen, wird viel Platz nicht in höherer Auflösung Browsern verwendet werden. Das kann frustrierend sein.

  • Komplexität: Obwohl diese Layout-Technik wesentlich einfacher als tabellenbasierte Layouts ist, ist es immer noch ein bisschen beteiligt. Sie haben Ihre divs zu planen, diese Art von Layout-Arbeiten zu machen.

Ähnliche

Menü