Claudius L.: Unnötige <div>-Elemente, aber wie vermeiden?

Beitrag lesen

SELF-Forum

Unnötige <div>-Elemente, aber wie vermeiden?

Claudius L.
– Informationen zu den Bewertungsregeln

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ß

Beitrag melden
–
Informationen zu den Bewertungsregeln