 CSS Webseitenvorlage C08 - Seitenbereiche einrücken
Was früher mit Frames oder Tabellespalten erreicht wurde, wird heute über ein CSS-basiertes Layout ermöglicht. Für die einzelnen Anzeigebereiche / Sektionen werden <div>-Bereiche definiert. Die Einrückung des Inhaltsbereichs wird durch Marginangaben festgelegt.
|
|
CSS-Layout - Menü und Inhalt ohne Frames und Tabellen positionieren
Dieses CSS-Beispiel können Sie als Auszug eines komplexeren Webseiten-Layouts sehen. Es kann aber auch mit lediglich 2 DIVs in dieser Form als Seitenvorlage eingesetzt werden. Dabei habe ich das Rad nicht neu erfunden. Im Web gibt es hunderte solcher Vorlagen.
Menü und Inhalt sollen ohne Verwendung von Tabellen oder Frames nebeneinander angezeigt werden.
|
|
Dieses einfach strukturierte Beispiel eines CSS-Layouts ähnelt im Aufbau der CSS Webseitenvorlage C10, die aber etwas komplexer aufgebaut ist und insgesamt 6 <DIV> Bereiche / Seitenabschnitte hat.  CSS Webseitenvorlage C10 ansehen
1 Aufbau des Seitenlayouts
Das Grundprinzip dieser Vorlage basiert auf <div>-Bereiche für die beiden Abschnitte Menü und Inhalt. Die <div>-Bereiche schließen die beiden Teile der Webseite ein, die mit Hilfe von CSS formatiert werden. Hier gibt es also lediglich zwei Bereiche, einen für die Navigation (menue) und einen zweiten für den Webseiteninhalt (content).
|
Seitenbereich mit CSS-Angaben um 170 Pixel nach rechts einrücken:
Das erreicht man, wenn für den DIV-Bereich #content der Wert für margin-left mit 170 Pixel notiert wird.
|
Ist die Gesamtbreite für den DIV-Bereich #menue mit 170 Pixel festgelegt, sollte grundsätzlich bereits alles funktionieren und es gibt keine Überschneidungen bei der Anzeige der Inhalte.
Es ist aber empfehlenswert die beiden Webseiten-Bereiche noch einmal innerhalb eines dritten, alles umfassenden <div>-Bereichs einzuschließen. Auch wenn im Augenblick dazu nicht die Notwendigkeit besteht, bietet Ihnen das bei einer späteren Erweiterung zusätzliche Optionen.
Dann gibt es 3 DIV-Bereiche: #alles, #menu, #content
1) #alles umschließt die beiden anderen Bereiche
2) #menue für die Menüspalte nimmt das Menü und evtl. darunter zusätzlichen Text auf
3) #content Bereich für die Seiteninhalte
2 Code im Body und die CSS-Anweisungen
Im BODY-Bereich:
<div id="alles">
<div id="menue">
*/ hier steht das Menü /*
</div>
<div id="content">
*/ hier steht der Inhalt /*
</div>
</div>
Im Head-Bereich müssen (mindestens) diese CSS-Notierungen stehen:
<style type="text/css">
<!--
body {
font-family:Verdana,Tahoma,Arial,sans-serif;
margin: 0px;
padding: 0px;
}
#alles {
/* erstmal keine Eintragung */
}
#menu {
clear: left;
float: left;
width: 170px;
margin: 0px 0px 0px 0px;
padding: 0px;
background-color:#FAFAFA;
}
#content {
margin: 0px 0px 0px 170px;
padding: 0 10px 0 10px;
width: 700px;
}
-->
</style>
3 Erweiterung der CSS-Anweisungen
Nun kann man das alles erweitern und zusätzliche CSS-Anweisungen für die Elemente innerhalb der DIV-Bereiche notieren.
Als Beispiel werde ich nun für den Menübereich Anweisungen für Links (a) eintragen und für den Inhaltsbereich Anweisungen für Links (a), Überschriften der Kategorie 2 (h2) und Absätze (p) eintragen.
<style type="text/css">
<!--
body {
font-family:Verdana,Tahoma,Arial,sans-serif;
margin: 0px;
padding: 0px;
}
#alles {
/* erstmal keine Eintragung */
}
#menu {
clear: left;
float: left;
width: 170px;
margin: 0px 0px 0px 0px;
padding: 0px;
background-color:#FAFAFA;
}
#menu a {
font-size: 10px;
font-weight:bold;
line-height:130%;
text-decoration: none;
color:#7F7F7F;
}
#content {
margin: 0px 0px 0px 170px;
padding: 0 10px 0 10px;
width: 700px;
}
#content a {
font-size: 11px;
font-weight:normal;
line-height:130%;
text-decoration: none;
color:#0000FF;
}
#content h2 {
font-size: 14px;
font-weight:bold;
color:#0000FF;
}
#content p {
font-size: 11px;
line-height:130%;
color:#0000FF;
}
-->
</style>
4 CSS-Anweisungen als Untergruppe für DIV-Bereiche
Verweise (a) innerhalb des DIV-Bereichs 'menue' werden nun anders dargestellt als Links innerhalb des DIV-bereichs 'content'. Der Schüssel dazu ist die bei den Definitionen vorangestellte ID (#menue oder #content)
So gelten die Angaben für Verweise (<a>) mit dieser Notierung
#menue a
{
CSS-Anweisungen
}
nur für Verweise innerhalb des DIV-Bereichs mit der ID 'menue'.
5 Weitere Anpassungen
Bei diesen Notierungen werden Sie es nicht belassen wollen, aber das Beispiel zeigt wie man dabei vorgeht. Im fertigen Beispiel dieser Vorlage, das Sie als ZIP-Datei herunterladen können, sind natürlich weitere Formatierungsanweisungen eingetragen. Analysieren Sie den Quellcode und ändern oder ergänzen Sie die CSS-Anweisungen nach ihren Vorstellungen.
Die HTML-Dateien beider Demos und die zugehörigen externen CSS-Dateien können Sie als ZIP-Datei oben im Kopfbereich dieser Seite downloaden.
Da dieses Beispiel in der Struktur meiner Homepage-Vorlage C10 gleicht, können Sie Anregungen zur Modifizierung auch den Unterseiten von C10 HP-Vorlage entnehmen.
Links im Menü finden Sie also weitergehende Erklärungen zur Anpassung unter 'Menü','Farben' und 'Titelgrafik'. Falls Ihnen dieses Menü im Augenblick nicht angezeigt wird hier klicken.
|
Home • CSS • CSS HP-Vorlagen • Div
DOWNLOAD
Demo 01