nicht angemeldet
liquide und valide Spalten mal wieder
Hallo,
ich bastel gerade an einem schlichten Layout.
Ursprungsgedanke war ein zweispaltiges Layout Navigation|Content. Mit float könnte ich dies erreichen und dank overflow sogar gleich lange Spalten erreichen. Jedoch ging mir hierbei das fließende Layout verloren, i.S.v. bei einem schmalen Viewport wird nun die Content-Spalte nichtmehr unter die Navigationsspalte gesetzt. Also habe ich gedacht, gut mache ich nur eine geflotete Navigationsspalte, die vom Inhalt umflossen wird.
Nun stehe ich aber vor dem nächsten Problem. Ich möchte eine Artikelübersichtseite gestalten, wo von jedem Artikel ein Ausschnitt des textes zitiert wird. Diese sollen in Spalten, die gleich hoch sind angeordnet sein, sollen aber auch, bei einem schmalen Viewport untereinander angezeigt werden. Ist dies mit validem saubern CSS irgendwie zuverlässig möglich und am besten auch noch unter Berücksichtigung der Semantik?
Also das soll so aussehen:
_________________________________
| Navigation | Inhaltsüberschrift |
|------------| Inhaltseinleitung |
| Inhaltseinleitungfortsetzung |
| |
| Artikel 1 | Artikel 2 | Artikel |
| | | 3 |
| |
| Artikel 4 | Artikel 5 | Artikel |
| bla ... | | 6 |
| ... bla | | |
| |
----------------------------------
wird der Viewport zu klein sollen im Sinne eines liquid Designs, die Navigation, die Inhaltsüberschrift, die Inhaltseinleitung, die Inhaltseinleitungfortsezung, Artikel 1 bis 6 untereinander angezeit werden.
Gruß
-
wird der Viewport zu klein sollen im Sinne eines liquid Designs, die Navigation, die Inhaltsüberschrift, die Inhaltseinleitung, die Inhaltseinleitungfortsezung, Artikel 1 bis 6 untereinander angezeit werden.
min-width und float kennst du?
-
Und wie weiß ich vorher, wie hoch die Artikel werden, dass ich sie einheitlich hoch machen kann?
-
-
Nun stehe ich aber vor dem nächsten Problem. Ich möchte eine Artikelübersichtseite gestalten, wo von jedem Artikel ein Ausschnitt des textes zitiert wird. Diese sollen in Spalten, die gleich hoch sind angeordnet sein, sollen aber auch, bei einem schmalen Viewport untereinander angezeigt werden. Ist dies mit validem saubern CSS irgendwie zuverlässig möglich und am besten auch noch unter Berücksichtigung der Semantik?
Also das soll so aussehen:
_________________________________
| Navigation | Inhaltsüberschrift |
|------------| Inhaltseinleitung |
| Inhaltseinleitungfortsetzung |
| |
| Artikel 1 | Artikel 2 | Artikel |
| | | 3 |
| |
| Artikel 4 | Artikel 5 | Artikel |
| bla ... | | 6 |
| ... bla | | |wird der Viewport zu klein sollen im Sinne eines liquid Designs, die Navigation, die Inhaltsüberschrift, die Inhaltseinleitung, die Inhaltseinleitungfortsezung, Artikel 1 bis 6 untereinander angezeit werden.
float ist die übliche Antwort.
Deine Artikel-Darstellung hat auch andere potentielle Lösungen:
a) display:inline-block
verstehen nicht alle browser,
FF2 braucht seine proprietäre Variante
b) display: -moz-inline-block;
Die FF2 Version, sollte a) vorangehen.
c)zoom:1;
*display:inline;
Siehe Kommentar untenIch würde das mal recherchieren gehen. Verschiedene Kompatibilitäts-Hacks wurden dazu publiziert.
Kompatibilität Übersicht
http://www.quirksmode.org/css/display.htmlZusammenfassung, für MSIE
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
<zitat>
However, if you trigger hasLayout on a block element, and then set it to display:inline, it magically becomes an inline-block in IE! By using the *property hack (which I love so well), you can hide the display:inline from all non-IE browsers effortlessly.Here’s the code, in all its brief loveliness:
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
</zitat>Ich weiss allerdings nicht, ob das das Ende der Kompatibilitätsgeschichte ist. Nimmt mich Wunder, was andere dazu sagen.
mfg Beat
-
Yerf!
float ist die übliche Antwort.
Wobei die andere Lösung sicherlich auch in Betracht gezogen werden sollte, da sie "anders" reagiert und neue Möglichkeiten eröffnet.
a) display:inline-block
verstehen nicht alle browser,
FF2 braucht seine proprietäre VarianteDer FF2 ist an der Stelle wirklich das Ärgerliche, andere browser unterstüzen das schon länger (auch wenns beim IE eher Bug als feature ist...)
b) display: -moz-inline-block;
Die FF2 Version, sollte a) vorangehen.Hier sollte man auch mit -moz-inline-box oder -moz-inline-stack experimentieren, gerade letzteres scheint besser zu funktionieren.
c)zoom:1;
*display:inline;
Siehe Kommentar untenIch würde das mal recherchieren gehen. Verschiedene Kompatibilitäts-Hacks wurden dazu publiziert.
Auch hier im Forum gibts einiges dazu.
Ich weiss allerdings nicht, ob das das Ende der Kompatibilitätsgeschichte ist. Nimmt mich Wunder, was andere dazu sagen.
Meiner Ankündigung in dem verlinkten Thread sind bisher noch keine Taten gefolgt :-( ...vielleicht wird's ja über Weihnachten was.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
-
-
... das auch so lösen wie bei einer Bildergalerie? Da gibts doch irgendwas, dass ich eine Liste mache und dann inline-Objekte oder so? Ist doch anscheinend semantisch und überhaupt so eine gute Lösung?
-
Ist doch anscheinend semantisch und überhaupt so eine gute Lösung?
ein bild, welches nur der dekoration dient per <img />-element einzubinden ist semantisch imho nie sinnvoll
die richtige variante wäre ein skalierbares hintergrundbild, welches aber mit den aktuellen technischen möglichkeiten wie bereits erwähnt wurde nicht umsetzten lässt - darum ist eine der vorgeschlagenen krücken notwendig
-
Ich meine vergleichbar zu einer Bildergalerie, wo ich mit einer Liste aus lauter inline-Elementen eine Art Spalten-Layout realisiere, keine Layout-Bilder. Der OP könnte doch statt Bilder in einer Galerie für seine Artikel-Spalten mit gleicher breite höhe eventuell mit diesem Muster arbeiten? Keine Ahnung wie das geht ...
Und für das übergeordnete Layout also links gefloatete Navigation und Inhalt, wo solang der Platz reicht beide Spalten gleich hoch sind, dann bei weniger Platz das die Navigation umflossen wird und wenn noch weniger Platz ist der Inhalt unter der Navigation angezeigt wird, habe ich leider keinen sauberen Vorschlag und da JavaScript zu nehemen find ich nicht so sauber, also muss man Spaltenlayout wohl lassen?
-
Ich meine vergleichbar zu einer Bildergalerie, wo ich mit einer Liste aus lauter inline-Elementen eine Art Spalten-Layout realisiere, keine Layout-Bilder. Der OP könnte doch statt Bilder in einer Galerie für seine Artikel-Spalten mit gleicher breite höhe eventuell mit diesem Muster arbeiten? Keine Ahnung wie das geht ...
der haken ist die dynamische länge der spalten, das ist nicht ganz so trivial - das ist die sache, die beat erwähnt hat
-
Yerf!
Der OP könnte doch statt Bilder in einer Galerie für seine Artikel-Spalten mit gleicher breite höhe eventuell mit diesem Muster arbeiten? Keine Ahnung wie das geht ...
Bei gleicher Höhe reicht es die Blöcke mit den Artikeln per float:left anzuordnen. Wenn die Höhe jedoch unterschiedlich sein kann wird es zu komischen Anordnungen kommen. Hier bietet sich display:inline-block an, da es die Anordnung in Zeilen organisiert. Die Ausrichtung der Blöcke innerhalb der Zeile lässt sich dann per vertical-align steuern (hier würde sich wohl "top" anbieten)
Und für das übergeordnete Layout also links gefloatete Navigation und Inhalt, wo solang der Platz reicht beide Spalten gleich hoch sind, dann bei weniger Platz das die Navigation umflossen wird und wenn noch weniger Platz ist der Inhalt unter der Navigation angezeigt wird, habe ich leider keinen sauberen Vorschlag und da JavaScript zu nehemen find ich nicht so sauber, also muss man Spaltenlayout wohl lassen?
Ich würde da erst mal ein "standard" Float-Layout nehmen, das sollte schonmal eine Annäherung bieten. Evtl. noch etwas Faux-Columns dazu und wenn's dann noch nicht 100%ig gefällt mit etwas Java-Script nachwürzen.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
-
-
-
-
gelungenes Beispiel:
http://www.messiemother.com/weiß nicht welcher Mittel sich das bedientt, aber das Verhalten beim Skalieren ist einfach genial, sogar der Banner passt sich an.
Vielleicht kannst du ja daran studieren? Oder es kann dir jemand dabei helfen ...
amd
-
gelungenes Beispiel:
weiß nicht welcher Mittel sich das bedientt,
javascript
aber das Verhalten beim Skalieren ist einfach genial, sogar der Banner passt sich an.
ich kann ohne javascript kein derartiges verhalten feststellen, mit javascript reagiert "springt" die seite und wird nicht dynamisch per css skaliert (wenn nur der banner nachkorrigiert würde, wärs ja noch vertretbar)
Vielleicht kannst du ja daran studieren? Oder es kann dir jemand dabei helfen ...
lösungen wurden bereits genannt - die lösung die in diesem beispiel verwendet wird (javascript) ebenfalls, ich würde sie allerdings als etwas unpraktisch bezeichnen - idealerweise nicht daran studieren
-