Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden. Du solltest ein Upgrade durchführen oder einen alternativen Browser verwenden.
Ich hab in meinem content Bereich 5 div Blöcke. Wie schaffe ich es, dass diese Blocke, je nachdem wie groß das fenster ist, sie untereinander oder nebeneinander platzieren?
Wenn das Fenster klein ist solls so aussehen:
A
B
C
D
E
Wenn das Browserfenster groß ist kanns dann so aussehen:
A
B C
D
E F
Äh... vielleicht stehe ich ja gerade nur auf dem Schlauch, aber ich denke, dass ist nur über Umwege machbar. Die Auflösung kannst du mit CSS nämlich nicht überprüfen.
Also du könntest zwei Stylesheets machen.
Zum Beispiel Bindest du das Stylesheet, wo alle Boxen untereinander sind, ganz normal ein. Danach überprüft du bspw. mit JavaScript die Auflösung des Browsers und bindest dann jenachdem noch das andere Stylesheet ein, welches die vorherigen Angaben dann teilweise überschreibt.
Eventuell kann es mit CSS funktionieren, wenn du die Divs, die nebeneinander liegen dürfen, in ein weiteres DIV legst, dem du mit CSS "display:inline" gibst.
Das wird nicht funktionieren. Ein Inline-Element darf keine Block-Elemente enthalten. Wäre ja auch irgendwie unlogisch, oder?
(Könnte allerhöchstens sein, dass die Browser das interpretieren könne, allerdings wäre die Lösung halt theoretisch Schwachsinn... Zumal ich mich nicht darauf verlassen würde, falls das schwachsinnigerweise im aktuellen Firefox und Internet Explorer funktionieren würde. Gibt ja auch noch unzählige andere Browser - von künftiger Versionen von FF & IE mal ganz abgesehen...)
geschieht das mit float: left nicht automatisch oder liege ich da ganz falsch? wenn ich das fenster verkleinere dann werden die divs automatisch untereinander angeordnet...
Aber durch float wird das Element sozusagen "rausgenommen aus dem normalen Elementfluss". Das heißt C und F bräuchten eine margin-left, damit sich die Elemente nicht überlappen. Damit würde es dann wieder nicht funktionieren.
Die einzigste Möglichkeit wäre vielleicht, ein bisschen mit overflow:hidden rumzuspielen, welches einen eigenen Block Formating Context erzeugt. Ja, das wäre vielleicht was, wenn man C und F overflow:hidden zuweist und B und E float:left. Den IE müsste man dann aber seperat behandeln.
Eventuell kann es mit CSS funktionieren, wenn du die Divs, die nebeneinander liegen dürfen, in ein weiteres DIV legst, dem du mit CSS "display:inline" gibst.
Die CSS-Spezifikation sieht einige Attribute für visuelle Formatierungen nur für Boxen vor, die von block-level- und replaced-Inline-Elementen erzeugt werden, mit display: inline versehene block-level-Elemente sind jedoch non-replaced-Inline-Elemente. Zu diesen Attributen gehören u.a. width und height sowie margin und padding, man müßte also mittels eines weiteren DIV-Elements die visuellen Formatierungen jeder Box erzwingen, die mit display: inline versehen wird:
Diese Regel spielt in diesem Fall keine Rolle, da es sich syntaktisch und semantisch um Block-Level-Elmente handelt, ein DIV-Element bleibt ja trotz CSS-Anweisungen weiterhin ein DIV-Element, obwohl es sich visuell anders verhält
Würde sagen das es am ehesten mit float klappt.
Wenn man die beiden Container b und c links/rechts floatet und danach ein clear both macht, sollten die sich bei geringer größe untereinander verschieben.
Problem dabei ist nur das wenn die nebeneinander liegen, der Parent Container die Breite der beiden Container hat und wenn die untereinader liegen, nur so breit ist wie einer der Conatiner.(In annahme das C und B gleich Breit sind.)
