Semantik von DIV-Layern: Macht das Sinn so?

2nd

2nd

Aktives Mitglied
Thread Starter
Dabei seit
25.07.2004
Beiträge
9.018
Reaktionspunkte
243
Vorneweg mal ein Bild:

div_konzept.gif



Ich mache mir gerade einige Gedanken über die Semantik von Layout-Objekten wie DIVs z. B..

Meine Frage: Ihr seht oben ein Box-Layout mit Header-DIV, 2 Content-DIVs, alle sind in ein Wrapper-DIV eingebettet, damit ich die Seite zentriert habe. Alle DIVs sind absolut im Wrapper-DIV positioniert, innerhalb der DIVs befinden sich dann die "bedutungsvollen" Tags wie ULs, Ps und Headlines.

Macht das so Sinn mit den DIVs? Oder bietet es sich an, Klassen für die Blocklevelelemente zu schreiben und diese dann per MARGIN und FLOATS zu positionieren, ich meine vor allem den Inhalt der beiden ContentBoxen? Das könnte eventuell ein Problem werden, wenn der rechte Inhalt länger ist als der linke und das ist definitiv bei meinem Projekt der Fall.

Also <p class="left">....</p> und <p class="right>....</p>, analog dazu die Headlines?

Hintergrund ist der, dass ich im Moment dabei bin, mein Markup zu reduzieren, um nur das Notwendigste an Board zu haben. Was meint Ihr?


2nd
 
Zuletzt bearbeitet:
wenn ich deine skizze anseh, denk ich: ul ;)

die navigation in eine auf horizontal gestellte liste (display: inline) und den inhalt in eine zweite!
dann bleiben die zwei inhaltsspalten schön nebeneinander und du brauchst gar nicht mit float etc. rumzufrikeln.
HTML: 
<ul><li>contentLeft</li><li>contentRight</li></ul>
in eine liste darfst du fast alles reinpacken, ohne dass der validator schreit :D
 
2ndreality schrieb:
Vorneweg mal ein Bild:

Meine Frage: Ihr seht oben ein Box-Layout mit Header-DIV, 2 Content-DIVs, alle sind in ein Wrapper-DIV eingebettet, damit ich die Seite zentriert habe. Alle DIVs sind absolut im Wrapper-DIV positioniert, innerhalb der DIVs befinden sich dann die "bedutungsvollen" Tags wie ULs, Ps und Headlines.

Macht das so Sinn mit den DIVs? Oder bietet es sich an, Klassen für die Blocklevelelemente zu schreiben und diese dann per MARGIN und FLOATS zu positionieren, ich meine vor allem den Inhalt der beiden ContentBoxen? Das könnte eventuell ein Problem werden, wenn der rechte Inhalt länger ist als der linke und das ist definitiv bei meinem Projekt der Fall.

Also <p class="left">....</p> und <p class="right>....</p>, analog dazu die Headlines?

Hintergrund ist der, dass ich im Moment dabei bin, mein Markup zu reduzieren, um nur das Notwendigste an Board zu haben. Was meint Ihr?


2nd
Zum Vergrößern anklicken....

Absolute Positionierung? Für was den?
Ansonsten ist der Ansatz doch OK so.
 
@XLQR: Nee, das sagt mir nicht zu. Ich möchte schon die Tags benutzen, die für die entsprechenden Inhalte da sind. So kann ich ja gleich wieder eine TABLE bauen ohne Validatorgeschrei ;)

2nd
 
was habt ihr denn gegen absolute positioniereung?
Hab ich auch immer so gemacht
 
msslovi0 schrieb:
Bis auf die absolute Positionierung sieht das ganz vernünftig aus.

Dazu fällt mir nur http://www.bs-markup.de/blog/archiv/2006/01/23/divlos-sinnlos/ ein.

Darum geht es doch gar nicht. Daher gleich noch was zum lesen: http://de.wikipedia.org/wiki/Semantik
Zum Vergrößern anklicken....

Genau darum geht es mir und darum habe ich diesen Thread erstellt, um nämlich wegzukommen von bedeutungsleerem Markup, das für Layoutzwecke missbraucht wird.

Ich bin gerade dabei, das so umzusetzen und habe die absoluten Posis rausgenommen, das geht ganz gut.

@QuickSilverEX: Es geht um beliebig skalierbare Seiten, abhängig von der Einstellung der Schriftgröße des Benutzers, der Browsergröße usw.. Im Prinzip muss das Layout elastisch sein, so wie eine Vektorgrafik. Skalieren ohne Qualitätsverlust. Sprich, wenn ein Benutzer die Schriftgröße auf 5em wegen einer Sehschwäche eingestellt hat (APFEL-+), muss trotzdem noch alles funktionieren und zugänglich sein. Bei absoluter Positionierung in meinem Layout z. B. würde der Navibereich den Contentbereich irgendwann überlappen und der Inhalt wäre nicht mehr zugänglich.

Man kann auch die folgende Frage stellen: Was habt Ihr gegen Tabellen? Oder: Was habt Ihr gegen Frames?

;)

2nd
 
