Navigation links neben Header und Content (mit Sidebar)
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. Auch hier müssen wir anstatt des eigentlichen Headers wieder #pre_content nutzen, damit wir uns Codingarbeit ersparen.
Code: /* Header */
#pre_content {
height: 150px; /* Höhe des Headers */
background-color: #FFD194; /* Hintergrundfarbe des Headers */
border-bottom: 1px solid #B98D56; /* Rand am unteren Ende des Headers */
}
#header_container {
display: none; /* der eigentliche Header wird unsichtbar gemacht */
}
Schritt 4
Im vierten Schritt wird die Navigation eingestellt, die neben Header und Content verläuft. Dieser Schritt ist der Umfangreichste.
Code: /* 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) */
float: left; /* Richtet die Navigation links aus und sorgt dafür, dass der Content rechts daneben ist */
width: 150px; /* Definiert die Breite der Navigation */
}
#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 */
padding-right: 15px; /* Innenabstand eines einzelnen Punktes nach rechts */
font-size: 1.2em; /* Schriftgröße */
display: block; /* vergrößert die Navigation auf volle nav_container Breite */
border-bottom: 1px solid #BC8762; /* unterer Rand */
}
#nav li:hover {
background-color: #ffd194; /* Hintergrundfarbe beim Hovereffekt */
}
#nav li.subpage {
display: none /* Unterseiten werden unsichtbar. Bei horizontalen Navigationen immer praktisch */
}
#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 mit seiner Sidebar definiert.
Code:
/* Content Container */
#content_container {
width: 749px; /* Definiert die Breite des gesamten Contentbereiches inklusive der Sidebar (Breite des Containers - der Navigation - Rahmen des Contents) */
float: left; /* Sorgt dafür, dass der gesamte Content (inkl. Header) auch wirklich rechts steht */
border-left: 1px solid #BC8762; /* kleine Abtrennung zwischen Content und Navigation, Benutzung optional */
}
/* Content */
#content {
width: 518px; /* Breite des Inhaltbereichs */
padding: 15px; /* Innenabstände des Inhaltsbereiches */
float: left; /* wird für die Anordnung benötigt (Sidebar rechts neben dem Content */
border-right: 1px solid #BC8762; /* Kleine Trennung zwischen Sidebar und Content. Benutzung optional */
}
/* Sidebar */
#sidebar_container {
float: left; /* wird für die Anordnung benötigt (Sidebar rechts neben dem Content */
width: 170px; /* Breite der Sidebar */
padding: 15px; /* Innenabstand der Sidebar */
}
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 {
display: none; /* Sidebar und Counter werden unsichtbar gemacht */
}
Erläuterungen
* Alle Id's mit der Endung _container können theoretisch ein Hintergrundbild enthalten (alle anderen auch, aber bei Containern sieht es am besten aus)
* 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 07.08.2010, 09:28, insgesamt einmal bearbeitet
|
