Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag06.08.2010 um 10:01 (UTC)    
Titel: Zweispaltiges Design mit horizontaler Navigation und Header

Zweispaltiges Design mit horizontaler Navigation und Header #2

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:

Code:
<div id="design1">


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. Als Erstes machen wir den echten Header unsichtbar und greifen dann auf eine andere Klasse über dem Content zu

Code:
/* Header */

#header_container {
display: none; /* entfernt den eigentlichen Header */
}

#pre_content { /* ID zwischen Content und Navigation, jetzt als Header genutzt */
height: 150px; /* Höhe des Headers */
background-color: #FFD194; /* Hintergrundfarbe des Headers */
border-bottom: 1px solid #B98D56; /* Rand am unteren Ende des Headers */
clear: both;
}


Schritt 4
Im vierten Schritt wird die horizontale Navigation eingestellt, 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) */
}

#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 */
float: left; /* Jedes Navigationselement hat einen linken Umfluss, dadurch wird eine horizontale Navigation erstellt */
}

#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: 900px; /* Definiert die Breite des gesamten Contentbereiches inklusive der Sidebar (daher normalerweise Breite des Containers) */
}

/* Content */

#content {
width: 669px; /* 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
* Es wird kein Titel mehr angezeigt. Es bestehen sehr viele Paralellen zur ersten Version dieses Designs

Verwandtes Tutorial:
http://www.homepage-baukasten.de/forum/viewtopic.php?t=116368

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:24, insgesamt einmal bearbeitet
Beitrag06.08.2010 um 10:21 (UTC)    
Titel:

Du könntest CSS-Lehrer werden! Wink

lg
Georg G.
______________
Dieser Account ist ein Forenaccount!
Beitrag07.08.2010 um 08:06 (UTC)    
Titel:

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:

Code:
<div id="design1">


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
Beitrag07.08.2010 um 08:14 (UTC)    
Titel:

Dreispaltiges Layout 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:

Code:
<div id="design1">


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, 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:27, insgesamt einmal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de