nicht angemeldet
3-spaltiges Layout: Reihenfolge der Spalten im Quellcode
0 0 0 0 
Gunnar Bittersmann
0
0 Gunnar Bittersmann
0
3-spaltiges Layout: Reihenfolge der Spalten im Quellcode
Hi,
ich habe ein 3-spaltiges Layout wie dieses SelfHTML-Beispiel.
Wenn man nun die Seite mal mit einem Outliner anschaut sind die Überschriften der linken und rechten Spalten vor den Überschriften der mittleren Spalte gelistet.
Da in der mittleren Spalte aber der eigentliche Inhalt ist würde es Sinn machen diese Überschriften als erstes gelistet zu bekommen.
Wenn ich aber die Reihenfolge der Spalten im Quellcode entsprechend tausche sehe ich keine Möglichkeit mehr bei der Darstellung die ursprüngliche Reihenfolge zu haben. Außer ich gebe der mittleren Spalte eine feste Breite, was ich aber nicht machen werde.
Wie kann man das lösen?
~dave
-
-
Hi,
<!doctype html> <html> <head> <title></title> <style type="text/css"> [code lang=css] body { max-width:800px; min-width:400px; margin:0 auto; } .aside { float:left; background:blue; width:100px; } .content { float:left; background:red; position:relative; left:100px; } .section { float:right; background:green; width:100px; }</style>
</head>
<body>
<div class="content">bar</div>
<div class="aside">foo</div>
<div class="section">baz</div>
</body>
</html>[/code]Somit sind
.contentund.sectionschon richtig positioniert.
.asideallerdings nicht.Wenn ich allen Elementen wie von dir empfohlen
float:leftoder allenfloat:rightgebe kann ich sogar nur 1 Element richtig positionieren.Was mache ich falsch?
Wie schaffe ich es auch.asiderichtig zu positionieren?~dave
-
Om nah hoo pez nyeetz, dave!
Somit sind
.contentund.sectionschon richtig positioniert..asideallerdings nicht.Wie soll denn die Reihenfolge der Spalten letztlich sein?
Matthias
--
1/z ist kein Blatt Papier.
-
@@Matthias Apsel:
nuqneH
Wie soll denn die Reihenfolge der Spalten letztlich sein?
„Da in der mittleren Spalte aber der eigentliche Inhalt ist würde es Sinn machen diese Überschriften als erstes gelistet zu bekommen.“
Also mittlere Spalte zuerst, dann die äußeren (über deren Reihenfolge wurde nichts gesagt).
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
Hi,
das gleiche Problem habe ich eigentlich auch mit 2 Spalten.
Hier das ganze weiter vereinfacht:<!doctype html> <html> <head> <title></title> <style type="text/css"> [code lang=css] body { max-width:800px; min-width:400px; } .aside { float:left; background:blue; width:100px; } .content { float:left; background:red; position:relative; left:100px; }</style>
</head>
<body>
<div class="content">bar</div>
<div class="aside">foo</div>
</body>
</html>[/code]Die Spalte .aside sollte ganz links im body sein und .content rechts neben .aside.
Die Position von .content stimmt jetzt, durch position:relative und entsprechenden wert für left.
Nur sehe ich keine Möglichkeit .aside ganz links im body zu positionieren, ohne die Breite von .content zu wissen.Ich nehm dann einfach Tabellen :P
~dave
-
Die Spalte .aside sollte ganz links im body sein und .content rechts neben .aside.
Die Position von .content stimmt jetzt, durch position:relative und entsprechenden wert für left.
Nur sehe ich keine Möglichkeit .aside ganz links im body zu positionieren, ohne die Breite von .content zu wissen..ontent muss die verfügbare Breite einnehmen und einen entsprechenden padding oder margin in der Breite der aside-Spalte haben. links relativ um die Breite der aside-Spalte verschoben werden
Die aside-Spalte positionierst du dann mit position relative nach ganz links (um 100% des Elternelement und verpasst ihm zusätzlich rechts einen negativen margin um seine eigene Breite.
Oder hab' ich da einen Denkfehler?
Ich nehm dann einfach Tabellen :P
display: table-cell kennst du aber?
-
@@suit:
nuqneH
Ich nehm dann einfach Tabellen :P
display: table-cell kennst du aber?
Die Zeichenfolge :P kennst du aber?
Bei einer Tabelle stehen die Zellen von links nach rechts (bzw. von rechts nach links) im Markup, nicht aber wie gewünscht die mittlere zuerst.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
Hi,
.ontent muss die verfügbare Breite einnehmen und einen entsprechenden padding oder margin in der Breite der aside-Spalte haben. links relativ um die Breite der aside-Spalte verschoben werden
Damit es die komplette verfügbare Breite einnimmt darf es kein float haben oder?
padding- bzw. margin-left UND links relativ entsprechend der Breite der aside-Spalte ist doch doppelt oder?
Wenn ich beides angebe ragt das Element auf jeden Fall über den body hinaus.Die aside-Spalte positionierst du dann mit position relative nach ganz links (um 100% des Elternelement und verpasst ihm zusätzlich rechts einen negativen margin um seine eigene Breite.
Insgesamt denkst du dir das also so?
body { max-width:800px; min-width:400px; } .aside { float:left; background:blue; width:100px; position:relative; left:-100%; margin-right:-100px; } .content { position:relative; background:red; left:100px; margin-left:100px; }Oder hab' ich da einen Denkfehler?
Wenn ich das so umgesetzt habe wie du dir gedacht hast, dann ja.
Allerdings hatte ich Probleme deiner Beschreibung so ganz zu folgen.~dave
-
-
-
-
-
-
@@dave:
nuqneH
Wenn ich aber die Reihenfolge der Spalten im Quellcode entsprechend tausche sehe ich keine Möglichkeit mehr bei der Darstellung die ursprüngliche Reihenfolge zu haben. Außer ich gebe der mittleren Spalte eine feste Breite, was ich aber nicht machen werde.
Wie kann man das lösen?
<body> <h1>example.com</h1> <h2>Hauptinhalt</h2> <p>Lorem ipsum dolor sit amet.</p> <div id="foo"> <h2>linke Spalte</h2> <p>Lorem ipsum dolor sit amet.</p> </div> <div id="bar"> <h2>rechte Spalte</h2> <p>Lorem ipsum dolor sit amet.</p> </div> </body>@media screen and (min-width: 760px) { html { position: relative; } body { margin-left: 200px; /* breite der linken Spalte plus etwas Abstand */ margin-right: 300px; /* breite der rechten Spalte plus etwas Abstand */ } #foo /* linke Spalte */ { left: 40px; position: absolute; top: 0; width: 120px; } } #bar /* rechte Spalte */ { position: absolute; right: 40px; top: 0; width: 220px; } }Das Ganze aber nur, wenn für die Inhaltsspalte noch genügend Breite vorhanden ist, deshalb per Media-Query.
Bei schmalen Viewport stehen dann Hauptinhalt, #foo und #bar untereinander, in der Reihenfolge. Wobei man die Reihenfolge von #foo und #bar im Markup auch vertauschen kann, ohne dass sich die Darstellung bei breiten Viewports ändert.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi,
vielen Dank für deine Lösung.
Wenn aber nun die linke oder rechte Spalte höher ist als die mittlere bekomme ich keine Scrollbalken.
~dave
-
@@dave:
nuqneH
Wenn aber nun die linke oder rechte Spalte höher ist als die mittlere bekomme ich keine Scrollbalken.
?? Ich schon.
In welchem Browser sollte das der Fall sein?
(Allerdings kennen IE < 9 keine Media-Queries.)
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi,
Irgendwie war ich wohl zu dämlich zu testen.
Funktioniert auf jeden Fall, Danke!~dave
-
-
-
-
Wenn man nun die Seite mal mit einem Outliner anschaut sind die Überschriften der linken und rechten Spalten vor den Überschriften der mittleren Spalte gelistet.
Und was ist daran so schlimm?
Es hat einige praktische Auswirkungen, hauptsächlich für Screenreader-Nutzer und bei Tastaturbedienung. Diese Nutzer interessiert die Navigation nicht unbedingt – zumindest nicht auf Unterseiten. Allerdings ist eine andere Reihenfolge der Blöcke noch keine Lösung dieses Problems. Zusätzlich sinnvoll ist eine Sprungnavigation, die zwischen den Blöcken wechseln lässt. Ferner sollten die Blöcke korrekt ausgezeichnet und überschrieben sein, sodass eine sinnvolle Nutzung der in Browser und Screenreader eingebauten Outline-Navigation möglich ist.
Mathias