HTML-Code der Abschlussarbeit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Meine CSS-Abschlussarbeit</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="abschluss.css">

</head>
<body>
<div id="wrapper">

<div id="kopf">
<h1>Abschlussarbeit</h1>
</div> <!--Ende kopf-->

<div id="menue">

<ul>
<li><h4>Mein Menue</h4></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>

<div id="inhalt">
<h2>Herzlichen Glückwunsch!</h2>
<p>
Wenn eure Seite so aussieht wie diese, dann habt ihr alles richtig gemacht.
</p>
<p>
Ihr wisst jetzt, wie man mit CSS einfache Layouts gestaltet, Hintergrundfarben festlegt, Texte formatiert, Rahmen und Hintergrafiken einfügt.
</p>
<p>
Auch Bilder mit Bildunterschriften könnt ihr mit CSS-Styleangaben in eure Seiten einfügen.
</p>
<p>
Schöne Menues mit Hover-Effekt wisst ihr ebenso zu erstellen.
</p>
<p>
Ich hoffe, euch hat der Kurs etwas Spaß gemacht.
</p>
<p>
Weiterhin viel Erfolg mit CSS wünscht euch
</p>
<p>
sejuma
</p>
</div><!--Ende inhalt-->

<div id="fuss">© sejuma</div><!--Ende fuss-->

</div><!--Ende wrapper-->
</body>
</html>

CSS-Code der Abschlussarbeit

body
{
background-color: #F0F8FF;
font-family: Verdana;
font-size: 100.01%;
width: 100%;
height: 100%;
margin: 0;
padding:0;
}

#wrapper
{
width: 750px;
border: 1px solid #8A2BE2;
margin: 20px auto;
background-image: url(fauxcolumn.gif);
}

#kopf
{
background-color: #A1F2A1;
}

h1
{
text-align: center;
color: #FF80FF;
margin:0;
font-size: 2.1em;
}

h4
{
background-color:#FF80FF;
color: #fff;
margin:20px 0 0 0;
padding:5px;
}

#menue
{
width: 140px;
margin:0 0 0 10px;
float: left;
}

ul
{
list-style-type: none;
margin: 0;
padding: 0;
}

#menue a
{
text-decoration: none;
padding:5px;
font-size: 0.9em;
display: block;
width: 130px;
}


#menue a:link, a:visited
{
background-color: #CEBCE7;
color: #553186;
border-bottom: 1px solid #fff;
}

#menue a:hover
{
background-color: #553186;
color: #FFF;
font-weight: bold;
border-left: 10px solid #FF00FF;
border-bottom: 1px solid #FF00FF;
text-align: right;
width: 120px;
}

#inhalt
{
width: 550px;
padding: 10px;
float: right;
}


#fuss
{
text-align: right;
padding-right: 20px;
background-color: #FF00FF;
height:20px;
clear: both;
}


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: