So ich hab mal verscuht jemanden zu erklären wie man am einfachsten aus einem tabellen layout ein korrektes HTML und CSS erzeugt.
Nun will ich von euch die Fehler die ich bei der Beschreibung des Float bzw Inline oder Block Element gemacht habe verbessert haben .
Ich habs halt so geschrieben wie es mir vorkommt , das kann aber durch aus abweichen von der realität.
Jemand lust das mal zu korrigieren bzw erweitern oder auch reduzieren.
HTML bereinigen
Als erstes entfernt man alles, was nicht semantisch Sinn macht. Also alle tags die irgendwie nur Füllung sind und damit keine Bedeutung haben.
Harcodierte Elemente wie
werden in
Text
umgewandelt. Entsprechen dann immer in der CSS gleich eine class anlegen .
Objekt ID zuweisen (hier beziehe ich mich auf den xml standard)
Prüfen, dass jede ID nur einmal vorkommt, sollte das nicht der Fall sein, muss man eine neue einzigartige ID vergeben und die mehrfach ID überall in eine classe umwandeln. IDs müssen eindeutig sein, alles andere ist illegal.
Entsprechen dann immer in der CSS gleich eine ID anlegen.
Objekte eine Breite zuweisen
So ganz dynamsich arbeiten hat auch viele Nachteile. Am einfachsten ist es, wenn man erst einmal mit festen Werten arbeitet. Denn ein
width="100%"
ist oft die ganze breite, somit will das element in die neue Zeile.
Objektfluss (kann mir einer erklären woher dieses u kommt, und warum es fett ist , obwohl ich oben das u in PREHTML habe ?)
.
.
.
.
element in die neue Zeile.
Objektfluss
Nun denken wir wie der Browser: 1 Zeile links oben, dann nach rechts, dann nächste Zeile. Das ist wichtig, weil nur so versteht man was beim float margin padding block inline passiert.
Wir gucken uns erstmal die Objekte an und wie sie sich ohne Formatierung verhalten .
Inline und Block
Es gibt inline Elemente die verhalten sich wie ein Zeichen und es gibt block Elemente die verhalten sich nicht so. Ein block möchte gerne immer am anfang stehen, also 2 divs hinereinander wollen untereinander stehen. Zwei span elemente wollen im textfluss bleiben.
Wir müssen also da, wo ein block Element kommt, mit float arbeiten da es sonst in die neue Zeile will. Nun gibt es clear um einen vorher gemachten float wieder zurückzusetzten, das heißt das Element trotz float in eine neue Zeile will.
Inline Elemente wiederrum haben das streben in ihrer Zeile zu bleiben. Um diesen in eine neue Reihe zu zwingen reicht ein clear nicht aus, denn auch ohne diese Eigenschaft ‚float‘ ist es inline und bleibt in der Zeile wenns geht. Also müssen wir ein Inline Element nun auch noch zu einem block Element machen und schon will auch dieses in die neue Zeile.
Positionieren
Kommt nun das margin und padding. Padding ist innerhalb des Elements ein freier Platz (Hintergrund dehnt sich also aus). Margin ist der Abstand zum nächsten Element.
Absolute
Haben wir position:absolute; werden alle margin angaben zum nächst höheren absolute positionierten Element. Genauso verhält es sich fast mit float, dieses möchte auch immer erst beim obersten geschachtelten Element anfangen. Es kann also passieren das bei Float das ganze Objekt viel weiter oben anfängt (solange dort noch kein Text oder ähnliches gefloatete war).
Relative
Der Standard ist, dass alle Elemente position:relativ sind, das heißt immer zum vorherigen Element ausgerichtet. Position absolut hingegen richtet zum Eltern (absolute) Element aus. Bei float Elementen ist das wiederum anders.
Fazit
Diese ganzen Tatsachen in Betracht gezogen und angewendet auf die Elemente, führen oft dazu das jedes element positioniert werden muss, entweder um in die neue zeile zu kommen oder margin und padding bzw. position genau zu platzieren.
Regeln für gutes HTML
Keine unnützen Elemente benutzen, die keinen Sinn bzw. eine Form von Hardcodierung haben. Alles was kein sinn hat kann man mit CSS auch machen. Sowas wie aussehen und die position ist nunmal sinnfrei wenns um reine Daten geht.
Der Browser und viele andere Tools lesen einfach nur die Tags und den Inhalt und sind schwer verwirrt, wenn da Sachen sind die leer bleiben oder die Ordnung stören.
Und auch das Nachbearbeiten solch eines HTMLs ist überschaubarer und einfacher.
Beispiel: ich find das Element gleich und nicht erst einmal suchen wo es wie geschachtelt wurde in sinnfreien behältern Zellen oder sonst wie.
Hallo
Solcher Code ist nie wieder zu gebrauchen, geschweige den das das einer überblicken kann.
H
all
o
Das kannman dann alles über CSS regeln.
P.S. und warum hat dieses FORUM keine überschriften unterer ordnung , FETT ist doch nunr wirklich unangebracht.
P.P.S. das nun das dritte mal , weil er alle meine ueberschriften unkenntlich macht , drecks forum echt . muss ich alles in FETT darstellem , man ist das primitv.
P.P.S. das es hier keine sinnvollen elemente gibt , ist also
uberschrift 3 Ordnung
die 2 Ordnung
P.P.P.S. ist doch schon ein geiles Forum nach 10 Jahren immernoch grundlegende fehler in der ganzen verabeitung .