Das CSS Grundgerüst 5

Sonntag 26. Januar 2020 von Torsten

In diesem Teil des Webdesign-Workshops geht es an die Gestaltung des Artikels…

Gestaltung des Artikels:

 @media all { 
 article { 
 overflow: hidden; 
 color: black; 
 background-color: lightsteelblue; 
 padding: 5px; 
 border-style: solid; 
 border-color: black; 
 border-width: 1px; 
 } 
 .clearingtext { 
 clear: both; 
 background-color: lightsteelblue; 
 } 
 .bildlinks { 
 float: left; 
 margin-top: 5px; 
 margin-right: 15px; 
 margin-bottom: 5px; 
 margin-left: 0px; 
 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; /* dashed = gestrichelte Rahmenlinie*/ 
 border-left-style: solid; 
 border-top-color: black; 
 border-right-color: black; 
 border-bottom-color: black; 
 border-left-color: black; 
 } 
 .bildrechts { 
 float: right; 
 margin-top: 5px; 
 margin-left: 15px; 
 margin-bottom: 5px; 
 border-style: solid; 
 border-width: 1px; 
 } 
 } /* Ende von @media nicht löschen*/ 

Die Verbindung aus HTML und CSS ergibt nun ein sehr einfaches Layout. Die Webseite hat einen Kopfbereich, eine Navigation in einer linken Spalte und die Artikel in einer zweiten Spalte. Dazu ist das Layout auch flexibel und passt sich der Fenstergröße des Browsers an. Entsprechend aufbereitet zum Beispiel mit etwas Grafik durchaus eine Webseite wie man sie so ins Internet stellen könnte…

Dieser Beitrag wurde erstellt am Sonntag 26. 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