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

[manuel]

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?

[Mark-Oliver]

Hi,

ich würde es so versuchen:
1. Tabelle raus
2. Höhe der verschiedenen divs auslesen
3. Maximalwert ermitteln
4. Alle divs auf die Maximalhöhe setzen

Alles per JS (damit ist dann allerdings die "strenge" Barrierefreiheit dahin...).

Etwa so:
<script type="text/javascript">
<!--
  var div1hoch = document.getElementById("div1").offsetHeight;
  var div2hoch = document.getElementById("div2").offsetHeight;
  var max = Math.max(div1hoch,div2hoch);
  document.getElementById("div1").style.height = max + "px";
  document.getElementById("div2").style.height = max + "px";
// -->
</script>

Gruß,
Mark-Oliver.

[Danny]

Hi,

Alles per JS (damit ist dann allerdings die "strenge" Barrierefreiheit dahin...).

Warum? Ich finde Deine Lösung völlig okay, da sie ja nur das Layout betrifft! Die HTML-Struktur bleibt dabei völlig unberührt, weshalb auch Vorleseprogramme, etc. keine Probleme damit haben.

Die Barrierefreiheit wäre erst dahin, wenn irgendwelche Inhalte, z.B. Navigationselemente nur mit Javascript nutzbar wären, oder habe ich das falsch verstanden?

MfG
Danny

[Mark-Oliver]

Hi,

Die Barrierefreiheit wäre erst dahin, wenn irgendwelche Inhalte, z.B. Navigationselemente nur mit Javascript nutzbar wären, oder habe ich das falsch verstanden?

Mag sein, ich bin da nicht so firm. Dachte nur, mal gelesen zu haben, dass man im Themenkreis Barrierefreiheit JS am besten ganz außen vor lässt.

Aber hauptsache, mein Ansatz hilft weiter...  ;-)

Gruß,
Mark-Oliver.

[manuel]

Hallo.

@Mark-Oliver: Danke für den post, aber leider kann ich es nicht so machen, denn:

1. Will ich diese Technik für mehrere Layouts verwenden, auch für zentrierte, und nur die Tabelle hält das Browserfenster offen und lässt Scrollbalken zu. Deshalb muss ich zumindest eine Verwenden, sonst verschwinden Inhalte unerreichbar bei zu kleinem Fenster.

2. Möchte ich kein JavaScript verwenden, erstens weil damit wirklich die Barrierefreiheit weg ist. Außerdem sieht das Layout nicht immer gleich aus. Und ich kann nicht jedesmal viel Zeit aufwenden mit JS mein Layout "hinzutricksen".

3. Wenn ich das wirklich ohne Js und aso weiter hinbekomme, wird das Layouten zum "Legospiel". Logo setzen, bissl verschieben - fertig :).
War ja schon so bis ich auf den komischen Fehler gestoßen bin.
Das ist mein eigentliches Ziel bei der Sache.

Aber trotzdem danke für die nette Antwort auf meinen Post.

Für weitere Ratschläge wäre ich sehr dankbar.

Gruß

Manuel

[wahsaga]

hi,

3. Wenn ich das wirklich ohne Js und aso weiter hinbekomme, wird das Layouten zum "Legospiel". Logo setzen, bissl verschieben - fertig :).

hurra, also in zukunft noch mehr unkreative seiten nach dem selben baukastenschema.

gruß,
wahsaga

[manuel]

hi,

3. Wenn ich das wirklich ohne Js und aso weiter hinbekomme, wird das Layouten zum "Legospiel". Logo setzen, bissl verschieben - fertig :).

hurra, also in zukunft noch mehr unkreative seiten nach dem selben baukastenschema.

Naja damit könnte man alles hinbekommen .. leicht gebaut bedeutet ja nicht, das es unkreativ sein muss.
Ich brauche nur einen Fest vorbestimmten Contentbereich, den Rest der Seite kann man dabei frei gestalten ..

Ich fänds prima

Gruß

Manuel

[Auge]

Hallo

2. Möchte ich kein JavaScript verwenden, erstens weil damit wirklich die Barrierefreiheit weg ist. Außerdem sieht das Layout nicht immer gleich aus. Und ich kann nicht jedesmal viel Zeit aufwenden mit JS mein Layout "hinzutricksen".

Für weitere Ratschläge wäre ich sehr dankbar.

Ich hätte da einen, von dem ich allerdings nicht sicher bin, ob du ihn hören willst:

Verabschiede dich von der Vorstellung, ein Layout immer (und überall) gleich aussehen zu lassen. HTML ist _keine_ Sprache zur Erstellung von Drucklayouts! Wenn du soetwas haben willst, benutze PDF.

HTML ist dazu da, strukturierte Inhalte zu transportieren (Hier eine Überschrift (<hx>), da ein Textabsatz (<p>) oder z.B. eine Liste (<ul> oder <ol>). Wenn du dies beherzigst, wird deine Seite auch vorgelesen werden können. Das Layout ist _nur_ eine, nicht unwichtige, Dreingabe.

Tschö, Auge

[Ingo Turski]

Hi,

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.

wieso das?

Die Seite soll ausserdem immer 100% der höhe verwenden

Du sagtest doch, daß die Seite barrierefrei sein soll. Das ist sie mit seiteninternen Scrollbalken nicht mehr.

Ich habe eine umschliessende Tabelle verwendet mit höhe 100% und breite 1002px

Oops, noch eine Barriere: ein horizontaler Scrollbalken in etwas kleineren Fenstern.

Nach dem Inhalt habe ich nun einen absoluten div gelegt

Und möglicherweise gleich die nächste Barriere - teste das mal in (sehr) kleinen Fenstern und bei Schriftvergrößerung.

Hier mal ein grober aufbau, als hilfe zum nachvollziehen.

Hast Du schon mal etwas von semantischem Markup gehört? Das ist die Voraussetzung für Barrierefreiheit.

Was hab ich mit dem ganzen Aufwand erreicht?

Eine chaotische Seite, die nicht viel mit Barrierefreiheit zu tun hat.

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

Ja. Verzichte auf Barrierefreiheit oder solche Formatierungen. Und eine Tabelle benötigst Du (dann) wirklich nicht mehr.

freundliche Grüße
Ingo

[manuel]

wieso das?

Weil ich es probieren will !

Du sagtest doch, daß die Seite barrierefrei sein soll. Das ist sie mit seiteninternen Scrollbalken nicht mehr.

Ok ich habe mich falsch ausgedrückt.
Ich möchte, dass sie insoweit Barrierefrei ist, als dass ich den Text viorlesen lassen kann.

Oops, noch eine Barriere: ein horizontaler Scrollbalken in etwas kleineren Fenstern.

scrollbalken sind mir egal .. ich muss es vorlesen lassen können

Und möglicherweise gleich die nächste Barriere - teste das mal in (sehr) kleinen Fenstern und bei Schriftvergrößerung.

ich benutze kein em sondern px

Hast Du schon mal etwas von semantischem Markup gehört? Das ist die Voraussetzung für Barrierefreiheit

Nein habe ich nicht ...

Eine chaotische Seite, die nicht viel mit Barrierefreiheit zu tun hat.

Ja. Verzichte auf Barrierefreiheit oder solche Formatierungen. Und eine Tabelle benötigst Du (dann) wirklich nicht mehr.

Nein ich will es aber mal testen und die tabelle brauche ich trotzdem für zentrierte Layouts um keinen Content zu verlieren

Aber trotzdem danke für deine destruktive ... ähh konstruktive kritik.

Gruß

Manuel