title image


Smiley Re: SeitenMitte schiebt sich unter den Header
Hallo Heidekraut,



> Soweit ich das nun versteh ist "body" ein Container, innerhalb dieses Container

> gibt es dann ID "menu"



Alle HTML-Elemente und Tags inkl. html und body sind Container.

Der oberste Container ist html, in ihm befindet sich body.

In body befinden sich irgendwelche Container,

in diesen Container befinden sich wiederum andere Container, usw.



Also eine Verschachtelung diverser Container.



Ohne persönlich werden zu wollen, scheinst Du aber noch nicht die meiste Ahnung zu

haben (nicht böse gemeint)



Manchmal ist es zweckmäßig auch nicht alle Formatierungen auf einmal zu setzen. Dann

kannst Du leichter nachvollziehen, wo die ersten Probleme auftauchen.



Persönlich würde ich Dir daher raten, Dein Konstrukt erstmal ohne irgendwelche

Inhalte aufzubauen.



Im Klartext:

Schritt 1: ein html-Gerüst inkl. Doctype erstellen.



<vollständiger Doctype inkl. URL>

<html>

<head>

<title> ... </title>

<metatag charset>

</head>

<body>

</body>

</html>



Nachdem dieses Gerüst erstellt wurde, gehen wir zu Schritt 2 über.



Schritt 2:

Erstellung diverser Bereiche.



Normalerweise ist das die falsche Herangehensweise, weil erst nur die eigentlichen

Inhalte mit zweckmäßigen Containern aufgebaut wird, diese dann zu Bereichen

zusammengefasst werden und und erst danach die Gestaltung (das Aussehen) formatiert

wird.



Zum Lernen kann aber auch mal von diesem Verfahren abgegangen werden und die

Konstruktion gleich mit Formatierungen versehen werden.



Also nochmal:

Schaffung diverser Bereiche inkl. zweckmäßier Bezeichnungen.



Beispiele:

<div id="header"> Hier kommen später die Inhalte für die Kopfzeile rein </div>

<div id="menue"> Hier kommen später die Inhalte für das Menü rein </div>

<div id="content"> Hier kommen später die Inhalte für den eigentlichen Inhalt dieser Seite rein </div>



Sobald diese Bereiche im HTML-Quelltext eingebracht wurden, kannst Du die Formatierungen

für das CSS schreiben.



Formatiere möglichst für jeden Bereich eine andere Hintergrundfarbe, sodass Du

sofort sehen kannst, welche Ausmaße diese Bereiche haben



Und jetzt schaust Du dir die Konstruktion mit diversen Browsern an.



Wenn bis hierhin alles in Ordnung ist, kannst Du jeden einzelnen Bereich mit

Inhalten versehen und diese formatieren. Auch hier schrittweise vorgehen und erstmal

nur einen Bereich füllen.



Viele HTML-Elemente kannst Du direkt auf den übergeordneten Bereich formatieren, das

spart unnötige IDs und Klassen.



#menue ul {

/* Formatierungen für alle ul, welche sich in dem Bereich #menue befinden */

}

#menue p {

/* Formatierungen für alle Absatzelemente, welche sich in dem Bereich #menue befinden */

}

#menue h1 {

/* Formatierung der h1-Überschrift, welcher sich in dem Bereich #menue befindet */

}

usw.



Das Gleiche Verfahren wendest Du später auch für anderen Bereich an.

#content p {

/* Formatierungen für alle Absatzelemente, welche sich in dem Bereich #content befinden */

}



Der Witz an der Sache ist, dass durch die Verschachtelung diverser Container die

Elemente spezifisch werden.



#menue p

ist etwas anderes als

#content p,

deshalb können die p-Elemente in den Bereichen unterschiedlich formatiert werden,

ohne dass es Auswirkungen auf andere Bereiche hat.



Nur Elemente, die gleiche Formatierungen in allen Bereichen haben sollen

(zum Beispiel: Schriftart)

formatierst Du ohne Bezug zum übergeordneten Container.



p {

/* Diese Formatierungen gelten für alle Absatzelemente in allen Bereichen */

}

#menue p {

diese Formatierungen gelten nur für die Absatzelemente in diesem Bereich */

}

#menue #leftcontent p {

/* Diese Formatierungen gelten nur für alle Absatzelemente, welche sich in einem

Container mit der ID #leftcontent befinden, der wiederum selbst in einem Bereich mit

der ID #menue befinden muss */

}

usw.



Das nennt sich Vererbung.

Selbstverständlich können sich die formatierten Eigenschaften überschreiben.

Wenn p mit einer Schriftfarbe formatiert wurde, kann #Bereich p anders formatiert

werden, sodass die neuen Formatierungen, die zuvor in p formatierten Eigenschaften, überschreiben.



Anschließend mit diversen Browsern anschauen. Erst wenn

dieser Bereich ok ist, den nächsten füllen. Die Feinabstimmung kannst Du ganz zum

Schluss vornehmen.



Wenn das Projekt fertig ist, den HTML-Quelltext und die CSS-Datei von Prüfprogrammen

(Validatoren) durchchecken lassen.

Grundvoraussetzung ist, dass der HTML-Quelltext und auch die CSS-Datei zu 100% valide

sind.



Hierdurch kannst Du sicherstelllen, dass eine möglicherweise falsche Darstellung auf

eine Fehlinterpretation des Codes beim Browser liegt.



Alle Validatoren erlauben auch den Upload direkt vom PC, die Dateien müssen nicht

unbedingt online stehen:



HTML-/XHTML-Validator

CSS-Validator



mfg Achim

geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: