Problem mit Positionierung

[Philip]

Hallo,

Ich bin grad dabei meine Website auf XHTML 1.0 Strict umzustellen. Dabei möchte ich gleichzeitig das "alte" Tabellenlayout durch das "neue" CSS-div-Layout ersetzen.
Dabei hab ich nun ein Problem:

So soll das Ganze mal aussehen:
 _____________________________________________
| header                                      |
|_____________________________________________|
| nav.   | content                    | side  |
|        |                            |       |
|        |                            |       |
|        |                            |       |
|        |                            |       |
|________|____________________________|_______|
| footer                                      |
|_____________________________________________|

In HTML schaut das Ganze bis jetzt so aus:

<div id="head">
  <p>head</p>
</div>

<div id="main">
  <div id="nav">
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
  </div>
  <div id="content">
    <p>Text</p>
  </div>
  <div id="side">
    <p>side</p>
  </div>
</div>

<div id="foot">
  <p>foot</p>
</div>

Nun hab ich ein Problem mit der Positionierung der drei divs nav, content und side. Ich bekomm sie nicht nebeneinander. Ich habs u.a. schon mit float:left versucht, dann hats die divs aber wenn ich das Fenster nicht aus Fullscreen hatte untereinander positioniert.

Optimal wärs, wenn die drei divs _immer_ nebeneinander angezeigt werden und wenn die Fensterbreite unter x Pixel ist, man zur seite scrollen muss.

Im Archiv hab ich nichts gefunden, obwohl ich mir vorstellen kann, dass es das Problem schonmal gab.

mfg,
  Philip

[Lemmy Danger]

Guude!

Nun hab ich ein Problem mit der Positionierung der drei divs nav, content und side. Ich bekomm sie nicht nebeneinander. Ich habs u.a. schon mit float:left versucht, dann hats die divs aber wenn ich das Fenster nicht aus Fullscreen hatte untereinander positioniert.

Wozu brauchst Du eigentlich das <div id="main">? Es ist nicht nur sinnfrei, sondern so eingesetzt auch nicht erlaubt. Gemäß XHTML-Strict ist es nämlich "verboten", <div>s ineinander zu verschachteln.

Stattdessen könntest Du Deine in "Main" enthaltenen <div>s einfach mittels CSS selbstständig positionieren.

LG ausm Hesseland
Lemmy

[MudGuard]

Hi,

Gemäß XHTML-Strict ist es nämlich "verboten", <div>s ineinander zu verschachteln.

Wie kommst Du auf diese absurde Idee?

AUs der XHTML 1.0 Strict-DTD:

<!ELEMENT div %Flow;>  <!-- generic language/style container -->

div darf also enthalten, was in %Flow; festgelegt ist:

<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">

div darf also %block; enthalten, %block ist definiert als:

<!ENTITY % block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">

div darf also div enthalten.

Bitte solche Sachen erst überprüfen, und nur dann hier verbreiten, wenn Du das auch nachweisen kannst.

cu,
Andreas

[Lemmy Danger]

Guude!

Wie kommst Du auf diese absurde Idee?
[...DTD-Auszüge...]
div darf also div enthalten.

Sorry, ich seh's ja ein und gebe zu, nicht nachgeforscht zu haben. Irgendwie hatte sich das bei mir so im Kopp festgesetzt, als ich mit XHTML noch nichts am Hut und in einem Posting mal solch eine Aussage gelesen hatte.

Bitte solche Sachen erst überprüfen, und nur dann hier verbreiten, wenn Du das auch nachweisen kannst.

Dinge, bei denen man meint sie genau zu wissen, überprüft man i.d.R. nicht, solange es nicht absolut lebenswichtig ist  - was auch mal auf den Holzweg führt: Auf meiner demnächst erscheinenden Seite wirst Du auch kein einziges Mal verschachtelte <div>s finden, obwohl ich es mir manchmal gewünscht hätte... Du brauchst nichts zu sagen, ich könnte mich nun selbst ohrfeigen, diese Sache nicht nochmal genauer überprüft zu haben. Aber wozu auch - ich "wusste" doch, dass es verboten ist...

