Das CSS Grundgerüst 2

Donnerstag 23. Januar 2020 von Torsten

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…

Dieser Beitrag wurde erstellt am Donnerstag 23. Januar 2020 um 08:00 und abgelegt unter Allgemein. Kommentare zu diesen Eintrag im RSS 2.0 Feed. Sie können zum Ende springen und ein Kommentar hinterlassen. Pings sind im Augenblick nicht erlaubt.

Kommentar schreiben