Kurs:Die erste eigene Website/CSS/Layout "Gelbe Socke"
Ziel[Bearbeiten]
Am Ende dieses Kapitels sollst du so eine Seite erstellen können:
Die orangene Kopfzeile und die gelbe Fußzeile sollen fixiert sein. Der Rest ist scrollbar, sodass man den gesamten Inhalt sehen kann.
Voraussetzung[Bearbeiten]
Zunächst einmal benötigen wir die HTML-Datei, die den Inhalt der Seite enthält. Wie man diese erstellt, sollte schon im vorherigen Kapitel geklärt worden sein. Daher hier nur noch die fertige Datei.
<!DOCTYPE html>
<html>
<head>
<title>Beispiel</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Name der Seite</h1>
<h2>Überschrift des Kapitels</h2>
<h3>Überschrift des Unterkapitels</h3>
<p>Absatz des Unterkapitels, in dem sehr viel Text steht</p>
<p>und noch ein Absatz</p>
<h3>Noch ein Unterkapitel</h3>
<p>Und noch ein Absatz zu diesem Unterkapitel, das ebenfalls sehr viel Text enthält.</p>
<p>Hier kann natürlich ein beliebiger Text eingefügt werden.</p>
<p>Der Text ist beliebig veränder- und erweiterbar.</p>
<h3>Ein paar Überschriften sind auch immer nicht schlecht.</h3>
<p>Und zu einer Überschrift gehört natürlich auch immer ein Text.</p>
<ul id="menue">
<li><a href="http://de.wikipedia.org/">Menüpunkt</a></li>
<li><a href="http://de.wikipedia.org/">Menüpunkt</a></li>
<li><a href="http://de.wikipedia.org/">Menüpunkt</a></li>
<li><a href="http://de.wikipedia.org/">Menüpunkt</a></li>
<li><a href="http://de.wikipedia.org/">Menüpunkt</a></li>
</ul>
<ul id="rightbox">
<li><h2>Boxüberschrift</h2>Boxinhalt für die erste Box</li>
<li>Boxinhalt für die zweite Box</li>
<li>Boxinhalt für die dritte Box</li>
</ul>
<div id="fusszeile"><!-- Fusszeile --></div>
</body>
</html>
Einbindung[Bearbeiten]
Wir haben die Stylesheets über eine Externe Datei eingebunden:
<link rel="Stylesheet" type="text/css" media="all" href="style.css" />
Diese müssen wir nun mit Inhalt füllen.
Kopfzeile[Bearbeiten]
Zuerst bearbeiten wir die Angaben für die Kopfzeile. In diesem Fall verwenden wir einfach die erste Überschrift (h1) als Element, das wir zur Kopfzeile machen.
Die Kopfzeile soll fest am oberen Rand verankert werden. Dazu legen wir die Position fest. Wir benutzen zuerst die Eigenschaft position um anzugeben, das wir die Position nicht automatisch bestimmen lassen. Für diese Eigenschaft verwenden wir den Wert fixed, da dieser festlegt, dass das Element fest an die Position geheftet wird und nicht mitscrollt. Wir hätten auch absolute verwenden können. Dann würde die Leiste allerdings mitscrollen. Mit relative scrollt es auch mit und wird zusätzlich an der Position, an der es normalerweise ist ausgerichtet. Voreingestellt ist static, wo es an der normalen Position auftauchen würde.
Nun fehlen die Abstände von den Seiten. Diese können wir mit left, right, bottom und top festlegen, wobei die Entfernung von bottom, also dem unteren Rand, variabel ist und daher hier nicht festgelegt wird. Für die anderen drei Ränder legen wir eine Entfernung von 0 fest, was man in jeder Einheit angeben kann, da 0px, 0% oder 0em alles den gleichen Wert hat.
Zwischenstand:
h1 {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
}
Nun wollen wir der Leiste auch noch eine passende Hintergrundfarbe vermachen. Dazu verwenden wir background-color: #FF8000;. #FF8000 ergibt einen Orangeton.
Wer sich die Seite nun ansieht merkt, dass die Kopfzeile ein bisschen verschoben ist. Das liegt daran, dass bei Überschriften ein Abstand nach oben und unten vordefiniert ist. Den können wir durch margin:0px; entfernen. margin regelt den Abstand eines Elements zum nächsten Element.
Um festzulegen, dass die Kopfzeile auch auf der höchsten Ebene ist, geben wir für den z-index noch 4 an.
Um die Zeile ein bisschen höher zu machen geben wir hight: 3em; an. Dadurch ist die Leiste 3em hoch und ist somit 3 mal so groß, wie die Schrift selbst. Dadurch wird jedoch auch ein Teil des Inhalts verdeckt. Nun müssen wir den Inhalt unseres Dokuments nach unten verschieben. Um dazu einen festen Wer zu haben, verlassen wir uns nicht auf die Voreinstellung des Browsers, sondern legen die Schriftgröße auf das Doppelte der normalen Schriftgröße fest. Dazu verwenden wir font-size:2em;. Nun können wir für Body einen oberen Innenabstand festlegen. Dazu fügen wir in die Klammer für body die Eigenschaft padding-top: 6em; 6em, da die Leiste 3em hoch ist und 1em der Leiste entspricht der Schriftgröße, die wir auf 2em festgelegt haben. Somit entspricht die Höhe des Abstandes oben 2*3 em = 6em. Um zu verhindern, das der voreingestellte Außenabstand von Body die Maße verschiebt setzen wir diesen auf 0.
Nun sieht unsere Style-Sheetdatei schon so aus:
body {
margin-top: 0px;
padding-top: 6em;
}
h1 {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
height: 3em;
font-size:2em;
background-color: #FF8000;
z-index: 4;
margin:0px;
}
CSS-Erklärungen[Bearbeiten]
Hier fehlt 'ne ganze Menge
Ergebnis[Bearbeiten]
So sollte nun die CSS-Datei aussehen, die unter style.css im selben Ordner gespeichert wurde.
body {
margin-top: 0px;
padding-top: 6em;
padding-bottom: 2em;
padding-left: 20%;
padding-right: 20%;
}
h1 {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
height: 3em;
font-size:2em;
background-color: #FF8000;
z-index: 4;
margin:0px;
}
ul#menue {
position: absolute;
top: 6em;
left: 0em;
bottom: 2em;
width: 15%;
height: 100%;
padding: 0px;
padding-top: 1.5em;
margin: 0px;
background-color: #FFFFFF;
border-right-width: 1px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
border-style: solid;
border-color: black;
z-index: 2;
}
ul#menue li {
font-weight: bold;
list-style-type: none;
background-color: #004080;
border-right-width: 2px;
border-left-width: 2px;
border-top-width: 0px;
border-bottom-width: 0px;
border-style: solid;
border-color: #202060;
color: #FFFFFF;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
padding-left: 2px;
padding-right: 2px;
overflow: hidden;
}
ul#menue li a {
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}
ul#menue li:hover {
background-color: #8080FF;
color: #000000;
}
ul#menue li:hover a {
font-style: italic;
color: #000000;
}
ul#rightbox {
position: absolute;
top: 6em;
right: 0em;
bottom: 2em;
width: 20%;
height: 100%;
padding: 0px;
margin: 0px;
border-right-width: 0px;
border-left-width: 1px;
border-top-width: 0px;
border-bottom-width: 0px;
border-style: solid;
border-color: black;
z-index: 1;
}
ul#rightbox li {
background-color: #8080FF;
border-width: 1px;
border-style: solid;
border-color: black;
margin: 1em;
list-style-type: none;
min-height: 5em;
}
ul#rightbox h2 {
font-weight: bold;
font-size: 1em;
margin:0px;
}
#fusszeile {
background-color: #FFFF00;
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
height: 2em;
z-index: 3;
}