Hausmittelchen gegen DIV-Suppe und fehlende Semantik im Markup

[RETRAX]

tjo...

Patient: retrax.de
Diagnose: DIV-Suppe und fehlende Semantik im Markup



Ist aber alles W3C HTML 4.01 valide...

und irgendwie ist mir das zu hoch...(ich wurde von einem von de.comm.internet.pages.misc) darauf aufmerksam gemacht...

*help*

 

[Brandhoff]

Hi,

du baust eine Tabelle, um Inhalte zu positionieren und benutzt in den Zellen DIV-Blöcke für die Ausrichtung der Inhalte, obwohl die Tabellenzellen oder die DIVs dies jeweils alleine könnten.

Mach dir eine Liste, wofür die ganzen DIVs genutzt werden und stecke die am häufigsten vorkommenden Anweisungen in CSS-Klassen für die Tabellenzellen.

Aus ...

<td valign="top" bgcolor="#dbe6ef" width="100">
<div align="right">
<div class="abstand-rechts">
<br>
<b>LifeStyle</b>
<br>...

könnte dann das werden:

<td class="naviRechts">
<br>
<b>LifeStyle</b>
<br>...

... mit diesem Schnipsel im Stylesheet:

td {vertical-align: top;}
td.naviRechts {background:#dbe6ef; width:100px; text-align:right; padding-right:4px;}

Der nächste Schritt wären dann, deinen Texten mit Paragraph- und Headline-Tags ihr Aussehen und Abstände beizubringen.

cheer, me

PS: die (code)-Tags des Forums haben die Schnipsel oben einfach gefressen?!
Habe deshalb die (php)-Tags mißbraucht; Text wird jetzt angezeigt, die Syntaxfärbung passt natürlich nicht ganz ...

 

[Faser]

Der eigentliche Sinn von CSS und DIV-Tags ist ja die Auslagerung des Designs.
Und dabei geht es nicht darum, für Abstände eigene CSS-Klassen zu erstellen.

Deine Seite könnte man in 4 CSS-Klassen unterbringen, und zwar

#header {}
#navigation {}
#sidebar {}
#main {}

In der CSS-Datei müsstest du dann deren Positionen bestimmen, also für die Navigation zum Beispiel:

#navigation {
  position: absolute;
  width: 100px;
  margin-right: 3px;
  background-color: grey;
}

Ähnliches müsstest du dann mit den anderen 3 Klassen machen.

Danach sähe die HTML-Datei so aus:

<div id="header">
[BILD LINKS]
Home - Stand: 08.02.2004 - Fotoalbum 2004
[BILD RECHTS]
</div>

<div id="navigation">
Über Mich
Steckbrief
Lebenslauf
...
</div>

<div id="sidebar">
Links
....
</div>

<div id="main">
[Retrax-Logo]
</div>

;-)

 

[RETRAX]

Original geschrieben von Faser
Deine Seite könnte man in 4 CSS-Klassen unterbringen, und zwar

#header {}
#navigation {}
#sidebar {}
#main {}

;-)

Danke für die Tips an Euch beide! So langsam check ich das...

Wie muss ich den CSS Eintrag für den Header machen?

Wie bestimme ich da die Position der Bilder usw...?

 

[RETRAX]

Original geschrieben von Brandhoff

<td valign="top" bgcolor="#dbe6ef" width="100">
<div align="right">
<div class="abstand-rechts">
<br>
<b>LifeStyle</b>
<br>...

könnte dann das werden:

<td class="naviRechts">
<br>
<b>LifeStyle</b>
<br>...

... mit diesem Schnipsel im Stylesheet:

td {vertical-align: top;}
td.naviRechts {background:#dbe6ef; width:100px; text-align:right; padding-right:4px;}

Hi!

ich habs jetzt folgendermassen:

in der html datei hab ich vier <td class="">

<td class="NaviOben">
<td class="NaviLinks">
<td class="NaviMitte">
<td class="NaviRechts">

in der CSS hab ich folgendes stehen:

td {
vertical-align: top;
}
td.NaviLinks {
background: #dbe6ef;
width: 100px;
text-align: left;
padding-left: 5px;
}
td.NaviMitte {
vertical-allign: middle
}
td.NaviRechts {
background: #dbe6ef;
width: 100px;
text-align: right;
padding-right: 5px;
}

Das td.NaviOben blick ich noch überhaupt nicht, weil ich nicht weiss wie ich die zwei Bilder rechts und links anspreche... Und im "NaviLinks" wird die Farbe nicht angezeigt, obwohl ich es in der CSS definiert hab?

Und das "NaviMitte" schaut auch noch nicht korrekt aus...

Wie muss denn das korrekt aussehen?

 

[Faser]

Hab' mir mal den Spaß erlaubt:

Komplett ohne Tabellen ;-)

 

[RETRAX]

thx! das ist voll gut.

das führ ich mir jetzt zu gemüte...hoffentlich steig ich durch...

Danke & Gruss

RETRAX

 

[Faser]

Hmm, mir fällt grad auf, dass es noch nicht ganz optimal ist.

Wenn jetzt der Inhalt länger ist, sind die beiden Navigationsleisten immer noch gleichgroß, also "gehen nicht mit"...

 

[RETRAX]

Original geschrieben von Faser
Hmm, mir fällt grad auf, dass es noch nicht ganz optimal ist.

Wenn jetzt der Inhalt länger ist, sind die beiden Navigationsleisten immer noch gleichgroß, also "gehen nicht mit"...

und wie kann man das hinbekommen? Das "mit gehen" ist wohl ein typisches Tabellenfeature.

 

[RETRAX]

Hi nochmal,

die DIV Suppe hab ich jetzt ausgelöffelt, und die neue index.html hochgeladen. Könnt Ihr euch das bitte nochmal anschauen ob das jetzt in Ordnung ist?

Was fehlt jetzt noch zum "perfekten" Code?

 

[Brandhoff]

Hi again,

Welche (X)HTML-Version als Grundlage eines Dokumentes gilt, wird im Doctype definiert. Du hast dort noch immer HTML 4.01 transional stehen. Die gängigen Validatoren nehmen genau wie die Browser einen gegebenen Doctype, um den Code dann entsprechend darzustellen bzw. zu prüfen, tun dies aber in deinem Fall unter falschen Voraussetzungen.

Nimm mal diesen Schnipsel als Doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

"Transitional" erlaubt mehr Freiheiten als "Strict", aber für beide werden ca. 150 Fehler zurückgegeben.

Kurze Zusammenfassung:
- in XHTML hat jedes Tag auch ein Schließtag.
- Werte stehen nie ohne Anführungszeichen.
- Inhalte und Formatierungen werden vollkommen getrennt (-> CSS).
- Inhalte stehen nie "frei" im Raum, Text z.B. in den üblichen p, h1, div, span, ...-Tags.
- br als Abstandhalter ist sowieso verpönt.

Kennst du SelfHTML? Ist eine freie und anerkannt kompetente Basis.

cheers, me


Edit: Beating a dead horse =)
Gerade erst gesehen, daß du weitergebaut hast, aber in anderen Threads.