Beide Websites haben einen Hintergrund-Header, der über die Seite gezogen ist, während der Inhalt zentriert ist und etwa 80% der Breite abdeckt, und der sich auch perfekt mit dem Rest des Layouts deckt.
Ich bin besonders an diesen beiden Seiten interessiert, weil die Kopfzeile zwei Hintergrundfarben hat, nicht nur eine.
Ich bin mir sicher, dass es viele Tutorials im Web gibt, aber ich suche nicht nach den Keywords.
Analysieren von stumbleupon.com :
Der "Header" besteht eigentlich aus zwei divs: wrapperHeader und wrapperNav . Diese zwei haben unterschiedliche Hintergrundfarben.
Diese divs haben jeweils nur ein Kind mit der CSS-Eigenschaft
Dies führt zu einer horizontalen Zentrierung.
Diese Eigenschaft ist auch dem Content-Div zugeordnet, also sind Header, Navigation und Inhalt immer zentriert. Natürlich erfordert dies eine gewisse Breite für diese Elemente.
Die Struktur sieht so aus:
%Vor%Wenn Sie Firebug für Firefox erhalten, können Sie die Elemente leicht selbst analysieren.
Es ist background-image auf body mit der Eigenschaft background-repeat :
mehr: Ссылка
Bearbeiten : Um Ihren Inhalt zu zentrieren - I tun Sie es so:
%Vor% Setzen Sie dann width des Wrappers auf den Wert (meistens 960px ). Wenn Sie dann den Rand auf 0 auto setzen, zentriert er sich selbst.
Das Hinzufügen von Hintergrundbildern hat zwei Nachteile:
Jedes Mal, wenn Sie die Farbe Ihrer Kopfzeile ändern möchten, müssen Sie Photoshop öffnen und die Farbe dort ändern und dann in Ihrem CSS erneut ändern.
Nun möchten Sie, dass die Hintergrundfarbe der Kopfzeile sich über die Seite erstreckt, aber was, wenn Sie das auch mit der Fußzeile tun möchten?
Die einfachste Lösung ist diese:
(Sie erstellen nicht nur eine einfache Möglichkeit, die Farbe über die Seite zu strecken, sondern können auch verschiedene Farben in Kopfzeilen und Fußzeilen verwenden, aber Sie sparen sich auch das Doppelrandproblem von IE (wenn Sie Breite verwenden) und Marge in den gleichen Elementen).
index.html:
%Vor%style.css:
%Vor% In diesem Beispiel zentriert div.container die Elemente und gibt ihnen auch eine Breite, und die Hintergrundfarbe kann sich über die Seite erstrecken, weil # header, #content und #footer keine Breite haben. Und in Zukunft einfach margin und padding auf divs innerhalb von .container anwenden, und Sie werden viele Probleme mit IE in Zukunft speichern.
Ich bitte um Unterschied, es gibt einen einfachen Weg, dies zu tun. Kompatibel mit Google Chrome und Firefox, IE nicht getestet.
In Ihrer CSS-Datei:
%Vor%und jetzt einfach in Ihrer HTML-Datei verwenden. Sie können Positionierung und was-nicht dazu hinzufügen.
Dies ist nur ein Layout mit fester Breite, aber mit automatischem linken und rechten Rand. Dies hat zur Folge, dass der gesamte Inhaltsblock zentriert wird, wenn die Seitengröße größer als die Inhaltsbreite ist.
Der Hintergrund wird einfach als sich wiederholendes Bild (repeat-x) gesetzt, damit es so aussieht, als würde das Menüelement die gesamte Breite der Seite erweitern.
Ich denke, du sprichst von der 100% / 80% Breitendifferenz ....
Dies sollte Ihnen den Einstieg erleichtern:
%Vor%Der Rand: auto auf den Inhalt macht den Block zentriert.
Liike Adam sagt, füge die Hintergrund-Wiederholung hinzu, um ihr das grafisch ansprechende Element zu geben.
Sehr einfach ohne einen ganzen Haufen Hoopla.
Fügen Sie diesen zwischen - body - und - div Container ein - Sie können auch alles andere haben, was Sie wollen, aber auf meiner Seite ist es so: (Ich habe versucht, es zu umbrechen, nicht gehen, nur kopieren und einfügen .)
%Vor%Dann ändern Sie die Informationen, die Sie für oben benötigen: px Höhe: _px img src="yourfile / yourimg.jpg und WICHTIG vergessen Sie nicht die nächste Höhe: _ _px
Es ist nirgendwo sonst etwas nötig. Versuch es.
Tags und Links css background-image