*klatsch*

:-)

LG ausm Hesseland
Lemmy

[at]

Hallo.

Dinge, bei denen man meint sie genau zu wissen, überprüft man i.d.R. nicht, solange es nicht absolut lebenswichtig ist  - was auch mal auf den Holzweg führt: Auf meiner demnächst erscheinenden Seite wirst Du auch kein einziges Mal verschachtelte <div>s finden, obwohl ich es mir manchmal gewünscht hätte... Du brauchst nichts zu sagen, ich könnte mich nun selbst ohrfeigen, diese Sache nicht nochmal genauer überprüft zu haben. Aber wozu auch - ich "wusste" doch, dass es verboten ist...

Wie beschreibt sich der Duden so schön: "Maßgeblich in allen Zweifelsfällen." -- Aber wer wird denn zweifeln? ;-)
MfG, at

[Christian Seiler]

Hallo Philipp,

<div id="head">
  <p>head</p>
</div>

<div id="main">
  <div id="nav">
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
  </div>
  <div id="content">
    <p>Text</p>
  </div>
  <div id="side">
    <p>side</p>
  </div>
</div>

<div id="foot">
  <p>foot</p>
</div>

Also: Das <div id="main"> kannst Du weglassen. Desweiteren musst Du - um Dich jetzt nicht endlos zu verkrampfen, die Reihenfolge ändern:

<div id="nav">...</div>
<div id="side">...</div>
<div id="content">...</div>

Dem #nav verpasst Du float:left; und eine Breite. (z.B. 120px oder 10em oder so etwas) Dem #side verpasst Du float:right; und auch eine Breite. Dem #content verpasst Du margin-left:"Breite von #nav + ein bisschen was"; und margin-right:"Breite von #side + ein bisschen was";

Dem #foot verpasst Du noch ein clear:both; und die Sache ist erledigt.

Optimal wärs, wenn die drei divs _immer_ nebeneinander angezeigt werden und wenn die Fensterbreite unter x Pixel ist, man zur seite scrollen muss.

body { min-width: "Minimale Breite der Seite"; }

Allerdings kann das der IE nicht. Dafür nimmt er automatisch die Mindestbreite an; allerdings gibt es da einen unschönen Effekt:

Normal:

verfügbare Anzeigefläche
<-------------------------------------->

+-------+----------------------+-------+
| #nav  | #content             | #side |
|       | inhalt               |       |
|       | inhalt etwas breiter |       |
|       |                      |       |
+-------+                      |       |
        |                      +-------+
        |                      |
        +----------------------+

Zu klein:

verfügbare Anzeigefläche
<--------------------------->

+-------+----------------------+-------+
| #nav  | #content             | #side |
|       | inhalt               |       |
|       |                      |       |
|       |                      |       |
+-------+                      |       |
        |                      +-------+
        | inhalt etwas breiter |
        |                      |
        +----------------------+

Meines Wissens kann man das nicht wirklich umgehen.

Viele Grüße,
Christian

[Philip]

Hallo Christian,

Also: Das <div id="main"> kannst Du weglassen.

hmm, da war ich mir auch nicht sicher, ich wollte nur, dass das div nav, content und side jeweils gleich hoch sind, und da dachte ich, dass das div main mir evtl. helfen könnte... ? Geht das irgendwie?

Desweiteren musst Du - um Dich jetzt nicht endlos zu verkrampfen, die Reihenfolge ändern:

<div id="nav">...</div>
<div id="side">...</div>
<div id="content">...</div>

Dem #nav verpasst Du float:left; [...] und die Sache ist erledigt.

Schaut schonmal nicht schlecht aus. Vielen Dank.

body { min-width: "Minimale Breite der Seite"; }

Allerdings kann das der IE nicht. Dafür nimmt er automatisch die Mindestbreite an; allerdings gibt es da einen unschönen Effekt:

Dass er das nicht kann konnte ich nachvollziehen, den von dir beschriebenen Effekt jedoch nicht. Werd noch ein bischen rumprobieren.

