nicht angemeldet
liquide - hover-navigation
Struppihiho,
leider zum tausendsten mal die frage, nach einem völlig liquiden zweispalten-layout mit einer liquiden hover-navigation.
dabei sollen sich zwei spalten ergebene (navigation und inhalt, dabei ist "reihenfolge" rechts oder links noch nicht ganz klar), dies soll mittig ausgerichtet werden und eine maximale breite haben.
nun soll wenn die maximale bzw. minimale breite unterschritten wird die navigation (rechts/links) auf jedenfall über dem inhalt angezeigt werden und am besten unter dem inhalt noch ein anker nach oben erscheinen.
wie setze ich das erst einmal um?
was mache ich, wenn im inhaltsbereich, einzelne teaser, lange überschriftswörter oder textareas o.ä. zu wenig platz haben? wie ist da die liquide lösung?
nicht zuletzt fehlt mir die idee zu einer liquiden hover-navigation mit n ebenen. vermutlich muss ich das mit javascript irgendwie aufziehen und wenn javascript nicht zur verfügung steht irgendwie anders lösen ... doch was übersichtliches bietet sich da wie liquide an?
ich weiß das wird in der art oft gefragt, aber vor lauter bäumen sehe ich kein wald und kann mit meinem (nicht-)wissen nicht einschätzen welche lösung wirklich liquide, valide und vertretbar ist.
n8
-
Stichwort "liquides Spaltenlayout": Was ist denn da heute der Standt der Technik? Der Königsweg?
Kenne nur FauxColumns als Idee und YAML als Spaltenlayout-Lösungen.
Gibt es mittlerweile nicht was, was als eine Art CSS-Klassen-Baukasten-Prinzip nach Anpassung der gewünschten min- und max-width liquide verschachtelte Spalten produziert, die sich dann bei wenig Platz in gewünschter Reihenfolge untereinander schieben?
-
leider zum tausendsten mal die frage, nach einem völlig liquiden zweispalten-layout mit einer liquiden hover-navigation.
Tja ich habe mir da meine eigene Lösung gebastelt.
Link steht im Head der Message.Einfach gesagt: Ohne JS gibt es kein wirklich liquides Design, ausser man beschränkt sich auf reine Block-Boxen.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische -
dabei sollen sich zwei spalten ergebene (navigation und inhalt, dabei ist "reihenfolge" rechts oder links noch nicht ganz klar), dies soll mittig ausgerichtet werden und eine maximale breite haben.
nun soll wenn die maximale bzw. minimale breite unterschritten wird die navigation (rechts/links) auf jedenfall über dem inhalt angezeigt werden und am besten unter dem inhalt noch ein anker nach oben erscheinen.
wie setze ich das erst einmal um?Das geht nicht, weder mit einem flüssigen Layout noch anders. Dazu brauchst du Javascript. Wenn es nur darum geht, bei zu wenig Platz die Bereiche übereinander zu stellen, dann ist float ist ausreichend.
was mache ich, wenn im inhaltsbereich, einzelne teaser, lange überschriftswörter oder textareas o.ä. zu wenig platz haben? wie ist da die liquide lösung?
z.b. overflow:auto, allerdings frage ich mich warum eine Textarea zu wenig Platz haben sollte, die kannst du ja entsprechend formatieren.
nicht zuletzt fehlt mir die idee zu einer liquiden hover-navigation mit n ebenen. vermutlich muss ich das mit javascript irgendwie aufziehen und wenn javascript nicht zur verfügung steht irgendwie anders lösen ... doch was übersichtliches bietet sich da wie liquide an?
Da kommt es drauf an, was du unter n-Ebenen verstehst, bzw. wo in dem Fall das Problem sein soll? Was ist eigentlich eine hover-navigation? Schwebt dir da etwas spezielles vor?
Struppi.
-
Hallo,
Wenn es nur darum geht, bei zu wenig Platz die Bereiche übereinander zu stellen, dann ist float ist ausreichend.
Aber ab welcher mindestbreite setze ich die Bereiche untereinander? In em eine min-width? Und standardmäßig die Breite in %? Und wieviel em als min-width "darf" man dann voraussetzen? Aber z.B. eine Seitenspalte mit kleine Login und Suchfeld und Newsticker sehe schon blöd aus, wenn sich die Breite jedesmal ändert, aber wie ich da was sinnvolles an min-max- und width vorgebe?
Wie erreiche ich nicht ineinanderlaufende Bereiche mit float, die sich dennoch bei zu wenig Platz untereinander schieben?
Und kann ich bei 3 Spalten erreichen, dass bei zu wenig Platz zuerst die Linke und Rechte nebeneinander und darunter die Mittlere angezeigt wird?
»» was mache ich, wenn im inhaltsbereich, einzelne teaser, lange überschriftswörter oder textareas o.ä. zu wenig platz haben? wie ist da die liquide lösung?
z.b. overflow:auto, allerdings frage ich mich warum eine Textarea zu wenig Platz haben sollte, die kannst du ja entsprechend formatieren.
Gut dann habe ich halt ein Scrollbalken, ok. Naja eine Textarea wird ja ab einer bestimmten Breite quasi unbenutzbar. Oder wenn ich an lange Überschriften oder input-felder denke?
»» nicht zuletzt fehlt mir die idee zu einer liquiden hover-navigation mit n ebenen. vermutlich muss ich das mit javascript irgendwie aufziehen und wenn javascript nicht zur verfügung steht irgendwie anders lösen ... doch was übersichtliches bietet sich da wie liquide an?
Da kommt es drauf an, was du unter n-Ebenen verstehst, bzw. wo in dem Fall das Problem sein soll? Was ist eigentlich eine hover-navigation? Schwebt dir da etwas spezielles vor?
So wie das ach so tolle MS-Startmenü, mit Maus drüberfahren und die Unterpunkte erscheinen. Mit n-Ebenen meine ich beliebig verschachtelt. Würde das ganze irgendwie generieren lassen (drupal) und hätte dabei gerne so eine hover-navigation, die aber auch ohne js geht und auch immer bedienbar ist z.B. wenn das jeweilige Untermenü, das gerade gehovered wird so lang ist, dass es von der Höhe nicht auf den aktuellen anzeigebereich passt.
Der Vorschlag von w@€r mit so einem Baukastenprinzip klingt verlockend und heutzutage dürfte es doch schon fast soetwas vorgefertigt geben?!
Schönen Nachmittag
-
» Wenn es nur darum geht, bei zu wenig Platz die Bereiche übereinander zu stellen, dann ist float ist ausreichend.
Aber ab welcher mindestbreite setze ich die Bereiche untereinander? In em eine min-width? Und standardmäßig die Breite in %? Und wieviel em als min-width "darf" man dann voraussetzen? Aber z.B. eine Seitenspalte mit kleine Login und Suchfeld und Newsticker sehe schon blöd aus, wenn sich die Breite jedesmal ändert, aber wie ich da was sinnvolles an min-max- und width vorgebe?
Ich glaub du machst dir zuviel Gedanken. Dreispalter gibt es seit Urzeiten im Netz, es gibt auch unzählige Konzepte, aber worüber ich mir zumindest keinen Kopf machen würde ist, was passiert, wenn der Nutzer sein Fenster auf eine unbenutzbare Größe einstellt. Es kann ja nicht dein Problem sein, fehlerhafte Bedienung zu beheben.
Was die Breite angeht, tendiere ich zu einer Angabe in Prozent, da es ja in der Regel um einer harmonische Aufteilung der verfügbaren Fläche geht. em benutze ich, wenn der Bereich möglichst klein sein soll, dann versuche ich die em Angabe an das längste Wort anzupassen.
Wie erreiche ich nicht ineinanderlaufende Bereiche mit float, die sich dennoch bei zu wenig Platz untereinander schieben?
Wie gesagt, ich halte zu wenig Platz nicht für mein Problem.
Und kann ich bei 3 Spalten erreichen, dass bei zu wenig Platz zuerst die Linke und Rechte nebeneinander und darunter die Mittlere angezeigt wird?
Nicht das ich wüßte.
» »» was mache ich, wenn im inhaltsbereich, einzelne teaser, lange überschriftswörter oder textareas o.ä. zu wenig platz haben? wie ist da die liquide lösung?
»
» z.b. overflow:auto, allerdings frage ich mich warum eine Textarea zu wenig Platz haben sollte, die kannst du ja entsprechend formatieren.Gut dann habe ich halt ein Scrollbalken, ok. Naja eine Textarea wird ja ab einer bestimmten Breite quasi unbenutzbar. Oder wenn ich an lange Überschriften oder input-felder denke?
Ich kann mich nur wiederholen, ich halte meine Besucher für so intelligent, dass sie ihren Browser bedienen können und wenn nicht, sehe ich es nicht als meine Aufgabe die Dummheit zu unterstützen. Wenn die Seite im üblichen Rahmen benutzbar ist, ist doch alles ok.
Der Vorschlag von w@€r mit so einem Baukastenprinzip klingt verlockend und heutzutage dürfte es doch schon fast soetwas vorgefertigt geben?!
Ja, wie gesagt, mehrspaltige Layouts sind nichts ungewöhnliches und es gibt etliche Methoden dies umzusetzen.
Struppi.
-
Hi,
Ich glaub du machst dir zuviel Gedanken.
Ok ich glaube da ist was dran, ich danke dir mich von meiner ideologischen Erbsenzählerei etwas weggebracht zu haben.
Prozentangaben für die eigentlichen width-Werte scheint schon sinnvoll, aber ich meinte jetzt eher die max und min-width in em, oder? Damit verteilt sich bei genügend Platz alles harmonisch und ist es ein widescreen muss man keine ellenlangen Zeilen lesen wegen der max-width. Doch welche Werte sind dort wohl vertretbar?
min- und max-width für den IE ist halt auch nicht so schön ... wobei ich min-width schon benötige, weil mein Layout mittig zentriert sein soll, bei Prozentangaben und schmalem Browserfenster wärs dann schon sinnvoll bei Bedarf den ganzen Platz ohne 20% Margin zu nutzen.»» Der Vorschlag von w@€r mit so einem Baukastenprinzip klingt verlockend und heutzutage dürfte es doch schon fast soetwas vorgefertigt geben?!
Ja, wie gesagt, mehrspaltige Layouts sind nichts ungewöhnliches und es gibt etliche Methoden dies umzusetzen.Königsweg? Faux-Columns um wirkliche Spalten zu bekommen? Oder was ist da so der Stand der Technik?
gruß
P.S.: 3 Spalten kriege ich dann halt nur in der Reihenfolge links, rechts, mitte untereinander angezeigt oder? Die erste entsprechend gefloatet, dann schiebt sich der mittlere dazwischen ...
-
Wieviel Links, als Tab-Navigation darf man z.B. in der Breite voraussetzen? Ansonsten müsste ich ja ganz auf so eine Tab-Navigation verzichten oder ein zerschossenes Layout in Kauf nehmen ...
-
hi,
also nach einigem googlen, habe ich keine lösung gefunden, die meinen Ansprüchen so wirklich gerecht wird:
- komplett mittig zentriert (mit 80% width, bei Unterschreitung der min-width soll einfach der Rand aufgrund des Zentrierens wegfallen), womöglich max-width um lange Zeilen zu vermeiden
- 3 durchgehende Spalten alle in % breite, was bei "breiterem" Inhalt in einer Spalte?
- alle Spalten gleich lang
- bei wenig Platz sollen sich die Spalten untereinander schieben
- und das valide, für alle browser zumindest "benutzbar" und ohne js (außer womöglich der min-width für IE6lt)
Irgendwie scheine ich nicht richtig zu suchen. Ich habe auch nichts gefunden, was all dies als Anleitung oder Erläuterung oder mit Ansätzen vorbereitet. Leervorlage wäre natürlich Luxus, aber mit einer Anleitung würde ich mirs auch bauen, aber muss ich da heutzutage wirklich noch alle Einzelbedingungen zusammensuchen? Wie macht den Wikipedia das ganze, dort finde ich die Liquidität gut umgesetzt ...
Gruß
-
-
-
-