Zweispaltiges Design mit Header
Screenshot
Tutorial
Dieses Tutorial ist für das Profidesign CSS. Alle im Tutorial angezeigten Codes beziehen sich auf den Bereich CSS-Code ohne Styletags, sofern es nicht anders angegeben ist. Die Erklärungen lassen sich im CSS-Code in Form von Kommentaren erkennen.
Schritt 1
Als Erstes beginnen wir damit, den Grundstil der Website zu verändern:
Code:
/* Allgemein */
body {
background-image: url(); /* Wenn vorhanden, Klammer mit Bildadresse füllen */
background-color: #FFEFE0; /* Hintergrundfarbe mithilfe eines Hex-Codes*/
font-family: sans-serif; /* Schriftart */
font-size: 0.8em; /* Schriftgröße */
text-align: center; /* zentriert das Design im IE */
}
a {
color: #000; /* Farbe der Links */
}
Schritt 2
Nachdem dies erledigt ist, stellen wir den Container ein. Um das Design so zu gestalten wie wir es wollen, ist es aber nötig, einen eigenen Container zu erstellen.
Text über Design:
Text unter Design:
Code: <div id="unten"></div></div>
CSS-Code ohne Styletags:
Code: /* Container */
#design1 {
width: 900px; /* Breite des Designs */
margin: 0 auto; /* zentriert das Design */
text-align: left; /* positioniert den Text links */
background-color: #fff; /* Hintergrundfarbe des Containers */
border: 1px solid #B98D56; /* Rand um das Design */
}
#unten {
clear: both; /* sorgt dafür, das Hintergrundfarbe über gesamten Container läuft */
}
Schritt 3
Nun stellen wir den Header ein.
Code:
/* Header */
#header_container {
height: 150px; /* Höhe des Headers */
background-color: #FFD194; /* Hintergrundfarbe des Headers */
border-bottom: 1px solid #B98D56; /* Rand am unteren Ende des Headers */
}
#pre_header, #post_header {
display: none; /* entfernt nicht genutzte Klassen */
}
#header {
margin: 0px; /* entfernt den weißen Rand oben */
padding-left: 400px; /* Abstand vom linken Rand */
padding-top: 50px; /* Abstand vom oberen Rand */
color: #000; /* Schriftfarbe */
font-family: serif; /* Schriftart */
}
Schritt 4
Im vierten Schritt wird die Navigation eingestellt, dieser Schritt ist der Umfangreichste.
Code: /* Navigation */
#nav_container {
float: left; /* richtet die Navigation links aus */
width: 200px; /* Breite der Navigation */
}
#nav_heading {
display: none; /* nicht genutzte Klasse wird entfernt */
}
#nav {
padding: 0; /* keinen Innenabstand der Liste (links und rechts) */
margin: 0; /* keinen Außenabstand der Liste (oben und untent) */
}
#nav li {
list-style-type: none; /* löscht den Listenpunkt */
padding: 2px; /* Innenabstand eines einzelnen Punktes */
padding-left: 15px; /* Innenabstand eines einzelnen Punktes nach links */
font-size: 1.2em; /* Schriftgröße */
display: block; /* vergrößert die Navigation auf volle nav_container Breite */
border-bottom: 1px solid #FFD194; /* unterer Rand */
}
#nav li:hover {
border-bottom: 1px solid #BC8762; /* unterer Rand im Hovereffekt */
}
#nav li.subpage {
background-color: #F3F2F2; /* Hintergrundfarbe bei Unterseiten */
padding-left: 25px; /* Innenabstand nach links bei Unterseiten */
}
#nav a {
text-decoration: none; /* macht Verlinkungen in der Navigation ohne Unterstrich */
}
#nav a:hover {
color: #141414; /* ändert die Schriftfarbe beim Hovereffekt */
}
Schritt 5
Im fünften und letztem wirklichen Schritt wird der Content definiert.
Code:
/* Content */
#content_container {
float: left; /* positioniert den Content links neben die Navigation */
width: 699px; /* Briete des Contents */
border-left: 1px solid #B98D56; /* linker Rand */
}
#content {
padding: 15px; /* Innenabstand des Contents */
}
Schritt 6
Dieser letzte Schritt muss nicht gemacht werden, ist aber für den Fall des Falles besser genutzt als nicht genutzt.
Code:
/* Klassen entfernen */
#counter, #sidebar_container {
display: none; /* Sidebar und Counter werden unsichtbar gemacht */
}
Erläuterungen
* Alle Id's mit der Endung _container können theoretisch ein Hintergrundbild enthalten
* jedem Selektor können noch mehr CSS-Attribute hinzugefügt werden
* dies ist nur ein Lösungsvorschlag, es gibt noch weitere Möglichkeiten
Ich hoffe euch hat dieses Tutorial gefallen und ihr seid jetzt ein bisschen schlauer.
mfg
www.plekke.de______________ THE JOY OF NOT BEING SOLD ANYTHING
Zuletzt bearbeitet von ig444 am 28.03.2010, 08:44, insgesamt einmal bearbeitet
|
