Unnötige <div>-Elemente, aber wie vermeiden?
Claudius L.
Unnötige <div>-Elemente, aber wie vermeiden?
Claudius L.
Hallo,
ich hätte gerne mal ein Problem ... äh, ne, sorry, falscher Ansatz. *g*
Ok, ich versuchs mal sinnvoller. Ich bin gerade dabei, eine Website, die ich vor einiger Zeit erstellt habe, technisch etwas auf zu arbeiten, da ich als ich sie ursprünglich erstellt habe - im Nachhinein betrachtet - einiges verpfuscht habe.
Darum gehe ich das Ganze nun von Grund auf neu an und will von vorne herein sauber arbeiten. Das grobe äußere Layout soll im Endeffekt so aussehen. Der Bereich, in dem jetzt der Text steht, soll in der Breite flexibel sein. Da sich die äußeren Bereiche (links und rechts, dort wo weiß und blau in einander übergehen) des Hintergrunds aber natürlich nicht horizontal kacheln lassen, muss deren Breite fest sein. Darum handelt es sich dabei um jeweils zwei einzelne <div>-Elemente (immer mit einem entsprechenden background-image).
Um das ein wenig zu verdeutlichen hier erstmal der Code, die beiden eben angesprochenen Elemente haben die IDs "rahmen_links" und "rahmen_rechts".
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Unbenannt</title>
<meta http-equiv="language" content="de" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="false" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body dir="ltr">
<div id="gesamt">
<div id="rahmen_links">
<div id="ecke_lo"></div>
<div id="ecke_lu"></div>
</div>
<div id="rahmen_rechts">
<div id="ecke_ro"></div>
<div id="ecke_ru"></div>
</div>
<div id="inhalt">
<p>Lorem ipsum cu quodsi animal volumus eum. Cu causae nominati expetendis mea. Congue delenit concludaturque ei eam. Sumo facilis vim in, no debet audire mel, ut hendrerit honestatis ius.</p>
<!-- usw. -->
</div>
</div>
</body>
</html>
Die horizontalen schwarzen Balken samt "Ecke" sind nochmals je Ecke ein eigenes <div> (IDs "ecke_lo", "ecke_lu" usw.), für die unteren Ecken per CSS positioniert.
Das Ganze scheint bisher eigentlich recht gut zu funktionieren - allerdings muss ich zugeben, dass ich noch zu keinem Test mit dem IE kam ...
Mein Problem bei der Sache ist nun aber, dass durch diese Konstruktion 8 unnötige, semantisch bedeutungslose <div>-Elemente in meinem Dokument rumgammeln, die mir da irgendwie ein Dorn im Auge sind. Denn gerade sowas wollte ich beim zweiten technischen Anlauf dieses Projekts vermeiden.
Darum die Frage an Euch: kann ich ohne diese unsinnigen Elemente zum optisch gleichen Ergebnis kommen? Und wenn ja natürlich noch die ultimative Frage: wie?
Ich freue mich auf alle Antworten und Ideen.
Gruß
-
Hello,
Das Ganze scheint bisher eigentlich recht gut zu funktionieren - allerdings muss ich zugeben, dass ich noch zu keinem Test mit dem IE kam ...
... das habe ich auch immer gedacht, man müsse jeden Browser (der Marktanteil hat) unterstützen.
Jein möchte ich heute sagen. In erster Linie zählt dann doch schlussendlich der Validator vom W3C und das am besten mit Einstellung "strict".
Wenn da das grüne Banner erscheint, hüpft das Herz und man kann dann langsam anfangen, Schmankerln für die einzelnen Browser einzubauen, natürlich immer unter Kontrolle des grünen Banners vom Validator.
Ob es eine "DIV-Suppe" wird, interessiert mich eigentlich überhaupt nicht mehr. Besser eins mehr als eins zu wenig ;-) Aber jedes mit einer eigenen ID. Zahlen gibt es ja genug *g*
Aber eins verstehe ich immer nicht.
Wie kann eine ernsthafte Seite ihren Besten Platz (den Seitenkopf) für Werbebanner verballern. So viel kann gar keiner zahlen, dass er den Platz verdient hätte!Harzliche Grüße vom Berg
http://bergpost.annerschbarrich.deTom
--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
Nur selber lernen macht schlau
Ein Jammer ist auch, dass die Dummen so selbstsicher und die Klugen voller Zweifel sind. Das sollte uns häufiger zweifeln lassen :-)
-
Hallo,
... das habe ich auch immer gedacht, man müsse jeden Browser (der Marktanteil hat) unterstützen.
Jein möchte ich heute sagen. In erster Linie zählt dann doch schlussendlich der Validator vom W3C und das am besten mit Einstellung "strict".
Naja, ich denke beides ist wichtig. Ein gültiges Dokument sehe ich auch als Pflicht an, aber wenn es nicht korrekt angezeigt wird, ist auch das nichts wert.
Ob es eine "DIV-Suppe" wird, interessiert mich eigentlich überhaupt nicht mehr. Besser eins mehr als eins zu wenig ;-) Aber jedes mit einer eigenen ID. Zahlen gibt es ja genug *g*
Gerade aus der DIV-Suppe will ich gerade eben unbedingt heraus. Ich habe ja im Eröffnungsposting schon erwähnt, dass ich dabei bin, eine technisch etwas mangelhafte Website zu korrigieren. Und dort fehlt es vor allem an Semantik, valide ist sie. Darum kann ich dir da nicht ganz so zustimmen.
Aber eins verstehe ich immer nicht.
Wie kann eine ernsthafte Seite ihren Besten Platz (den Seitenkopf) für Werbebanner verballern. So viel kann gar keiner zahlen, dass er den Platz verdient hätte!Was mir zu diesem Thema durch den Kopf geht, ist, wer eigentlich diese ganzen Werbebanner à la „Wie alt wirst Du“ und „Mit wem bist Du verwandt?“ bezahlen kann. Die sieht man ja zur Zeit immer öfter …
Gruß,
Claudius
-
Hello,
Was mir zu diesem Thema durch den Kopf geht, ist, wer eigentlich diese ganzen Werbebanner à la „Wie alt wirst Du“ und „Mit wem bist Du verwandt?“ bezahlen kann. Die sieht man ja zur Zeit immer öfter …
Die Sea-Org?
Harzliche Grüße vom Berg
http://bergpost.annerschbarrich.deTom
--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
Nur selber lernen macht schlau
Ein Jammer ist auch, dass die Dummen so selbstsicher und die Klugen voller Zweifel sind. Das sollte uns häufiger zweifeln lassen :-)
-
-
-
Hallo
Das grobe äußere Layout soll im Endeffekt so aussehen. Der Bereich, in dem jetzt der Text steht, soll in der Breite flexibel sein.
Mein Problem bei der Sache ist nun aber, dass durch diese Konstruktion 8 unnötige, semantisch bedeutungslose <div>-Elemente in meinem Dokument rumgammeln, die mir da irgendwie ein Dorn im Auge sind. Denn gerade sowas wollte ich beim zweiten technischen Anlauf dieses Projekts vermeiden.
Darum die Frage an Euch: kann ich ohne diese unsinnigen Elemente zum optisch gleichen Ergebnis kommen? Und wenn ja natürlich noch die ultimative Frage: wie?Detlef G. kommt bei seinem vergilbten Papier mit angebranntem Rand mit ein paar DIVs weniger aus, siehe sein Archivposting und Resultat.
Freundliche Grüße
Vinzenz
-
Hallo Vinzenz
Detlef G. kommt bei seinem vergilbten Papier mit angebranntem Rand mit ein paar DIVs weniger aus, siehe sein Archivposting und Resultat.
Nicht wirklich, das "angebrannte Papier" kommt zwar auch mit ein paar Elementen weniger aus, ist andererseits aber unnötig kompliziert (CSS) weil es zur Verwendung mit einem Seitenhintergrund beliebigen ausgelegt ist. Außerdem ist es so nur verwendbar, wenn keine definierten Ecken sondern nur ein voll kachelbarer Hintergrund und in jeweils eine Richtung kachelbare Ränder Verwendung finden.
Für Claudius Seite würde ich eher direkt auf Runde und andere Ecken für skalierbare Boxen verlinken.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo,
Für Claudius Seite würde ich eher direkt auf Runde und andere Ecken für skalierbare Boxen verlinken.
danke dir, ganz neu ist mir der Artikel allerdings nicht. Leider gibts eben auch da die unnötigen <div>-Elemente, mit denen ich irgendwie nicht glücklich werde. Aber ohne scheint einfach nicht zu gehen … vielleicht bin ich einfach ein wenig perfektionistisch oder ein Hypochonder, der sich grundlos Divitis diagnostiziert.
Gruß,
Claudius
-
Hallo Claudius
danke dir, ganz neu ist mir der Artikel allerdings nicht. Leider gibts eben auch da die unnötigen <div>-Elemente, mit denen ich irgendwie nicht glücklich werde.
Insgesamt 5 Stück statt deinen 8. Je nachdem, was dieser Rahmen dann enthalten soll oder/und dieser Rahmen die gesamte Seite bildet, lässt sich das noch weiter reduzieren.
Aber ohne scheint einfach nicht zu gehen …
Das hängt davon ab, wie die Seite aufgebaut ist, welche Elemente sie zur Auszeichnung des Inhalts enthalten soll. Die Hintergrundgrafiken können nicht nur Divs sondern auch (fast) jedem anderen Element zugewiesen werden. Nur wenn es keine/nicht genug andere Elemente gibt oder wenn es ein Universalbeispiel sein soll, dann sind alle fünf Divs wirklich nötig.
… vielleicht bin ich einfach ein wenig perfektionistisch oder ein Hypochonder, der sich grundlos Divitis diagnostiziert.
Das wird es wohl sein ;)
Unter Divitis verstehe ich, wenn _keine_ sinnvollen Elemente zur Strukturierung verwendet werden oder diese unnötigerweise ständig in zusätzliche Divs oder Spans gesteckt werden.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
Hallo,
und danke dir für die Links!
Detlef G. kommt bei seinem vergilbten Papier mit angebranntem Rand mit ein paar DIVs weniger aus, siehe sein Archivposting und Resultat.
Interessant ist das auf jeden Fall, aber eigentlich hatte ich auf eine Lösungsmöglichkeit ganz ohne unnötige Elemente gehofft. Allerdings gibts das vermutlich einfach nicht, zumindest habe ich keinerlei Idee, wie das gehen sollte – andererseits, genau darum frage ich ja. ;)
Ich denke, da bleibe ich lieber bei meinem eigenen Code, der recht simpel, kurz und leicht verständlich ist, bevor ich mich da an Detlefs Werk orientiere und möglicherweise etwas übernehme, das ich nicht richtig verstanden habe. Denn dass es kompliziert ist, sagt Detlef ja selbst.Gruß,
Claudius
-