title image


Smiley Re: Div-Container zentrieren
zunächstmal solltest Du HTML-Seiten standard-konform erstellen.

Das heißt, dass in jeder Seite ein Dokumententyp (Doctype) eingebaut werden muss.



Grundgerüst

Doctype und -switch



Zusätzlich sollte die Seite (auch wenn diese sich noch im Stadium der Entwicklung

befindet) bereits mit einem title innerhalb des head versehen sein.



Somit hättest Du erstmal ein korrektes Grundgerüst und könntest bei Problemen

eventuell den HTML-Validator zuhilfe ziehen.



(W3C) (x)html-Validator (engl.)

(x)html-Validator (germ.)



Hinweis: relevant sind nur die Ergebnisse vom W3C-Validator.



Und mit diesem Link kannst Du Dein CSS validieren:

(W3C) CSS-Validator (germ.)



Damit wäre Dir dann auch aufgefallen, dass man "hight" mit "e" schreibt.



Jetzt zu Deinem Problem:

Bilder sind in statischen Größen erstellt. Warum werden die Container, in denen die

Bilder stehen, dann in einer dynamischen Größe (Beispiel: 15em) angegeben?

Ist also ganz logisch, dass das irgendwann (spätestens beim Skalieren der Schriftgröße)

nicht mehr passt.



Wer float sagt (bzw. schreibt), der sollte auch irgendwo einmal "clear" schreiben.

float nimmt Elemente aus dem Textfluss, sodass der übergeordnete Container diese

nicht als Inhalte registriert.



Wenn entsprechend in einer Zeile ein Bild links und ein Bild rechts gefloaten sind,

dann sollte der mittlere Container auch ein margin-left und margin-right in der

Breite dieser Bilder erhalten. Sonst wird dieser Container nämlich um die Bilder

drumrum dargestellt (geflaotet).



Die nachfolge Container-Zeile sollte entsprechend ein clear:both erhalten, damit ab

hier der normale (neue) Aufbau stattfinden kann.

clear stellt den Textfluss wieder her.



Float und Clear



Dein Konstrukt erinnert sehr stark an eine Div-Suppe.

Nur um Bilder darzustellen, müssen diese nicht zusätzlich in ein DIV eingeschlossen

werden. Auch Bilder können gefloatet und/oder formatiert und entsprechend mit einer

Klasse oder ID versehen werden.



Dein Menü sieht doch aus wie eine Liste. Warum nimmst du dann Absatz-Elemente?



#menu ul {

margin: 0;

padding: 0;

list-style-type: none;

}

#menu li {

margin: 0;

padding: 0;

}



Das alleinstehende p vor dem Container mit der id="picture" ist nicht abgeschlossen.

Alle nachfolgende Inhalte werden entsprechend als Inhalte dieses p dargestellt.



> id=background

id's bitte grundsätzlich in Anführungszeichen einschließen.



Und zum Schluss ist die Höhe in den Containern "background" und "frame" nicht

sinnvoll. Die Seite und entsprechend die Container sollten sich dem Inhalt anpassen.

Beim Skalieren der Schriftgröße verändert sich nämlich auch die Anzahl Wörter, die

in einer Zeile dargestellt werden können. Bei fix-dynamischen Breiten (Beispiel: 40%,

bezieht sich auf den übergeordneten Container) wächst der Container in der Höhe

schneller als in der Breite.



Bei richtigen Browsern (nicht IE) wird die Angabe einer fixen Höhe strict

eingehalten. Wird in einem Container etwas dargestellt was effektiv nicht mehr

hineinpasst, wird über den Rand weitergeschrieben. Der IE dehnt den Container,

sodass es wieder passt.



mfg Achim

geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: