find-templates

CSS Template 2

zurück zur Übersicht

Design-Beispiel 2

Für das Baukasten-Design "CSS" / Grundgerüst zum Anpassen:

- Headerfeld oben
- Navigation unter Header
- Footer unter dem Design
- Werbung + Design mittig zentriert
- ohne Copyright-Hinweis
- darf von / für Jedermann angepasst werden
- hier zur Live Demo (2)

- auf "Design einstellen"
- auf "Erweiterte Einstellungen"
- einfügen im Feld "css ohne style-tags"

/* Nullformatierung für alle Browser */
*{padding: 0px; margin: 0px; }

/* Werbung positioniert */
table[height="102"] { margin: auto; }

/* Hintergrund hinter Design */
body {
   background-color: #EEEEEE;
   background-image:  none;
   font-family: arial;
   font-size: 14px;
   color: #000000; }

/* Design-Container */
#container {
   width: 992px;
   margin: 10px auto;
   overflow: hidden;
   background-color: #XXXXXX;  }

/* Headerfeld */
#header_container { 
   width: 990px;
   height: 150px;
   background-image:  none;
   border: 1px solid #c9c9c9;
   border-radius: 12px 12px 0px 0px; }

/* Titel über Homepage */
h1#header { display: none; }

/* Feld der Navigation */
#nav_container {
   width: 990px;
   overflow: hidden;
   margin-bottom: 10px;
   background: url(https://img.webme.com/pic/g/grafik-werkstatt/bg2.png) repeat-x;
   border-right: 1px solid #c9c9c9;
   border-bottom: 1px solid #c9c9c9;
   border-left: 1px solid #c9c9c9; }

/* Titel über Navigation entfernt */
#nav_heading { display: none; }

/* Aufzählungspunkte in Navi entfernt */
ul#nav { list-style-type: none; }

/* Navi-Buttons */
li.nav_element {
   float: left; 
   border-right: 1px solid #c9c9c9;}

/* Linktexte in Navigation */
li.nav_element a {
   display: block;
   font-size: 15px;
   color: #000000;
   width: auto;
   height: 30px;
   line-height: 30px;
   background: url(https://img.webme.com/pic/g/grafik-werkstatt/bg2.png) repeat-x;
   padding: 5px 15px 5px 15px;
   text-decoration: none; }

/* Hover Navi-Button */
li.nav_element a:hover  {
   color: #FFFFFF; 
   background: url(https://img.webme.com/pic/g/grafik-werkstatt/bg11.png) repeat-x;}

/* aktuell besuchte Seite */
li.checked_menu a {
   color: #FFFFFF;
   background: url(https://img.webme.com/pic/g/grafik-werkstatt/bg9.png) repeat-x; }

/* 2. HeaderFeld entfernt mit */
#pre_content { display:none;  }

/* Seiteninhalt */
#content {
   float: left;
   width: 640px;
   min-height: 200px;
   padding: 20px;
   background-color: #FFFFFF;
   background-image:  none;
   border: 1px solid #c9c9c9;
   overflow: hidden; }

/* Titel Seiteninhalt + Titel über Box */
h2#title , #sidebar_heading {
   padding: 5px 0px 5px 20px;
   margin: -20px -20px 15px -20px;
   background-color: #d0d0d0;
   color: #454545;
   font-size: 14px;
   font-weight: normal; }

/* Links im Seiteninhalt */
#content a {color: #000080; }

/* Hover Link im Seiteninhalt */
#content a:hover {color: #008080; }

/* Rechte Box  */
#sidebar_container {
   float: right;
   width: 240px;
   padding: 20px;
   min-height: 200px;
   background-color: #FFFFFF;
   border: 1px solid #c9c9c9;
   overflow: hidden; }

/* Werbetext unter dem Design */
#webme_footer_textlink_dont_hide {
   display:block;
   width: 550px;
   margin: 30px auto;
   color: #454545!important;
   background: none!important; }

/* Feld unter dem Design */
#footer {
   width: 950px;
   padding: 20px;
   margin: auto;
   overflow: hidden;
   background-color: #FFFFFF;
   background-image:  none;
   border: 1px solid #c9c9c9; }

/* Linktexte im Footer */
#footer a {
   display:block;
   margin-left:20px;
   float: right;
   color: #000000;
   text-decoration: none;
   font-size: 14px; }

/* unnötige Felder im Design entfernt */
#pre_header {display:none;}
#post_content {display:none;}
#below_content{display:none;}
#counter{display:none;} 

Eigene Headergrafik einfügen:

- Grafik in Größe 990 x 150 Pixel erstellen
- Hochladen im Baukasten (bei "Bilder verwalten")
- dort beachten: Haken raus (!) im Feld "Bild verkleinern"
- nach Hochladen die Grafikadresse kopieren
- gehe nun zur Codezeile #header_container {
- siehe das background-image: none;
- Grafikadresse in die leere Klammer () einfügen

Im Feld "Text UNTER Design" füge ein:

<div id="footer">
<span style="font-size:12px;color:#454545;"> Heute <b> [sits]lt;/b> Besucher </span>

<a href="/Impressum.htm">Impressum</a>
<a href="/Kontakt.htm">Kontakt</a>

</div>	

Damit der Besucherzähler [sits]ngezeigt werden kann:

- auf "Einstellungen"
- Scrolle runter zu "Variablen verwenden"
- Haken ins Feld "Variable verwenden"
- Speichern