In diesem Teil des Webdesign-Workshops geht es an die Gestaltung des Wrappers und des Kopfbereiches…
Der wrapper-Bereich:
Mit dem wrapper wird nur der „Schutzumschlag“ der Webseite gestaltet.
@media all {
#wrapper {
margin: 5px;
background-color: white;
color: black;
}
} /* Ende von @media nicht löschen*/
Check im Browser: Die Position der Elmente hat sich wieder etwas verbessert. Die Elemente kleben nicht mehr am Bildschirmrand…
Der Kopfbereich:
@media all {
/*
Kommentar: Die CSS für den Kopfbereich
*/
header {
height: 80px;
background-image: url(../headergrafik.jpg);
background-repeat: no-repeat;
background-color: steelblue;
color: white;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: black;
border-right-color: black;
border-bottom-color: black;
border-left-color: black;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
} /* Ende von @media nicht löschen*/
Check im Browser: Es ist jetzt ein Kopfbereich entstanden. Aktuell fungiert der Kopfbereich nur als Platzhalter. Später könnten dort Inhalte wie etwa ein Logo eingefügt werden…