Beispielseite für MMEEFZ

EFZ

 

Hier startet meine erste Seite

Sie besteht aus den folgenden divs und der entsprechenden id.
Elemente, die nur einmal vorkommen, werden mit einer id versehen, also head, navi...
#navi {...} im <style> - wäre somit die id für die navi.

#navi {
 float: left;
 width: 150px;
 background-color: #AAC7CE;
 }
Formatierungen, die öfters gebraucht werden werden mit class ausgezeichnet. Ein schönes Beispiel wäre der "Textmarker", welcher einen gelben Schrift-Hintergrund erzeugt:
im Beispiel wird diese Stelle im Text mit einer Art Textmarker hervorgehoben.
(Danke: http://www.html-seminar.de/class_und_id.htm)
im Beispiel wird diese  <strong class="textmarkergelb">Stelle im Text</strong>
mit einer Art <strong class="textmarkerrot">Textmarker</strong>  hervorgehoben.

Dazu habe ich im head unter style die folgende class eingefügt:

.textmarkergelb {    background-color:yellow;  }


<div id="head">, dem Kopfteil

<div id="navi">, der Navigation ist 150px breit

<div id="inhalt">, dem Inhalt

<div id="titel">, dem Titel, als Teil des Inhalts

<div id="fuss">, der Fusszeile

<div id="blatt">, umfasst die ganzen Seite

Jetzt folgt ein Bild vom Dach der TBZ -

Speziell:

blatt ist 980 breit und hat oben, unten und links Randabstand 0px; enthält ein navi_hg.jpg Hintergrundbild, welches den Navigationsbereich hinterfüllt, es sieht dann so aus als ginge der Navibereich über die ganze site. Hier ist auch die Systemschrift definiert.

#blatt { font-family:Verdana, Geneva, sans-serif;
margin-top: -10px;
margin-right: auto;
margin-bottom: 0px;
margin-left: -10px;

width: 980px;
background-repeat: repeat-y;
background-image:url(navi_hg.jpg)

}

 

head ist 120 hoch und 980 breit; wie das Bild

#head {
color: #0FF;
background-color: #0E2D63;
height: 120px;
width: 980px;
}

navi ist links bündig: #navi { float: left;... UND die einzelnen paragraphs p sind "ausgelagert" nach navi.php

jede Seite greift auf dieses navi.php zu mit: <?php include ('navi.php') ?>

inhalt hat einen Randabstand von 175: #inhalt { margin-left: 175px. Damit bleibt zur Navi noch ein bisschen Platz

#inhalt {
margin-left: 175px;
}

titel ist im inhalt enthalten

#titel {
margin-left: 20px;

}

fuss div ist abgetrennt vom inhalt mit <br class="clearfloat" />. Dadurch kommt dieser div unter alle anderen zu liegen auch wenn die Navi weiter runter geht.

#fuss {
color: #F0f;
background-color: #ccc;
}

.clearfloat {
clear: both;
font-size: 1px;
line-height: 0px;
margin: 0px;
height: 0px;
}

 

refresh in der Kopfzeile. Die hochgeladene site wird alle 10s neu aufgebaut (spart die F5-Taste) --

<meta http-equiv="refresh" content="10; URL=index.php" />

Das folgende Bild zeigt einen Garagenplatz, einigermassen aktuell.

 


RDSeitenaufbau mit Paragraphs p und divs