Gibt es sonst überhaupt keine Möglichkeit, dem IE das beizubringen, es schaut nähmlich bescheuert aus, wenn ich das Fenster soweit zusammenschiebe, dass die drei divs untereinander angezeigt werden.

mfg,
  Philip

[Christian Seiler]

Hallo Philip,

hmm, da war ich mir auch nicht sicher, ich wollte nur, dass das div nav, content und side jeweils gleich hoch sind, und da dachte ich, dass das div main mir evtl. helfen könnte... ? Geht das irgendwie?

Achso, dann ja. Die bereiche links und rechts müssen halt die gleiche Hintergrundfarbe haben, dann kannst Du #main auch diese Hintergrundfarbe verpassen und es sieht so aus, als ob alle drei <div>s gleich weit nach unten gehen würden. Also dann halt das <div id="main"> doch noch drum herum.

Dass er das nicht kann konnte ich nachvollziehen,

min-width kann er jedenfalls nicht.

den von dir beschriebenen Effekt jedoch nicht.

Also ich habe den Effekt noch nie bei einem dreispaltigem Layout ausprobiert; bei einem zweispaltigen tritt er auf jeden Fall auf und bei einem dreispaltigen mit ziemlicher Sicherheit auch.

Gibt es sonst überhaupt keine Möglichkeit, dem IE das beizubringen,

Nicht, dass ich wüßte.

es schaut nähmlich bescheuert aus, wenn ich das Fenster soweit zusammenschiebe, dass die drei divs untereinander angezeigt werden.

Sie werden ja nicht untereinander angezeigt, zumindest nicht bei meinem Ansatz. Der IE setzt halt den ersten Inhalt, der etwas zu breit ist, unter das Ende der <div>s links und rechts, halt nur noch in der mittleren Spalte.

Viele Grüße,
Christian

[Philip]

Hallo Christian,

Achso, dann ja. Die bereiche links und rechts müssen halt die gleiche Hintergrundfarbe haben,

haben sie nicht ;-)

dann kannst Du #main auch diese Hintergrundfarbe verpassen und es sieht so aus, als ob alle drei <div>s gleich weit nach unten gehen würden. Also dann halt das <div id="main"> doch noch drum herum.

Laut Lemmy's Posting [pref:t=52197&m=287656] ist das nicht valide ?!? Wie bekomm ich dann die divs gleich hoch?

es schaut nähmlich bescheuert aus, wenn ich das Fenster soweit zusammenschiebe, dass die drei divs untereinander angezeigt werden.

Sie werden ja nicht untereinander angezeigt, zumindest nicht bei meinem Ansatz. Der IE setzt halt den ersten Inhalt, der etwas zu breit ist, unter das Ende der <div>s links und rechts, halt nur noch in der mittleren Spalte.

ich hab's jetzt mal hochgeladen, vielleicht kannst du dann besser nachvollziehen, was ich meine: http://metrox.de/design/vorlage2.html Wenn du das Fenster im IE auf ca. 180px Breite stellst iehst du's (wenn nicht poste ich mal einen Screenshot)

Was mir auch noch auffält, ist der Abstand den im IE das div content im Opera alle drei divs zum header und footer haben ?? auch div { margin:0; } bringt nichts...

mfg,
  Philip

[MudGuard]

Hi,

Laut Lemmy's Posting [pref:t=52197&m=287656] ist das nicht valide ?!? Wie bekomm ich dann die divs gleich hoch?

Lemmy hat Schmarrn erzählt. Siehe meine Antwort auf dieses Posting.

cu,
Andreas

[Philip]

Hallo Andreas,

Lemmy hat Schmarrn erzählt. Siehe meine Antwort auf dieses Posting.

Gut, aber auch mit der Verschachtelung bekomm ich es nicht hin.

mfg,
  Philip

[Peter Kaufmann]

Hallo Christian,

Also: Das <div id="main"> kannst Du weglassen. Desweiteren musst Du - um Dich jetzt nicht endlos zu verkrampfen, die Reihenfolge ändern:

