CSS Webseitenvorlage C14    fixed liquid fixed

Eine CSS-basierte Webseitenvorlage ohne Frames und Tabellen. Die einzelnen Sektionen Vorlage wurden durch CSS-Bereiche definiert. Für den Titelbereich können Sie eine Hintergrundgrafik bestimmen und 4 Text- / Grafikelemente positionieren.

Demo

Bsp-01

Bsp-02

Bsp-03

Bsp-04

Bsp-05

Bsp-06

Bsp-07

Demo mit fixem Layout

Aufbau des Seitenlayouts

Das Grundprinzip dieser Vorlage basiert auf CSS-Boxen für die einzelnen Abschnitte. Der Seitenbesucher sieht 5 Boxen für die Seiteninhalte: Titel Breadcrumbmenü Links (Menü) Mitte (Inhalt) Rechts (Infos)

Einiges bleibt dem Auge verborgen

Der eigentliche Aufbau ist allerdings etwas komplexer und beschränkt sich nicht nur auf die 5 CSS-Boxen. Der Grund dafür steckt in der Absicht den Bereich 'Mitte' in der Breite (optisch) flexibel zu gestalten (abhängig von der Bildschirmbreite). Dennoch wird die Breite für die mittlere Box fest bestimmt.

zunächst 3 vertikale Bereiche

Unterhalb der beiden horizontalen Bereiche für Titel und Breadcrumbmenü wurde ein dritter horizontaler Bereich für den eigentlichen Seiteninhalt definiert. kopf bread wrapmitte

Boxen für die Inhalte

Dieser Hauptbereich ist in 3 vertikale Abschnitte unterteilt links mitte rechts

variable Breite des mittleren Abschnitts: fixed - liquid - fixed

In der Struktur ein etwas komplexeres Design. Die 5 Hauptbereiche schließen weitere Elemete ein, deren Inhalte mit Hilfe von CSS formatiert werden. "Boxen stehen innerhalb von Boxen" Klicken Sie auf den Screenshot rechts, um die Struktur anzusehen.

Objekte im Titelbereich (<div> kopf)

Den Titelbereich können Sie (auch in der Höhe) frei gestalten. Ich habe bereits 4 Bereiche definiert, mit denen ein Logo oder Text positioniert werden können. Die 4 Objekte können vor einer Hintergrundfarbe aber auch vor einer Hintergrundgrafik angezeigt werden.

Seitenhintergrund

Struktur des Aufbaus

<div class="wrapper">
<div class="kopf">        </div>
<div class="bread">     </div>
<div class="wrapmitte">
    <div class="links">         </div>
    <div class="mitte">       </div>
    <div class="rechts">          </div>
</div>
</div>

.mitte{
margin-right: 230px;
margin-left: 240px;
background-color: #FFFFFF;
}

Beispiel CSS-Anweisungen innerhalb der Hauptbereiche

• .kopf (Kopf),
• .bread (Breadcrumb-Menü),
• .links (Menü),
• .mitte (Seiteninhalte),
• .rechts (Infospalte)

#content h1 {
font-family:Verdana,Tahoma,Arial,sans-serif;
font-size:18px;
padding:10px 0px 4px 0px;
color:#83AAC4;
}

#content h2 {
font-family:Verdana,Tahoma,Arial,sans-serif;
font-size:16px;
padding:10px 0px;
color:#83AAC4;
}

#content b{
font-family:Verdana,Tahoma,Arial,sans-serif;
font-size:12px;
color:#83AAC4;
}

#content a:link, #content a:visited{
        font-family:Verdana,Arial,sans-serif;
        font-size:11px;
        color:#0090E0;
        }

#content a:hover{
        font-family:Verdana,Arial,sans-serif;
        font-size:11px;
        color:#FF0000;
        }

#content .rand{
        border: 6px solid #4F4F4F;
        }

.rechts h2{
color:#83AAC4;
font-family:Verdana,Arial,sans-serif;
font-size:12px;
line-height:140%;
}

Wichtig ist dabei der Abstand nach oben, den ich durch Margin-Angaben festgelegt habe. Dabei habe ich die realen Höhen der beiden Bereiche für Titel und Breadcrumbzeile berücksichtigt.

/* margin oben abhängig von Höhe Kopf + Höhe Breadcrumb (incl. Padding) */
.wrapmitte{
margin:146px 0px 0px 0px;
float: left;
width: 99%;
}