find-templates

externes Template

weiter Beispiel 2

Ein externes Template einfügen




Links ein Template von http://www.free-css.com.       Rechts der Nachbau im Baukasten.

Template Template erstellen

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





Heute: 2 Besucher