<div id="nav">...</div>
<div id="side">...</div>
<div id="content">...</div>

diese Lösung finde ich so nicht grade optimal: Bei dieser Seitenauteilung bekomme ich in einem Text-Browser oder mit deaktivierten CSS den Inhalt der Seite erst nach einigen scrollen (insbesondere wenn die Navigation Zeilenumbrüche oder Absätze verwendet) zu sehen. Ich persönlich finde es ziemlich nervig, wenn man auf ansonst sehr gut gemachten Seiten z.B. mit lynx bei jeder neuen Seite den eigentlichen Inhalt erst suchen muss: Wo hört die Navigation auf? Ist das vielleicht jetzt eine Liste von Querverweisen zum Thema oder gehört das noch zur Navigation?
Bei deinem Vorschlag bekämme man dann auch jedes mal noch die "side" aufgedrängt: Meiner Erfahrung nach oft genug irgendwelche News des Kalibers: "Wir begrüssen den 1000 Besucher seid 1950 auf unseren Seiten!" oder "Ich habe mal das Design der Seite überarbeitet und die linke (das ist die gelbe) Spalte 3 Pixel breiter gemacht. Votet mein Design!" - das intressiert mich normalerweise nicht wirklich (vor allem mit einem Textbrowser).
Viel logischer finde ich da eine Aufteilung

<div id="content">...</div>
<div id="nav">...</div>
<div id="side">...</div>

und vielleicht jeweils ein Link am Anfang von "content" zur vorherigen / nächst logischen Seite und zur nächst höheren Inhaltsebene. Man könnte da aber auch auf direkt <link rel="...> verwenden.
Mit CSS kann man die div-Elemente mir Hilfe der aboluten Positionierung dann wieder für normale Surfer im gewohnten drei Spalten Layout anordenen. So oder so ähnlich:

#nav { position:absolute; left:0px; width:10em; }
#side { position:absolute; right:0px; width:10em; }
#content { position:absolute; left:10em; right:10em; }

Grüße,

Peter

[Jan H.]

Hallo,

<div id="nav">...</div>
<div id="side">...</div>
<div id="content">...</div>

....Inhalt der Seite erst nach einigen scrollen (insbesondere wenn die Navigation Zeilenumbrüche oder Absätze verwendet) zu sehen.....
<div id="content">...</div>
<div id="nav">...</div>
<div id="side">...</div>

Das ist wohl eher eine geschmackssache, ich finde es besser wenn die navigation im csslosen zustand am anfang steht da erwarte _ich_ sie eher als unten.

Aber du hast recht, dass es auch von den inhalten in den bereichen abhängt.
Wenn ich das gegebene beispiel nehme und #nav dei navigation enthält und #side irgendwelchen andern kram würde ich es vieleicht so:

<div id="nav">...</div>
<div id="content">...</div>
<div id="side">...</div>

machen.
Allgemeingültiges kann aber nicht sagen, es kommt halt auf den speziellen fall an.

Gruss, Jan aus Dresden

[Philip]

Hallo,

Das ist wohl eher eine geschmackssache, ich finde es besser wenn die navigation im csslosen zustand am anfang steht da erwarte _ich_ sie eher als unten.

Find ich eigentlich auch besser. Aber es allen recht zu machen ist leider nicht ganz einfach ...

Aber du hast recht, dass es auch von den inhalten in den bereichen abhängt.
Wenn ich das gegebene beispiel nehme und #nav dei navigation enthält und #side irgendwelchen andern kram würde ich es vieleicht so:

<div id="nav">...</div>
<div id="content">...</div>
<div id="side">...</div>

machen.

So wollte ich es auch machen, nur scheint es so nicht zu funktionieren. leider.

Gruss, Jan aus Dresden

mfg,
  Philip

[Jan H.]

Hallo,

<div id="nav">...</div>
<div id="content">...</div>
<div id="side">...</div>

machen.
So wollte ich es auch machen, nur scheint es so nicht zu funktionieren. leider.

