Ein neues Layout mit mehreren div-Bereichen wird nun in einer ersten Version entwickelt…
Vorbereitungen:
Schritt 1 besteht darin eine einfache Textdatei zu erstellen und sie “index.html“ zu nennen. In einem zweiten Schritt erstellen wir den Ordner “01_CSS“ und darin erstellen wir die für dieses Projekt benötigten CSS Dateien. Die erste Datei nennen wir “01_zentrale.css“ und die restlichen Dateien nennen wir so wie in der zentralen CSS Datei und in diesem Artikel angegeben.
Der HTML Quelltext:
<!doctype html>
<html lang="de">
<head>
<title>Webdesign</title>
<link rel="stylesheet" href="01_CSS/01_zentrale.css" type="text/css" />
<meta charset="UTF-8"/>
</head>
<body>
<div id="wrapper"> <!-- wrapper-Bereich Anfang -->
<header>
</header>
<div id="topnavigation">
<ul>
<li><a href="index.html">Topnews 1</a></li>
<li><a href="index.html">Topnews 2</a></li>
</ul>
</div>
<div id="spalte1">
<article>
<a href="">Startseite</a>
<a href="">Webseite 2</a>
<a href="">Webseite 3</a>
</article>
<br />
<article>
<h1>Updates:</h1>
<p>
Datum einfügen...
</p>
</article>
<br />
<article>
<h1>Spalte 1</h1>
<p>
Dies ist Artikel 1 in Spalte 1 unter der Navigation.
</p>
</article>
<br />
</div> <!-- Ende von Spalte 1 -->
<main>
<article>
<h1>Multi-Div Version 1:</h1>
<img src="" width="115" height="115" title="Platzhalter für Bild" class="bildlinks" />
<p>
Dies ist das Layout "Multi-Div Version 1"...
</p>
</article>
<br />
<article>
<h1>Anpassungen im HTML Quelltext:</h1>
<img src="" width="115" height="115" title="Platzhalter für Bild" class="bildlinks" />
<p>
Hier den gewünschten Text einfügen...
</p>
</article>
<br />
</main>
<div id="spalte3">
<article>
<h1>Spalte 3</h1>
<p>
Dies ist der Artikel 1 in Spalte 3
</p>
</article>
<br />
<article>
<h1>Spalte 3</h1>
<p>
Dies ist der Artikel 2 in Spalte 3
</p>
</article>
<br />
<article>
<h1>Spalte 3</h1>
<p>
Dies ist der Artikel 3 in Spalte 3
</p>
</article>
<br />
</div> <!-- Ende von Spalte 3 -->
</div> <!-- wrapper-Bereich Ende -->
</body>
</html>
Der CSS Code für die Datei “01_zentrale.css“:
@import url(02_fundament.css);
@import url(03_body.css);
@import url(04_wrapper.css);
@import url(05_header.css);
@import url(06_navigation.css);
@import url(07_content.css);
@import url(08_artikel.css);
@import url(09_spalte3.css);
@import url(10_topnavigation.css);
@import url(11_naviblox.css);
@import url(12_spalte1.css);
Der CSS Code für die Datei “02_fundament.css“:
@media all {
* {
padding: 0;
margin: 0;
}
html {
height: 101%;
}
} /* Ende von @media nicht löschen*/
Der CSS Code für die Datei “03_body.css“:
@media all {
body {
color: black;
background-color: white;
}
} /* Ende von @media nicht löschen*/
Der CSS Code für die Datei “04_wrapper.css“:
#wrapper {
margin: 5px;
background-color: white;
}
Der CSS Code für die Datei “05_header.css“:
@media all {
header {
height: 80px;
background-image: url(../cpm-header01.gif);
background-repeat: no-repeat;
background-color: seagreen;
color: white;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
border-style: solid;
border-color: black;
border-width: 1px;
padding: 5px;
}
} /* Ende von @media nicht löschen*/
Der CSS Code für die Datei “06_navigation.css“:
@media all {
#navibereich {
position: absolute;
top: 97px;
left: 5px;
width: 210px;
background-color: seagreen;
color: white;
padding: 10px;
border-style: solid;
border-color: black;
border-width: 1px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
font-family: Arial;
font-size: smaller;
}
#navibereich li {
list-style-type: none;
}
#navibereich a:link {
color: white;
background-color: seagreen;
display: block;
text-decoration: none;
}
#navibereich a:visited {
color: white;
background-color: seagreen;
display: block;
text-decoration: none;
}
#navibereich a:hover {
background-color: white;
color: black;
display: block;
text-decoration: none;
}
#navibereich a:focus {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
#navibereich a:active {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
} /* Ende von @media nicht löschen*/
Der CSS Code für die Datei “07_content.css“:
@media all {
main {
color: white;
background-color: seagreen;
padding: 20px;
border-style: solid;
border-color: black;
border-width: 1px;
margin-top: 3px;
margin-right: 241px;
margin-bottom:5px;
margin-left: 241px;
font-family: Arial;
font-size: smaller;
}
#formular fieldset {
padding: 10px;
}
main a:link {
color: white;
background-color: steelblue;
text-decoration: underline;
}
main a:visited {
color: white;
background-color: steelblue;
text-decoration: underline;
}
main a:hover {
color: black;
background-color: white;
text-decoration: underline;
}
main a:focus {
color: white;
background-color: steelblue;
text-decoration: underline;
}
main a:active {
color: white;
background-color: steelblue;
text-decoration: underline;
}
} /* Ende von @media nicht löschen*/
Der CSS Code für die Datei “08_artikel.css“:
@media all {
article {
overflow: hidden;
color: black;
background-color: white;
padding: 5px;
border-style: solid;
border-color: black;
border-width: 1px;
}
.flowtext {
background-color: lightsteelblue;
}
.clearingtext {
clear: both;
background-color: lightsteelblue;
}
.artikelfloat {
float:left;
color: black;
background-color: lightsteelblue;
margin-left: 0px;
margin-right: 5px;
margin-bottom: 5px;
padding: 5px;
width: 450px;
height: 200px;
border-style: solid;
border-color: black;
border-width: 1px;
}
.clearingartikel {
clear: both;
overflow: hidden;
color: black;
background-color: lightsteelblue;
padding: 5px;
border-style: solid;
border-color: black;
border-width: 1px;
}
.bildlinks {
float: left;
margin-top: 5px;
margin-right: 15px;
margin-bottom: 5px;
border-style: solid;
border-width: 1px;
}
.bildrechts {
float: right;
margin-top: 5px;
margin-right: 15px;
margin-bottom: 5px;
border-style: solid;
border-width: 1px;
}
hr {
color: red;
}
span {
background-color: red;
}
} /* Ende von @media nicht löschen */
Der CSS Code für die Datei “09_spalte3.css“:
@media all {
#spalte3 {
position: absolute;
top: 97px;
right: 5px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
border-style: none;
border-color: black;
border-width: 1px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
width: 225px;
color: white;
background-color: white;
font-family: Arial;
font-size: smaller;
}
#spalte3 article {
overflow: hidden;
color: white;
background-color: seagreen;
margin: 0px;
padding: 5px;
border-style: solid;
border-color: black;
border-width: 1px;
}
#spalte3 a:link {
color: white;
background-color: steelblue;
display: block;
text-decoration: none;
}
#spalte3 a:visited {
color: white;
background-color: steelblue;
display: block;
text-decoration: none;
}
#spalte3 a:hover {
background-color: white;
color: black;
display: block;
text-decoration: none;
}
#spalte3 a:focus {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
#spalte3 a:active {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
} /* Ende von @media nicht löschen*/
Der CSS Code für die Datei “10_topnavigation.css“:
@media all {
#topnavigation li {
display: inline;
list-style-type: none;
}
#topnavigation {
position: absolute;
top: 55px;
left: 300px;
height: 20px;
/*background-image: url(../cpm-header01.gif);
background-repeat: no-repeat;*/
background-color: seagreen;
color: black;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
border-style: solid;
border-color: black;
border-width: 1px;
padding: 5px;
}
#topnavigation a:link {
color: white;
background-color: seagreen;
text-decoration: none;
}
#topnavigation a:visited {
color: white;
background-color: seagreen;
text-decoration: none;
}
#topnavigation a:hover {
background-color: white;
color: black;
text-decoration: none;
}
#topnavigation a:focus {
color: black;
background-color: white;
text-decoration: none;
}
#topnavigation a:active {
color: black;
background-color: white;
text-decoration: none;
}
} /* Ende von @media nicht löschen*/
Der CSS Code für die Datei “11_naviblox.css“:
@media all {
#naviblox01 {
position: absolute;
top: 175px;
left: 5px;
width: 210px;
background-color: seagreen;
color: white;
padding: 10px;
border-style: solid;
border-color: black;
border-width: 1px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
font-family: Arial;
font-size: smaller;
}
Der CSS Code für die Datei “12_spalte1.css“:
@media all {
#spalte1 {
position: absolute;
top: 97px;
left: 0px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0px;
border-style: none;
border-color: black;
border-width: 1px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
width: 225px;
color: white;
background-color: white;
font-family: Arial;
font-size: smaller;
}
#spalte1 article {
overflow: hidden;
color: white;
background-color: seagreen;
margin: 0px;
padding: 5px;
border-style: solid;
border-color: black;
border-width: 1px;
}
#spalte1 a:link {
color: white;
background-color: seagreen;
display: block;
text-decoration: none;
}
#spalte1 a:visited {
color: white;
background-color: seagreen;
display: block;
text-decoration: none;
}
#spalte1 a:hover {
background-color: white;
color: black;
display: block;
text-decoration: none;
}
#spalte1 a:focus {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
#spalte1 a:active {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
} /* Ende von @media nicht löschen*/