Listen-Elemente an DIV anpassen

    Hab dann auch schon die nächste Frage - wollte das nicht in ein Thema nehmen.

    Da ich ein Responsiv-Template erstelle müssten sich die Listen-Elemente je nach Browsergröße verschieben.
    Das hab ich über float gemacht - jetzt hat man natürlich je nachdem wie größe man den Browser zieht mal mehr mal weniger Abstand von dem umschließenden Div zu den Listen-Elementen. Kann man das optisch verbessern? hab da schon an min und max width gedacht aber funktioniert leider nicht - könnte auch CSS3 sein.

    Hier mein Beispiel:
    *** Link veraltet ***

    Was meinst Du damit? Den grünen Bereich zwischen dem roten links und dem ersten gelben Kästchen? Wenn ja, dann lässt sich das nicht ändern, da die "gelben Kästchen" ja zentriert sind. Oder was genau meinst Du mit "mal mehr mal weniger Abstand von dem umschließenden Div zu den Listen-Elementen"?

    Edit: Deine Vorlage funktioniert nicht im IE 7-10! Hier ist kein "float". Der rote Kasten ist eine Zeile hoch und direkt links oben in der Ecke. Der andere ganze Bereich, von ganz links nach ganz rechts ist die grüne Box.

    Die gelben Kästen funktionieren im IE 8-10, nicht aber im IE7, denn der kennt wohl kein "display:inline-block;".

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    wie würdest du es machen Synonym? wenn ich den Browser kleiner ziehe ist der Abstand (grün) zum ul mal mehr (wenn er das nächste Listen-Element umbricht) mal weniger (wenn er das Listen-Element stehen lässt da er noch genügend platz hat) groß - ich hoffe du verstehst was ich meine. Dachte ich hätte da mal eine Seite gesehen die das ganz gut gelöst hat in dem die Breite der Listen-Elemente immer variiert.

    Das mit dem IE7 weiß ich - war auch nur ein schneller test - ;)

    Das kann mit Deinem grünen Rand nicht anders funktionieren, weil der container eine beliebige Breite hat, deine gelben Kästchen innen drin aber nur 10 x (100 + 5) px maximale Breite kriegen ^^

    *edit*
    Wenn die gelben nicht quadratisch sein müssen, könntest Du die Breite prozentual setzen.

    Er war Jurist und auch sonst von mäßigem Verstand.

    (Volker Pispers)

    Dieser "Abstand" beruht ja darauf (wie Margin schon sagte), dass die gelben Boxen eine feste Größe haben, der umliegende Container aber Monitorgröße hat, also dynamisch ist. Da kommt dann noch hinzu, dass die gelben Boxen zentriert werden. Also ist der Abstand immer unterschiedlich. Wenn größer als 50% links und rechts von der Breite der gelben Box, dann wandert eine Box hoch, wenn weniger als 0, dann wandert eine runter. Somit schwankt der Abstand dazwischen grob gesagt immer zwischen 0 und 50% der "Gelb-Box-Breite".

    Wie man das am einfachsten lösen kann? Die Zentrierung entfernen. Dann sind die gelben Boxen immer links mit einem fest vorgegeben Abstand zur linken Box - so wie in Deinem neuen Beispiel.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    Synonym aber selbst mit linksbündig hab ich doch rechts wenn ein Listen-Element in die nächste Zeile rückt immer einen kleinen Abstand - bis dann wieder das nächste nachrückt. Im Beispiel ist das aber immer alles bündig ;)

    Ja neee, das mit deinem Beispiel ist eine optische Täuschung. Die große Box und das Menü drüber variieren in der Größe und dennoch sind die Kleider zum rechten Rand des oberen Kastens nur selten wirklich bündig. Wie bei Dir auch, rutscht das nächste erst nach, wenn wieder genügend Platz ist.

    *edit*
    Ein Teil des "Breitenausgleichs" wird über die linke Senkrecht-Navi geschaffen, beobachte die mal.

    Er war Jurist und auch sonst von mäßigem Verstand.

    (Volker Pispers)

    stimmt, eigentlich passt er sogar die ganze Seite an - auch der Head usw. wird kleiner -es findet ein Umbruch bei ca. 1214px und bei 996px statt.

    Das fliegen ist doch CSS3 transitions oder ?

    Jep, Margin war schneller. Wirklich bündig ist das rechts auch nicht, da sind immer ein paar Millimeter Versatz. Aber das fällt fast nicht auf, da ...

    1. das ganz Layout, also inkl. der Navi zentriert ist. Sieht man am größer werdenden Abstand ganz links und rechts.
    2. Hat dieser Abstand eine gewisse Breite erreicht, dann rückt ein Kleid nach oben
    3. gleichzeitig vergrößert sich das Header-Bild und die drei Logos bzw. Navileiste drüber auch

    Das ganze ist also nur eine Rechenfrage, dass man die Optimale Boxbreite hat und dazu eben die optimalen sonstigen Werte. Dann per CSS "Sprung" bei Xpx und Ypx

    Genau genommen hat die Seite 2 Sprünge. 5 Kleider in einer Zeile, 4 oder 3. Bei weniger als 3 kommt ein weiterer Sprung und es geht in die "Mobile-Ansicht".

    Mehr als 5 werden es auch nicht. Ist der Bildschirm größer, dann zentriert nur wieder der komplette Inhalt.

    Umgesetzt ist es (zumindest teilweise) in der Bootstrap.min.css ganz unten bei "@media (min-width:768px) and (max-width:979px)" als "css3 media queries".

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    Responsive Design ist Nervensache :D
    Ich hab mir mal das Bootstrap-Framework runtergeladen und gucke immer da nach, wie die es da machen, weil das meine Kenntnisse von CSS weit übersteigt.
    *** Link veraltet ***

    Wer zuerst "Datenschutz" sagt, hat verloren.