nicht angemeldet
float
Hallo Forum!
Besteht die Möglichkeit, per CSS folgendes zu lösen?
Ich habe 3 Blockelemente, die nebeneinander floaten und eine unterschiedliche Höhe haben. Wenn die Elmente nebeneinander auf den Bildschirm passen, sollen alle einen gerade vertikalen Abschluss haben, also ca. so:
--------------------------------------
| | | |
| | | |
| 1 | | |
| | | 3 |
|-----| | |
| 2 | |
| | |
| | |
| |--------|
| |
| |
|---------------------|
Das kriegt man ja mit margins problemlos hin, allerdings stören diese, wenn die Bildschirmbreite nicht ausreicht.Bei kleineren Viewports sollte das ganze am besten so aussehen:
-------
| |
| |
| 1 |
| |
|-----|---------------|
| |
| |
| |
| |
| |
| 2 |
| |
| |
| |
| |
| 3 |
| -------- |
Also ohne dass die Abstände wirken. Ich hoffe es ist klar, was ich meine. Ansonsten einfach nochmal fragen.
Wie könnte ich das hinkriegen? Also ohne dass bei ausreichend großem Bildschirm der Inhalt von Container 2 unter dem von 1 erscheint, bei kleineren Bildschirmen sich allerdings der komplette Container drunterschiebt?
Gruß aus Iserlohn
Martin
-
Hallo Martin,
hilft dir für den Anfang vielleicht der Artikel von Dirk?
Mit freundlichen Grüßen,
André-
Hallo!
hilft dir für den Anfang vielleicht der Artikel von Dirk?
Leider nicht, die Reihenfolge der Elemente ist schon IMHO in Ordnung, es geht mir jetzt nur noch um Darstellungsprobleme bei kleineren Browserfenstern.
Gruß aus Iserlohn
Martin
-
Hallo,
Leider nicht, die Reihenfolge der Elemente ist schon IMHO in Ordnung, es geht mir jetzt nur noch um Darstellungsprobleme bei kleineren Browserfenstern.
wenn es dir darum geht dass die Elemente sich nicht überlappen
und die Reihenfolge 1,3,2 noch brauchbar ist kannst du ja mal
Drei Spalten Layout per CSS und XHTML CSS-Layout Drei Spalten anschauen.Grüsse
Cyx23
-
Hi!
wenn es dir darum geht dass die Elemente sich nicht überlappen
und die Reihenfolge 1,3,2 noch brauchbar ist kannst du ja mal
Drei Spalten Layout per CSS und XHTML CSS-Layout Drei Spalten anschauen.Sorry, aber die Beispiele sind ebenso wie die SELFHTML-CSS-Layouts fü rmich unbrauchbar. Ich werde mich später (kann auch nächste Woche werden) mal in Ruhe hinsetzen und das Problem genauer formulieren. Vielleicht komm ich dabei ja auch selbst auf eine Lösungsmöglichkeit.
Gruß aus Iserlohn
Martin
-
-
-
-
Hi,
Also ohne dass die Abstände wirken. Ich hoffe es ist klar, was ich meine. Ansonsten einfach nochmal fragen.
Wie könnte ich das hinkriegen? Also ohne dass bei ausreichend großem Bildschirm der Inhalt von Container 2 unter dem von 1 erscheint, bei kleineren Bildschirmen sich allerdings der komplette Container drunterschiebt?
ich glaube, Dich verstanden zu haben. ;-)
Diesem Problem hatte ich mich erst kürzlich aufgrund einer Kritik hier im Forum bei meinen Seiten unter /web/ gewidmet und habe leider nur eine Javascript-Lösung gefunden. Kannst es Dir ja mal ansehen. Die Funktion wird onload aufgerufen, d.h. nach Verkleinerung des Fensters hat der unter die Navigation gesprungene Inhaltscontainer zunächst noch sein margin (und seine dann unpassende prozentuale Breite); du müßtest also reloaden, um das zu ändern. Dies halte ich aber für sinnvoller, als ständig die Breite zu überprüfen und unnötig Resourcen zu verbrauchen, denn der Normalfall ist ja, daß das Fenster nicht nachträglich in der Größe verändert wird.
Eine reine CSS-Lösung wäre mir lieber, aber da die Seiten auch so noch gut nutzbar sind, halte ich den Einsatz von Javascript nicht allzu verwerflich.
Das Script funktioniert übrigens so, daß ich die (variable) Breite des Inhaltscontainers überprüfe und wenn die (empirisch ermittelte und hier angegebene) Mindestbreite unterschritten wird, kommt es zum Umbruch und einige CSS-Definitionen werden geändert.
Leider muß hierbei zwischen IE und anderen Browsern unterschieden werden, da der IE zum einen später umbricht und zum anderen hier auch noch andere Eigenschaften geändert werden mußten.freundliche Grüße
Ingo-
Hi!
ich glaube, Dich verstanden zu haben. ;-)
Das freut mich :-)
Diesem Problem hatte ich mich erst kürzlich aufgrund einer Kritik hier im Forum bei meinen Seiten unter /web/ gewidmet und habe leider nur eine Javascript-Lösung gefunden. Kannst es Dir ja mal ansehen. Die Funktion wird onload aufgerufen, d.h. nach Verkleinerung des Fensters hat der unter die Navigation gesprungene Inhaltscontainer zunächst noch sein margin (und seine dann unpassende prozentuale Breite); du müßtest also reloaden, um das zu ändern. Dies halte ich aber für sinnvoller, als ständig die Breite zu überprüfen und unnötig Resourcen zu verbrauchen, denn der Normalfall ist ja, daß das Fenster nicht nachträglich in der Größe verändert wird.
Und wenn, tritt der Eventhandler onresize in Aktion (auch wenn er in SELFHTML nicht unter den Eventhandlern aufgeführt ist). Könntest also den auch ncoh einbauen.
Ich werde mir das Script mal anschauen, so wie es ausschaut werde ich aber wohl nächste Woche immer mal wieder drüber grübeln, wie man das ohne JS hinkriegen könnte.
Gruß aus Iserlohn
Martin
-
Hi,
Und wenn, tritt der Eventhandler onresize in Aktion (auch wenn er in SELFHTML nicht unter den Eventhandlern aufgeführt ist). Könntest also den auch ncoh einbauen.
Nein. Der steht aus gutem Grund nicht in Selfhtml: »there is no attribute "onresize"«
Außerdem halte ich das wie gesagt nicht für nötig und sinnvoll.Ich werde mir das Script mal anschauen, so wie es ausschaut werde ich aber wohl nächste Woche immer mal wieder drüber grübeln, wie man das ohne JS hinkriegen könnte.
Solltest Du tatsächlich eine reine CSS-Lösung finden, wäre das mMn was für einen Tipps und Tricks Artikel... ;-)
freundliche Grüße
Ingo
-
-