<ul> width an Inhalt anpassen

[werbebanner]

Ich stehe gerade vor folgendem Problem.

Ich habe einen Container der 70% breit ist.

In diesem Container lasse ich Bilder (200px * 200px) nach links floaten.

<ul>
<li><a href="#"><img src="/pics/1.jpg"></img></a></li>
<li><a href="#"><img src="/pics/2.jpg"></img></a></li>
<li><a href="#"><img src="/pics/3.jpg"></img></a></li>
<li><a href="#"><img src="/pics/4.jpg"></img></a></li>
<li><a href="#"><img src="/pics/5.jpg"></img></a></li>
<li><a href="#"><img src="/pics/6.jpg"></img></a></li>
</ul>

Mein Problem ist nun wenn ich das Fenster kleiner ziehe springen die Bilder zwar nach unten, was auch so gewollt ist. Allerdings bleibt der Container 70% groß was zur folge hat das ich einen ca. 190px breiten leeren Raum habe.
(Je kleiner ich das Fenster ziehe desto kleiner wird der Rand natürlich, bis das nächtste Bild runter springt.)

Ich hätte nun gerne das der gesamte Bilderblock immer zentriert in dem 70% Container liegt - egal wie groß das Fenster ist.

Meiner Meinung nach müsste es mit:

#container ul {
width: auto;
margin-left: auto;
margin-right: auto; 
}

funktioniert. Das klappt aber leider nicht.

Hat jemand einen Rat?


edit://

 Spoiler

Aber schaut mal hier:
(Ob die Bilder angezeigt werden oder nicht spielt kein Rolle. Die "Defektes-Bild" Platzhalter reichen aus.
Zieht mal bitte das Fenster der Darstellung langsam größer & kleiner.

Hier nochmal 2 Screenshots:
Vorher:

 Spoiler

Nachher:

 Spoiler

Der rosa markierte Ausenabstand sollte immer auf beiden Seiten gleich groß sein. Das also der blau markierte innere Bereich immer zentriert ist. Egal wie groß oder klein das Fenster gezogen wird.

Zieht man das Fenster zusammen und rutscht das Bild in die nächste Zeile soll einfach der gesamte Block zentriert werden.
Das ich nicht links einen kleinen und rechts einen großen Außenabstand habe, sondern links und rechts jeweils beide Abstände addiert durch 2 angezeigt werden..

[snow]

#moved

[werbebanner]

Keiner eine Idee?

[Mr.Tr33]

Wie wäre es mit einem Beispiel? Am besten direkt online?

[werbebanner]

Ich hab leider kein online Beispiel.
Dachte die Codeausschnitte im 1. Post reichen aus

[Mr.Tr33]

Nein, sonst hätte ich nicht nachgefragt ...
Wenn du Hlilfe brauchst, dann lad ein Beispiel hoch, egal ob es ein kompletter Code ist oder sonstwas. Hauptsache man kann dein Problem direkt selbst sehen.

[werbebanner]

Wäre es online oder hätte ich die möglichkeiten dazu hätte ich das selbstverständlich bereits im Startpost mit dazu geschrieben.
Wenn ich zuhause bin schau ich mal ob ich den Code irgendwo anders darstellen kann.
Kannte da mal eine Seite die soetwas konnte.

[Mr.Tr33]

Schön, dass im Beispiel nichts von 70% steht oder float: left; ...
So kann dir auch niemand helfen!
Aber media queries sollte dir helfen, wenn du kein JS benutzen möchtest.

[werbebanner]

Um das Prinzip zu verstehen braucht man die 70% nicht.
Ich kann das "Problem" nirgends hoch laden um es besser zu verdeutlichen.
Ich will ja nichts sagen. Aber entweder man möchte mir helfen und ist bereit die 2 Minuten Zeit zu investieren und die Dateien in 1 Minute zu erstellen oder man lässt es bleiben.
Dann sieht man nämlich genau wo das Problem liegt wenn man meinen Startpost nochmal parallel liest.
Ich kann es wirklich nicht besser verdeutlichen. Habe weder Server noch Webspace noch kenne ich sonst eine Möglichkeit den Code darzustellen.

Mit Media Queries werde ich es morgen mal versuchen. Danke für den Tipp (Y)

[kyls]

Ich weiss nicht, ob ich deine Frage richtig verstanden habe, aber vll ist das ja das, was du meinst:

[werbebanner]

Ahh JSFIDDLE..das ist die Seite die ich gesucht habe. Mit der kann ichs gescheit darstellen. Danke.
Das Problem war es leider nicht da die Breite fix angegeben wurde

Aber schaut mal hier:
(Ob die Bilder angezeigt werden oder nicht spielt kein Rolle. Die "Defektes-Bild" Platzhalter reichen aus.
Zieht mal bitte das Fenster der Darstellung langsam größer & kleiner.

Hier nochmal 2 Screenshots:
Vorher:

 Spoiler

Nachher:

 Spoiler

Der rosa markierte Ausenabstand sollte immer auf beiden Seiten gleich groß sein. Das also der blau markierte innere Bereich immer zentriert ist. Egal wie groß oder klein das Fenster gezogen wird.

Zieht man das Fenster zusammen und rutscht das Bild in die nächste Zeile soll einfach der gesamte Block zentriert werden.
Das ich nicht links einen kleinen und rechts einen großen Außenabstand habe, sondern links und rechts jeweils beide Abstände addiert durch 2 angezeigt werden..

[werbebanner]

Sonst niemand eine Idee?

[Schlumpf9]

Das Problem ist, das der container um die ul eine feste Breite hat.
Jetzt gibst du dem ul Tag ein float: left;. Das heißt es wird nach links gesetzt. Ist nun der container breiter als deine ul ist klar, das rechts ein Abstand entsteht.
Wenn dann musst du beim ul das float: left; durch margin: 0 auto; ersetzen, damit das allerdings funktioniert braucht die ul eine feste Breite sonst wird sie nicht zentriert. Dieses Problem haben schon mehrere gehabt, da sich die ul Breite nicht an den Inhalt (li's) anpasst!

Meiner Ansicht nach lässt sich das mit deinem Aufbau nicht realisieren. Wenn dann bräuchtest du JQuery/Javascript, gibst dem ul Tag margin: 0 auto; und weist dem Tag dann mit Jquery die Breite zu, die du ausrechnest indem du die Breiter der li's in einer Reihe + Margin addierst.

Auf Fiddle:
Gib dem ul Tag mal folgende Eigenschaften:
margin: 0 auto;
width: 420px;

Dann ist es mittig zentriert ohne Rand, so muss man das dann mit Jquery berechnen, je nach Fenster/COntainer Größe. Falls du noch Fragen zum JQury/Javascript Teil hast und das so versuchen willst, melde dich! Wenn du das nur für eine Bilder Anzeige machst, kann man das auch nur mit div Boxen ohne li realisieren!