Ausrichten - Aber richtig!?

[Henri.Maddox]

Hallo Forum,

ich habe ein kleines Problem. Ausrichten möchte ich wie in der Grafik - allerdings relativ - nicht absolut.

Hier ist es so gelöst, dass alles in einem div liegt, welcher eine feste Größe hat, so dass die oberen 3 Fotos gerade rein passen - dies ist dann mit margin:auto zentriert.
Die drei Fotos wiederum werden jeweils mit float:left an Ort und Stelle gehalten.

Bei der unteren Reihen hab ich noch mehr getrickst: Hier hab ich einen weiteren div mit fester Größe drumrum gemacht und wiederum mit margin:auto positioniert.

Wenn ich nun ein drittes Bild hinzufüge kann ich das alles wieder übern Haufen werfen...

Kann mir einer sagen, wie man sowas richtig macht?

Sau vielen Dank

Henri

 

[_Thor_]

Zeichne die Bilder als Liste aus, denn es ist eine Auflistung von Bildern.

Gib der <ul> text-align: center und den <li>'s display: inline;

 

[prm]

Bildergalerie

 

[Henri.Maddox]

Das hatte ich so schon für andere Fälle versucht, aber ich schaffe es einfach nicht, dass er Listen zentriert. Es wird einfach immer links-bündig angezeigt.

<ul class="vorschau">
	<li> 
		<div class="preview">
			<img src="../images/gallerie/nature1.jpg" alt="nature1" width="180" height="120"/>
			<h3>Nature</h3>
		</div>
	</li>	
	<li>	
		<div class="preview">
			<img src="../images/gallerie/people1.jpg" alt="people1" width="180" height="120"/>
			<h3>People</h3>
		</div>
	</li>	
	<li>	
		<div class="preview">
			<img src="../images/gallerie/technic2.jpg" alt="technic1" width="180" height="120"/>
			<h3>Technic</h3>	
		</div>
	</li>	
	<li>
		<div class="preview">
			<img src="../images/gallerie/travel1.jpg" alt="travel1" width="180" height="120"/>
			<h3>Travel</h3>
		</div>
	</li>
	<li>							
		<div class="preview">
			<img src="../images/gallerie/sonstige1.jpg" alt="sonstige1" width="180" height="120"/>
			<h3>Misc.</h3>
		</div>
	</li>	
</ul>

Dashier ist mal ein Beispielcode.

Ich habe wie oben beschrieben ul text-align: center und li display: inline

ändert aber rein garnichts an der Darstellung.

Hab auch in dem äußersten DIV mal versuchsweise text-align:center gesetzt: nix!

Ist mir auch schon öffter passiert, das text-align einfach keine Wirkung gezeigt hat, und ich verstehe nicht wieso :-(

Dankesehr

Henri

 

[xXxPeterPanxXx]

wofür die divs?

 

[Efchen]

Er gehört wahrsheinlich zu denjenigen, die Weihnachtsgeschenke auch zweimal einpacken, da ist die Vorfreude größer :-)

Block-Elemente (wie div, ul, li, ...) zentriert man mit "margin:0 auto;", Inline-Elemente mit "text-align:center".

 

[Henri.Maddox]

Hi,

erstmal vielen Dank für die tolle Unterstützung hier - hoffe ich kann das irgendwann mal andren Neulingen zurück geben.

Im Anhang hab ich mal ein einfaches Beispiel - dieses soll so Ausgerichtet werden wie im Anfangs-Post... aber eben mit Listen!

Wär super, wenn sich das mal jemand anschauen könnte - es muss doch irgendwie möglich sein!

Danke!
Henri

 

[Efchen]

Lade Diene Seiten bitte auf einen Webspace hoch und verlinke sie hier. Kaum einer wird sich ein unbekanntes Archiv runterladen und auspacken. Auch Quellcode kostet immer Überwindung, den zu kopieren und auszuprobieren. Nur mit einem Link wirst Du viele Leute dazu bewegen können, sich Deinem Problem anzunehmen.

 

[Henri.Maddox]

Lade Diene Seiten bitte auf einen Webspace hoch und verlinke sie hier. Kaum einer wird sich ein unbekanntes Archiv runterladen und auspacken. Auch Quellcode kostet immer Überwindung, den zu kopieren und auszuprobieren. Nur mit einem Link wirst Du viele Leute dazu bewegen können, sich Deinem Problem anzunehmen.

Ich warte noch auf die Freischaltung meines Webspace - danach mach ich das.

Das ein Archiv "gefährlich" sein könnte hab ich ganz vergessen - mit der Zeit gewöhnt man sich an das sichere Nest mit dem Apfel und dem Pinguin :-D

Ich meld mich dann nochmal

Servus

 

[Henri.Maddox]

So, da der Webspace noch etwas dauert hab ich mich mal bei funpic angemeldet - praktischerweise mag er meinen Doctype nicht - daher hier ein link auf ein ziemlich hässliches HTML-Dokument - aber reichen sollte es:

Fotos