Die absolute Positionierung ist zwar nett, macht aber meist mehr Probleme. Vor allem wie oben gerade angesprochen wenn der User die Fontgröße erhöht!
 
hmm, da is was dran.
Egal, ich werde meine beiden Pages jetzt trotzdem erstmal so online stellen und gucken wie die Reaktionen sind.
 
xlqr schrieb:
wenn ich deine skizze anseh, denk ich: ul ;)

die navigation in eine auf horizontal gestellte liste (display: inline) und den inhalt in eine zweite!
dann bleiben die zwei inhaltsspalten schön nebeneinander und du brauchst gar nicht mit float etc. rumzufrikeln.
HTML: 
<ul><li>contentLeft</li><li>contentRight</li></ul>
in eine liste darfst du fast alles reinpacken, ohne dass der validator schreit :D
Zum Vergrößern anklicken....
Also das ist ja nun wirklich eine der schlechtesten Ideen überhaupt. Dann kann wir wirklich zurück zum alten Tabellen-Layout.
2ndreality schrieb:
@QuickSilverEX: Es geht um beliebig skalierbare Seiten, abhängig von der Einstellung der Schriftgröße des Benutzers, der Browsergröße usw.. Im Prinzip muss das Layout elastisch sein, so wie eine Vektorgrafik. Skalieren ohne Qualitätsverlust. Sprich, wenn ein Benutzer die Schriftgröße auf 5em wegen einer Sehschwäche eingestellt hat (APFEL-+), muss trotzdem noch alles funktionieren und zugänglich sein. Bei absoluter Positionierung in meinem Layout z. B. würde der Navibereich den Contentbereich irgendwann überlappen und der Inhalt wäre nicht mehr zugänglich.
Zum Vergrößern anklicken....
Also Du meinst, dass folgendes Layout <[gelöscht]> nicht elastisch genug ist? Der Header ist mir Margins realisiert, da ich nicht wirklich weiß wie hoch er ist. Der Inhalt ist mit relativer Positionierung (linker Inhalt) und die Links mit absoluter Positionierung (rechter Inhalt) realisiert. Die größe hierbei ist eine relative Angabe. (In Detailfragen noch nicht wirklich fertig, denn ist erst einmal eine Lösung auf die Schnelle, damit unsere Chinesen ihre Texte kontrollieren können).

Übrigens sollte man die Sehschwäche nicht so überbewerten. Warum? Weil was nützt es einem mit Sehbehinderung, wenn er/sie den Inhalt einer Website zwar größer darstellen kann, aber das ganze rundherum viel zu klein ist. Deshalb wird jemand mit einer Sehschwäche eher die Bildschirmauflösung heruntersetzen, damit alles größer wird. Dies hat z. Beispiel auch eine Kollegin von mir auf ihrem Rechner gemacht. Daher sollte man bei Leuten mit Sehschwäche eher davon ausgehen, dass man eben keine 1024x768 oder 800x600 zur Verfügung hat sondern eher wieder die alten 640x480 (oder das entsprechende Breitbildäquivalent).

Pingu

EDIT: Link gelöscht
 
Zuletzt bearbeitet:
Mich stört es etwas, dass zweimal H1 benutzt wird - aber das ist wohl reine Pedanterie.

Ansonsten ist es ein durchaus stimmiges Konzept - die div-Container dort eingesetzt, wo sie sinnvoll sind. Über absolute Positionierung würd ich mir nochmal Gedanken machen - geht meistens auch ohne und ist dann gegenüber verschiedenen Auflösungen flexibler.
 
mwhiegl schrieb:
Mich stört es etwas, dass zweimal H1 benutzt wird - aber das ist wohl reine Pedanterie.
Zum Vergrößern anklicken....
Wie jetzt? Die h1 kann man doch schick mit css beeinflussen.
 
Nachtrag: Ich mag mich irren, aber der Vorteil der Positionierung von DIVs gegenüber der Verwendung von float für DIVs ist, dass man den Inhalt (Bilder und ähnliches) per float positionieren kann. Ansonsten gibt es wieder Probleme mit den inneren und äußeren Floats.

Pingu
 
Es geht auch nicht darum, wie sie aussehen, sondern, dass sie dem Browser etc. zeigen sollen, dass es sich um die Hauptüberschrift handelt - 2 Hauptüberschriften kann ich mir nur in den wenigste Fällen vorstellen.
Gleiche Hs sollen gleiche Wertigkeit zeigen ...

Es ist doch kein Problem innerhalb eines floatendes divs erneut zu floaten?
 
Es ist alles ohne absolute Positionierung umgesetzt bis auf die mainNavi oben, da muss ich evtl. nochmal ran. Der rechte DIV-Container floatet durch RIGHT neben den linken DIV-Container. Die Browsertests waren ok heute auf Win-Kisten und Macs.

Wegen den Überschriften: Habe ich mir auch schon Gedanken gemacht, aber bin noch nicht zu einem schlüssigen Ergebnis gekommen. Im Moment geht es mit 2x H1. Ich habe das Problem, dass ich die Inhalte nicht richtig strukturiert bekomme, aber im Moment ist der Kopf auch alle ;)

2nd
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten