Header sind ein wichtiger Faktor im Webdesign, sie können ein Design entweder aufwerten oder zerstören. Seit Web 2.0 haben wir viele Designtrends gesehen, und einer der bahnbrechendsten ist der **große** Header. Allerdings sind Header bisher kastenartig geblieben.
Blueflavor, eine Website für Mobile Design, hat diesen Trend mit etwas gebrochen, das ich bisher noch nirgendwo anders gesehen habe und das keine großen CSS-Kenntnisse erfordert.
Wie Sie sehen können, haben sie das Menü und den Anfang des Inhalts in den Header geschoben. Wie machen sie das?
Sie können das Bild in einzelne Teile zerlegen und versuchen, es mit (schwebenden) Divs anzupassen. Dies führt jedoch zu möglichen Problemen mit Browserunterschieden bei IE 6, 7 und Firefox.
Der beste Weg ist, das Bild ganz zu lassen. Blue Flavor verwendet zwei Spalten, wobei die erste Spalte unter dem längeren Teil des Headers liegt. Das Inhalts-Div liegt unter dem kürzeren Teil des Headers. Normalerweise würde das Inhalts-Div auf der gleichen Ebene wie die erste Spalte liegen. Um es in die Lücke des Bildes zu verschieben, verwenden Sie einen negativen Rand, der es nach oben verschiebt. Blue Flavor verwendet margin-top: -20px.
Negative Ränder werden nicht üblicherweise verwendet, aber dies ist eine einfache Möglichkeit, das Aussehen und Gefühl eines Headers zu verändern.
Hallo Kumpel, danke für den Pusher :)
Sie möchten vielleicht den Titel ändern, da er favor statt flavor hat (das 'L' fehlt)
Es ist erstaunlich, was ein negativer Rand (oder Abstand) bewirken kann, und es verändert die normale Struktur zu etwas anderem und Aufregendem :)
Nochmals vielen Dank.
Klar doch.
Der Titel ist auch korrigiert. Doh. =)
Übrigens habe ich diese Technik auch auf einer neuen Website verwendet, die ich gerade erstelle: http://www.jubileeworldharvest.com.au