Du könntest zb den linken und den rechten bereich absolut positionieren und den #content bereich im dokumenten fluss lassen und mit zb margin:0 15% 0 15%; in der breite anpassen.

Anders:
<div id="nav">...</div>
<div id="side">...</div>
<div id="content">...</div>

#nav{float:left;width:15%}
#side{float:right;width:15%}
#content{margin:0 15% 0 15%;}

Gruss, Jan aus Dresden

[Peter Kaufmann]

Hallo Jan,

Das ist wohl eher eine geschmackssache, ich finde es besser wenn die navigation im csslosen zustand am anfang steht da erwarte _ich_ sie eher als unten.

Aber du hast recht, dass es auch von den inhalten in den bereichen abhängt.

du hast im Prinzip recht: Eine zweckmässige Naviagtion am Anfang der Seite finde ich auch angebracht. Allerdings verstehe ich darunter wirklich nur eine Hand voll Links. In etwa: Starsteite, nächste/vorherige/übergeordnete Seite. Auf sehr vielen Seiten findet man aber "in der linken Spalte" eine Liste mit Links zu allen möglichen Themen der Präsenz (20 und mehr), ein Copyright Statement und noch die Adresse des Inhabers. O.K. in diesem Thread ging es wirklich nur um die Navigation, aber 20 Zeilen Naviagtion die überhaupt nichts mit dem Inhalt den ich suche zu schaffen haben finde ich immer noch zu viel.
Zur Illustration: Ich habe mir eben noch einmal http://www.spiegel.de  mit Lynx angesehen. Der eigentliche Inhalt fängt hier (mit meiner Auflösung von 25x80 Zeichen) erst auf der vierten Seite an und erschreckt sich auf der Indexseite nur über drei Seiten!

Allgemeingültiges kann aber nicht sagen, es kommt halt auf den speziellen fall an.

o.B.d.A richtig.

Grüße,

Peter

[Philip]

Hallo Peter,

an eine absolute Positionierung hab ich auch schon gedacht, nur stieß ich dabei u.a. auf das Problem, dass wenn ich das Fenster verkleinere, das div side die anderen divs überdeckt.
Ausserdem hatte ich das Problem, dass das div side nie ganz an das div content anschloss.

mfg,
  Philip

[molily]

Hallo Peter,

<div id="nav">...</div>
<div id="side">...</div>
<div id="content">...</div>

diese Lösung finde ich so nicht grade optimal: Bei dieser Seitenauteilung bekomme ich in einem Text-Browser oder mit deaktivierten CSS den Inhalt der Seite erst nach einigen scrollen (insbesondere wenn die Navigation Zeilenumbrüche oder Absätze verwendet) zu sehen.

Ich sehe kein Problem, wenn vor der Navigation ein Link zum Überspringen selbiger angebracht wird (»Zum [Haupt]Inhalt, Navigation überspringen« oder ähnliches). Aber auch wenn die Navigation nach dem Hauptinhalt kommt, würde ich zu einem solchen Link raten.

Ich persönlich finde es ziemlich nervig, wenn man auf ansonst sehr gut gemachten Seiten z.B. mit lynx bei jeder neuen Seite den eigentlichen Inhalt erst suchen muss: Wo hört die Navigation auf? Ist das vielleicht jetzt eine Liste von Querverweisen zum Thema oder gehört das noch zur Navigation?

Die Navigation sollte sowieso möglichst als solche gekennzeichnet sein und erkennbar sein, genauso gilt es für die fish-eye views (Links zu verwandten, weiterführenden Themen/Kategorien). Überschriften bieten sich an.

Mit der Position dieser strukturellen Teile im Dokumentaufbau haben die geäußerten Identifizierungsprobleme eher wenig zu tun, denke ich.

Bei deinem Vorschlag bekämme man dann auch jedes mal noch die "side" aufgedrängt: (...) das intressiert mich normalerweise nicht wirklich (vor allem mit einem Textbrowser).

Das ist tatsächlich unvorteilhaft, so denn in der dritten Spalte oft Metainformationen oder eben die genannten thematisch verwandten Querverweise untergebracht sind.

