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;
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…