externes Template
weiter Beispiel 2Ein externes Template einfügen
Links ein Template von http://www.free-css.com. Rechts der Nachbau im Baukasten.
Wir müssen keinen Quellcode kopieren! Wir benötigen nur 2 Grafiken.
Bild Rechts stehen die "Namen" der DIV-Felder, die das Design "CSS" bereits besitzt.
Mit CSS-Eigenschaften bekommen alle das gewünschtes Aussehen (Breite / Höhe / u.s.w.)
Und so könnten wir das Grundgerüst dann erstellen :
*{
padding: 0px;
margin: 0px; }
body {
background-color: #FFFFFF;
background-image: url(Grafik-URL);
background-repeat: repeat-x;
font-family: sans serif;
font-size: 14px; }
table[height="102"] {
margin: auto; }
#container {
width: 970px;
margin: 0px auto 20px auto;
overflow: hidden; }
#header_container {
width: 970px;
height: 125px;
background-color: #FFFFFF;
background-image: url(Grafik-URL); }
h1#header {
display: none; }
#nav_container {
width: 970px;
padding-top: 20px;
margin-bottom: 20px; }
#nav_heading {
display: none; }
#nav_container ul {
list-style-type: none; }
li.nav_element {
float: left;
width: auto;
margin-right: 30px; }
li.nav_element a{
color: #000000;
font-size: 12px;
text-decoration: none; }
li.nav_element a:hover{
color: #800000; }
#pre_content {
width: 970px;
height: 338px;
background-image: url(Grafik-URL); }
#content_container {
width: 970px;
overflow: hidden; }
#content {
width: 600px;
float: left;
padding: 20px 20px 20px 20px;
background-color: #FFFFFF;
border: 1px solid #c9c9c9;
overflow: hidden; }
h2#title {
display: none; }
#counter,
#post_content,
#below_content {
display: none; }
#sidebar_container {
witdh: 270px;
float: right;
padding: 20px 20px 20px 20px;
background-color: #FFFFFF;
border: 1px solid #c9c9c9;
overflow: hidden; }
#sidebar_heading {
display: none; }
#footer {
width: 970px;
margin: 0px auto 20px auto;
overflow: hidden; }
Nullformatierung
damit alle Browser die
Abstände identisch sehen
Der Hintergrund
body ist der Hintergrund.
Bekommt eine Hintergrundfarbe
und später die Grafikadresse dazu.
Schriftart: sans serif (überall),
Textgröße 14 Pixel (überall)
Werbung
Tabelle der Werbung mittig setzen
Design-Container
Hat alle Felder als Inhalt.
Wird mit margin mittig platziert.
Breite wie im Template 970 Pixel
Headerfeld oben
Das Headerfeld im Design "CSS"
ist #header_container und
wird ebenfalls 970 Pixel breit.
Hier Header-Grafik einfügen.
Titel im Header
mit "display:none;" nicht anzeigen
Feld der Navigation
Mit Innenabstand von oben, um die
Links tiefer zu setzen, evt. ändern.
Außenabstand nach unten zum Inhalt.
Titelfeld über Naviagtion
nicht anzeigen mit "display:none;"
Listen-Element
Die Punkte vor Navi-Links entfernen
Feld der Navi-Links
Bekommen "float:left;", damit sie
nebeneinander sitzen, sowie einen
Außen-Abstand nach Rechts
Linktexte in Navi
Die Navi-Links bekommen Textfarbe
und Textgröße und sollen nicht
unterstrichen sein
Linktext-Hover in Navi
Bei Mauskontakt andere Farbe
Feld unter Navigation
kann als zweites Headerfeld genutzt
werden. Bekommt Breite 970 Pixel
und Höhe wie Grafik im Template
Feld um Inhalt und Box
gleiche Breite wie das Design.
overflow:hidden; = mit Inhalt wachsen
Seiteninhalt
Innenabstand (padding) 20 Pixel
zu allen 4 Seiten. Damit Inhalt
nicht am Rahmen klebt. Tatsächliche
Breite daher 640 Pixel !
float:left; damit Seiteninhalt
sich linke Hälfte platziert.
Seitentitel im Seiteninhalt
nicht anzeigen mit "display:none;"
3 Felder entfernen
sitzen im Quellcode zwischen
Seiteninhalt und rechter Box.
Nicht anzeigen mit "display:none;"
die rechte Box
Innenabstand (padding) 20 Pixel
zu allen 4 Seiten. Damit Inhalt
nicht am Rahmen klebt. Tatsächliche
Breite daher 310 Pixel !
float:right; = die Box auf
rechte Hälfte platzieren.
Titelfeld über Box
nicht anzeigen mit "display: none;"
Einfügen "Text Unter Design":
<div id="footer"> </div>
Hier dann 3 weitere DIV einfügen
für den Inhalt unten.
Nun könnte man noch die CSS-Eigenschaften für die Überschriften h2 und h3 einfügen, sowie die Eigenschaften für Textlinks im Seiteninhalt.
Unten im Template sehen wir, das der Inhalt in 3 Blöcke geteilt ist. Das erreichen wir, in dem wir im Feld "Text unter Design" einfügen:
<div id="footer">
<div class="box_1"> Hier Inhalt Block 1 </div>
<div class="box_2"> Hier Inhalt Block 1 </div>
<div class="box_3"> Hier Inhalt Block 1 </div>
</div>
Die 3 zusätzlichen DIV's haben Klassen bekommen.
Mit CSS bekommen .box_1 , .box_2 und .box_3 gewünschtes Aussehen.
Zum Beispiel Außenabstände (mit margin) und Breite (mit width),
sowie ein float: left; - damit sie nebeneinander bleiben.
weiter Beispiel 2
