Hallo,
da hilft zunächst sicherlich ein Blick in den Quellcode des Design "CSS".
Diese DIV Felder hat das Design "CSS" in folgender Reihenfolge (nicht kopieren ^^):
Zitat:
<div id="container">
<div id="header_container"> Headerfeld </div>
<div id="nav_container"> Feld der Navigation </div>
<div id="content_container">
<div id="pre_content"> Feld über Content + Box </div>
<div id="content"> Seiteninhalt </div>
<div id="counter"> Besucherzähler </div>
<div id="post_content">lässt sich nicht füllen</div>
<div id="below_content">Feld Copyright-Hinweis</div>
<div id="sidebar_container">
<div id="sidebar_heading"> Titel der Box </div>
<div id="sidebar_content"> Inhalt der Box </div>
</div>
</div>
</div>
Schritt 1
Wir fangen mit dem "Design-Container" #container an.
Der hat alle anderen Felder als Inhalt. Hält also alles zusammen .
Das <div id="container"></div> steht bereits im Quellcode.
Mit CSS bekommt es nur noch gewünschte Eigenschaften.
Dein Design soll 900 Pixel breit sein + mittig platziert ?
Zitat:
#container {
width: 900px;
margin: 0px auto;
overflow: hidden; }
Schritt 2: Der Header
Das Headerfeld folgt im Quellcode gleich als nächstes.
Darum platziert es sich auch automatisch oben.
Mit CSS müssen wir dem nur eine Breite, Höhe und Hintergrundbild geben,
sowie einen Abstand nach unten. Damit der Header nicht am Seiteninhalt klebt:
Zitat:
#header_container {
width: 900px;
height: 150px;
margin-bottom: 20px;
background-image: url(http://img.webme.com/pic/m/mario-klassen/header.png); }
Schritt 3: Die Navigation
Im Quellcode des Designs folgt nun das Feld mit der Navigation.
Du möchtest die Baukasten-Navigation nicht verwenden.
Du lässt das Feld nicht anzeigen, mit "display: none;"
Zitat:
#nav_container {display: none;}
Schritt 4 :
Der "Content-Container" hat #content (Seiteninhalt) und Box (#sidebar_container) als Inhalt.
Es bekommt den weißen Hintergrund mit blauen Rahmen, gerundete Ecken.
Rahmenstärke (4 Links + 4 Rechts) ziehen wir von der Breite ab :
Zitat:
#content_container
width: 894px;
background-color: #FFFFFF;
border: 4px solid #168BAA;
border-radius: 10px;
overflow: hidden; }
Schritt 5: Seiteninhalt
Wenn der Seiteninhalt links neben der Box sitzen soll, geben wir #content ein float: left;
Zitat:
#content {
width: 630px;
float: left;
margin: 20px 0px 20px 20px;
overflow: hidden; }
Schritt 6: Die rechte Box
Wie breit die rechte Box werden kann, hängt von 3 Dingen ab:
Design-Breite - Seiteninhalt - Außenabstand = Breite für die Box.
900 - 630 - 20 - 20 = 230 Pixel für die Box.
Die Box bekommt auch noch einen Abstand nach Rechts. Damit der Inhalt nicht am blauen Rahmen endet.
230 - 20 = 210 Pixel Breite für die Box. Damit die sich rechts platziert, auch ein float: right;
Zitat:
#sidebar_container {
width: 210px;
float: right;
overflow: hidden; }
Schritt 7: Der Counter + Copyright-Feld
Im Quellcode sehen wir, das zwischen Seiteninhalt und rechter Box
der Counter und das Copyright-Feld platziert wurde. Wenn Seiteninhalt und Box nebeneinander stehen sollen, dürfen beide nicht angezeigt werden :
Zitat:
#counter, #below_content {display: none;}
Und zur Frage mit dem "Footer" unter dem Design:
Da nutzen wir das Feld "Text UNTER Design".
Füge dort ein :
Zitat:
<div id="footer"> Hier dein Inhalt </div>
Und mit CSS bekommt das Feld gewünschte Eigenschaften.
Breite , Innenabstand, Zentrierung (mittig) und Hintergrundfarbe.
Den Innenabstand müssen wir von der Breite wieder abziehen.
900 - 20 Pixel Abstand nach Links - 20 Pixel Abstand nach Rechts = 860 Pixel.
Zitat:
#footer {
width: 860px;
padding: 20px 20px 20px 20px;
margin: 20px auto;
overflow: hidden;
background-color: #202020;
color: #FFFFFF; }
Die Werte in den CSS-Eigenschaften können natürlich alle von dir angepasst werden.
Mir ging es nur darum dir die Vorgehensweise zu beschreiben 
Ich hoffe die Beschreibung konnte dir weiter helfen.
Gruß Wolle
Zuletzt bearbeitet von find-templates am 25.11.2011, 07:15, insgesamt 6-mal bearbeitet
|
Das hilft mir.