manuel: CSS - Layout: Hab ein Problem eine Seite komplett mit Divs zu bauen

Beitrag lesen

Hallo ich bräuchte Hilfe, ich möchte gerne ein Layout komplett nur mit divs umsetzen.

Vielleicht zuerst, warum ich das möchte:
Ich möchte gerne eine Barrierefreie Seite bauen, deshalb muss der komplette Inhalt am Seitenanfang aufgelistet werden, damit der Inhalt von verschieden Sprachtools vorgelesen werden kann.
In diesem Zusammenhang möchte ich gerne das gesammte Layout nur aus Divs bauen. Gut im Laufe der Testphase habe ich mich durchgerungen eine umschliessende Tabelle zu verwenden.

Die Seite soll ausserdem immer 100% der höhe verwenden, und genau dies ist mein Problem, alles andere hab ich schon gelöst.

Da die divs komplett unabhängig von einander sind, ziehen sie sich gegenseitig ja nicht auf. Aber genau das ist mein Ziel.

Nach längerem probieren habe ich folgendes probiert.

Ich habe eine umschliessende Tabelle verwendet mit höhe 100% und breite 1002px - ausrichtung left. in diese Tabelle hab ich eine relative Tabelle gelegt, die der Contentbereich meiner Seite werden soll. Dort wird auch der Inhalt der Seite sofort nach dem einleitenden Div-Tag aufgelistet.

Nach dem Inhalt habe ich nun einen absoluten div gelegt und diesen per CSS ein wenig nach links verschoben. Nun kann ich hier in den absoluten div (der sich nun relativ an dem umschliessenden relativen div ausrichtet - soweit habe ich es schon getestet) problemlos Layoutelement per divs platzieren. alles richtet sich nun an dem ersten absoluten div aus.

Hier mal ein grober aufbau, als hilfe zum nachvollziehen. habe alle styles per id ausgelagert, die styles dienen nur zur versnschaulichung. Auch die bezeichnungen sind stark verkürzt usw.

<table cellpadding="0" cellspacing="0" border="0" width="1002" height="100%">
   <tr valign="top">
      <td width="1002" height="100%">
         <div id="mainrelative" style="position:relativ ......">
           <br>
           Seiteninhalt
           <br>

<div id="mainabsolute" style="position:absolute; left:- xxx; ...">
             <div id="menue" ></div>
             <div id="rechts" ></div>
             <%--  Layoutelemente  --%>
             <div id="logo"></div>
             <div id="sonstigesbild"></div>
           </div>
        </div>
      </td>
   </tr>
</table>

Was hab ich mit dem ganzen Aufwand erreicht?
Nun jetzt kann ich den Contentbereich füllen und die beiden äußeren divs link´s und rechts davon nehmen sich nun auch genau die höhe die auch der contentbereich nimmt.

Ich dachte schon ich habs somit geschafft.

Doch der große Rückschlag kam, als ich im menü mal mehr Links eingebaut habe, denn umgekehrt ziehen leider der menübereich den Contentbereich nicht mit auf :(

Hat hier jemand eine Idee wie ich trotzdem an mein Ziel komme?