 CSS Webseitenvorlage C09 - 3 Seitenbereiche
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: Header - Menü - Inhalt (ohne Frames oder Tabellen)
Dieses CSS-Beispiel können sie als Auszug eines komplexeren Webseiten-Layouts sehen. Es kann aber auch mit lediglich 3 Seitenbereichen in dieser Form als Homepagevorlage eingesetzt werden. Dabei habe ich das Rad nicht neu erfunden. Im Web gibt es hunderte solcher Vorlagen.
Ein Titelbereich soll oberhalb von Menü und Inhalt angezeigt werden. 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 drei Abschnitte Kopf, Menü und Inhalt. Die <div>-Bereiche schließen die drei Teile der Webseite ein, die mit Hilfe von CSS formatiert werden. Hier gibt es also lediglich drei Hauptbereiche, einen für den Kopf (header) einen für die Navigation (menue) und einen zweiten für den Webseiteninhalt (content).
|
Seitenbereich mit CSS-Angaben um 180 Pixel nach rechts einrücken:
Das erreicht man, wenn für den DIV-Bereich #content der Wert für margin-left mit 180 Pixel notiert wird.
|
Ist die Gesamtbreite für den DIV-Bereich #menue mit 180 Pixel festgelegt, sollte grundsätzlich bereits alles funktionieren und es gibt keine Überschneidungen bei der Anzeige der Inhalte.
Die 3 Webseiten-Bereiche habe ich noch einmal innerhalb eines vierten, alles umfassenden <div>-Bereichs eingeschlossen. Diesen DIV-Bereich habe ich 'alles' genannt und könnte ihn später zum Beispiel zur Zentrierung aller Inhalte nutzen.
Dann gibt es nun also erst einmal 4 DIV-Bereiche: #alles, #titel, #menu, #content
1) #alles umschließt die drei anderen Bereiche
2) #header für den Kopfbereich (Text oder Grafik)
3) #menue für die Menüspalte nimmt das Menü und evtl. darunter zusätzlichen Text auf
4) #content Bereich für die Seiteninhalte
2 Code im Body und die CSS-Anweisungen
Im BODY-Bereich:
<div id="alles">
<div id="header">
*/ für den Kopfbereich /*
</div>
<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 */
}
#header {
clear: both;
margin: 0;
padding: 0;
height: 90px;
background-color:#AED000;
}
#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 Webseite zentrieren
CSS-Anweisung zur Zentrierung des gesamten Inhalts
Um die 900 Pixel breite Darstellung in der Mitte des Browserfensters anzuzeigen, wurde alles innerhalb eines weiteren DIV-Bereichs eingefasst. Diesen DIV-Bereich habe ich mit 'alles' benannt.
Für diesen DIV-Bereich habe ich ein wenig trickreiche CSS-Anweisungen eingetragen. :-)
#alles {
background-color: #FFFFFF;
position: absolute;
width: 900px;
margin-left:-450px;
left:50%;
}
Der Trick besteht darin den Abstand von links mit einer negativen Wert einzutragen, der genau der Hälfte (450) der Gesamtbreite (900) entspricht. Gleichzeitig wurde die Position für die linke Außenkante mit 50% der Fensterbreite festgelegt.
Die Webseite verschwindet also um 450 Pixel nach links aus dem Browserfenster, um dann wieder durch die Angabe 50% nach rechts zu rücken.
4 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 {
background-color: #FFFFFF;
position: absolute;
width: 900px;
margin-left:-450px;
left:50%;
}
#header {
clear: both;
margin: 0;
padding: 0;
height: 90px;
background-color:#AED000;
}
#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>
5 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-Datei des Demos und die zugehörige externe CSS-Datei 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.
Beispiel:
Wenn sie zur Titelgrafik zusätzlich noch eine passende Hintergrundgrafik einbinden, könnte ihre Seite so ähnlich aussehen:
Infos zur Einbindung von Hintergrundgrafiken mit CSS finden sie im Menü CSS.
|
HOME
DOWNLOAD 
Demo 01 
ZURÜCK