Viel logischer finde ich da eine Aufteilung

<div id="content">...</div>
<div id="nav">...</div>
<div id="side">...</div>

Nicht, wenn sich der Inhalt von #side auf #content bezieht (was er bestenfalls sollte).

und vielleicht jeweils ein Link am Anfang von "content" zur vorherigen / nächst logischen Seite und zur nächst höheren Inhaltsebene.

Ein bread crumb trail würde tatsächlich gut passen, wobei es vom Aufbau der Hauptnavigation abhängt (klappt sie auf oder zeigt sie nur die erste Hierarchieebene?).

Man könnte da aber auch auf direkt <link rel="...> verwenden.

Das sowieso.

Mathias

[Christian Seiler]

Hallo Peter,

diese Lösung finde ich so nicht grade optimal: Bei dieser Seitenauteilung bekomme ich in einem Text-Browser oder mit deaktivierten CSS den Inhalt der Seite erst nach einigen scrollen (insbesondere wenn die Navigation Zeilenumbrüche oder Absätze verwendet) zu sehen.

Deswegen mache ich auf meinen Seiten immer so etwas:

<body>
<div class="navihelper"><a href="#content">Navigation überspringen</a></div>
...
<div id="navigation"><a name="navigation"></a>
...
</div>
...
<div id="content"><a name="content"></a><a class="navihelper" href="#navigation">Zur Navigation</a>
...
</div>
...
</body>

Bei deinem Vorschlag bekämme man dann auch jedes mal noch die "side" aufgedrängt: Meiner Erfahrung nach oft genug irgendwelche News des Kalibers: "Wir begrüssen den 1000 Besucher seid 1950 auf unseren Seiten!" oder "Ich habe mal das Design der Seite überarbeitet und die linke (das ist die gelbe) Spalte 3 Pixel breiter gemacht. Votet mein Design!" - das intressiert mich normalerweise nicht wirklich (vor allem mit einem Textbrowser).

Die von mir genannte Realisierung mit float/margin und der angegebenen Reihenfolge macht meiner Erfahrung nach viel weniger Probleme als andere Lösungen, dort ist es sogar möglich, das ganze für Netscape 4 einigermaßen hinzubekommen. (Mit @import-Switch als einzige Browserweiche)

Deswegen halte ich diese "Navigation überpringen"-Links für vertretbar.

Viele Grüße,
Christian

[Siechfred]

Hi,

Deswegen mache ich auf meinen Seiten immer so etwas:
<div class="navihelper"><a href="#content">Navigation überspringen</a></div>

Ich handhabe es so, dass zuerst das Content-DIV und danach das Navi-DIV kommt, dann zeigt Lynx auch erst den Inhalt an und ein oder zwei Seiten weiter die Navigation.

Viele Grüße
Torsten

[Elessar]

Hi

Ich bin grad dabei meine Website auf XHTML 1.0 Strict umzustellen. Dabei möchte ich gleichzeitig das "alte" Tabellenlayout durch das "neue" CSS-div-Layout ersetzen.
Dabei hab ich nun ein Problem:

So soll das Ganze mal aussehen:
_____________________________________________
| header                                      |
|_____________________________________________|
| nav.   | content                    | side  |
|        |                            |       |
|        |                            |       |
|        |                            |       |
|        |                            |       |
|________|____________________________|_______|
| footer                                      |
|_____________________________________________|

Ich hatte neulich auch mal die Idee, so ein Layout komplett mit CSS zugestalten. Nachdem ich stundenlang rumpoobiert hab. Hatt ich's dann soweit, dass es gut aussah. Problem dabei: Beim verkleinern des Fensters verschoben sich die einzelnen div's. Dann hab ich das Ganze mit Tabellen gemacht und war in wenigen Minuten fertig, wobei ich keinen Nachteil zu den div's erkennen konnte. Prozentuale Angaben für die Tabelle und schon war sie skalierbar.
Mfg

Elessar

P.S.: Wie das jetzt genau bei XHTML aussieht weiß ich nicht, müsste doch aber auch valide sein, oder?