Hallöchen Lantastic & Prefix,
als erstes möchte ich mal das präsentieren was ich gebasltelt habe:
Mein Entwurf
hier der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Cascading Style Sheets</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css" media="all">
<!--
@import url("style/mulfing.css");
-->
</style>
</head>
<body>
<div id="Header"><img src="grafik/objekte/mulfinger.jpg" width="800" height="120">
<div id="Content">
<h1 class="content">Überschrift</h1>
<p class="content">Grundlagen<br>
In einem Satz erklärt: Cascading Style Sheets erlauben es dem Author (und
auch dem Leser) HTML-Dokumente mit Formatierungen (zum Beispiel Schriftart, Farbe
und Rahmen) zu versehen. Das setzt natürlich voraus, dass Sie sich mit HTML
auskennen. Ist das nicht der Fall sollten Sie sich eine der vielen Dokumentationen
zu HTML ansehen. SelfHTML ist wohl die Beste.</p>
<p class="content">Um zu sehen wie CSS in HTML eingreift sehen Sie hier den Quelltext
einer einfachen HTML-Seite:</p>
<p class="content"><!-- Dateiname: beispiel.html --></p>
<p class="content"><html></p>
<p class="content"><head><br>
</head></p>
<p class="content"><body></p>
<p class="content"><h1>&Uuml;berschrift</h1></p>
<p class="content"><p>Fließtext bzw. Absatz</p></p>
<p class="content"></body><br>
</html></p>
<p class="content">Die Kommentare sind nur informativ. Sie fungieren entweder
als zusätzlicher Hinweis im Quelltext oder, wie in Zeile eins um die Datei
zu benennen (wichtig bei Verknüpfung von Dateien). Kommentare beginnen in
HTML mit <!-- dann folgt der Kommentar und enden mit -->. In CSS sind Sie
in Form von /* Kommentar */ augebaut.</p>
<p class="content">In diesem Quellcode haben Sie jetzt vier HTML-Elemente, die
Sie formatieren können: <html>, <body>, <h1> und <p>.
</p>
<p class="content">Erklärung einer CSS-Regel<br>
Um dem Browser mitzuteilen welches dieser HTML-Element angesprochen wird bedient
man sich dem Selector, der in der Regel (außer bei Klassen oder ids) genau
so heißt wie das Element, das man formatieren möchte. Um zu bestimmen,
was mit dem Element passiert gibt man die Eigenschaft an und versieht diese dann
noch mit einem Wert. Im folgenden Beispiel sehen Sie wie sich alles zusammensetzt.</p>
<p></p>
<div id="Footer" class="footer"> All Rights Reserved</div>
</div>
</div>
</body>
</html>
und die CSS:
body {
background-color: White;
color: Black;
font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
margin: 10 0 0 20;
}
H1 {
font: 20px/130%;
color: #4e4e4e;
background-color: transparent;
}
H2 {
font: 16px/130%;
color: #4e4e4e;
font-weight: bold;
background-color: transparent;
margin: 50px 0 0 0;
}
H3 { font: 14px/130% Verdana, Arial, sans-serif; color: #4e4e4e; background-color: transparent; margin: 50px 0 0 -1%; font-weight: bold; }
#Header {
position: relative;
width: 800px;
height: 100px;
margin-top: 0px;
margin-bottom: 0px;
z-index: 1;
background-color: #ffffff;
}
#Content {
position: relative;
width: 800px;
margin-top: 15px;
margin-bottom: 0px;
z-index: 2;
font-size: 90%;
background-color: #ffffff;
}
#Footer {
position: absolute;
width: 800px;
height: 40px;
margin-top: 10px;
margin-bottom: 30px;
z-index: 3;
background-color: #ffffff;
font-size: 90%;
background-image: url(../grafik/objekte/footer.jpg);
background-repeat: repeat-x;
}
.content {
padding-left: 3px;
}
.footer {
padding-top: 8px;
padding-left: 5px;
font-weight: bold;
color: Silver;
}
Was meint Ihr dazu?
Ich möchte das ganze noch zentrieren, weiß aber nicht wie
Und die Breite soll eben Fest sein, wegen der Headgrafik...
