CSS waagerechte flexible Bildergallerie mit Text ohne Tabellen immer mittig

Bomb-Jack · #1 (**permalink**) 19.06.2010, 21:19

Hi Leute,

habe folgendes Problem:

ich möchte in meinem Contentbereich meines CSS 3 Spalten Layouts eine Bildergallerie "ohne Tabellen" komplett flexibel (soll je nach Bildschirmgröße nach floaten) und immer komplett mittig ausgerichtet einfügen.
Nachdem ich lange mit Float experimentiert habe, habe ich mich nun für eine andere Variante (Liste) entschieden. (Siehe Code)
Funktioniert soweit alles Prima aber...

Nun würde ich gerne mittig nicht "links oder rechts" sondern unter jedem Bild eine Bildbeschreibung einfügen.

Ich werde bald wahnsinnig darüber

Hat evtl. einer von euch ne akzeptable Lösung dafür? Das wär echt genial.

Grüße

Nochmal in Kurzform
- Keine Tabellen
- Alles mit Hilfe von CSS
- waagerechte immer mittige Bildanzeige nebeneinander mit dazugehörender Bildbeschreibung bzw. Name unter jedem Bild.

Die Bilder und der Beschreibungstext sollen nachher noch verlinkt werden.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
body {
	font: 95% Verdana, Arial, Helvetica, sans-serif;
	background-color: #000000;
	background-attachment: fixed;
	background-position: top;
	text-align: center;
}
#content {
	width:auto;
	border: 1px solid #000033;
	padding-top: 0.5em; padding-right: 0.5em; padding-bottom: 0.5em; padding-left: 0.5em;
	background: #8080c5;
}

#content ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

#content ul li {
	display: inline;
}

#content ul li a {
	text-decoration: none;
	padding: .2em 1em;
	color: #fff;
	background-color: #036;
}
</style>
</head>
<body>

<div id="content">
    <ul>
        <li><a href="bild.html" target="_blank"><img src="200x150px.jpg" alt="Teaser"/></a></li>
        <li><a href="bild.html" target="_blank"><img src="200x150px.jpg" alt="Teaser"/></a></li>
        <li><a href="bild.html" target="_blank"><img src="200x150px.jpg" alt="Teaser"/></a></li>
        <li><a href="bild.html" target="_blank"><img src="200x150px.jpg" alt="Teaser"/></a></li>
    </ul>
</div> 

</body>
</html>

heiko_rs · #2 (**permalink**) 20.06.2010, 00:54

Hier ist eine Variante: http://xhtmlforum.de/58071-elemente-...tml#post441798

Bomb-Jack · #3 (**permalink**) 21.06.2010, 09:00

Hio,
erstmal Vielen Dank für die schnelle Antwort.

also...
Diese Variante kenn ich und hab ich auch schon so zusammengebastelt einmal mit der "float" und einmal mit "display:inline" Lösung. Wobei letzteres meines Erachtens einfacher ist, da man bei float die Probleme mit dem nachrückenden Hintergrund des beinhalteten DIV containers bekommt, wenn man nicht richtig cleared. Workaround siehe hier Einschließen von Floats ohne zusätzliches Markup - easyclear

Nichts desto trotz... die Inhalte (Bilder etc.) Deines DIV´s bzw des Containers richten sich immer am linken Rand des Inhalts-Containers bzw. des DIV´s aus und nicht mittig.

Ich hätte es aber doch gerne mittig mit den Bildbeschreibungen unten drunter in CSS

Wahrscheinlich werde ich es doch mit einer ollen Tabelle machen müssen.

Besten Dank schonmal

Gruß BJ

heiko_rs · #4 (**permalink**) 21.06.2010, 11:45

Zitat:

Zitat von Bomb-Jack

einmal mit der "float" und einmal mit "display:inline" Lösung.

Beides falsch. Anscheinend hast Du den Code nicht probiert, sonst wäre Dir display: inline-block; aufgefallen.

Zitat:

Zitat von Bomb-Jack

die Inhalte (Bilder etc.) Deines DIV´s bzw des Containers richten sich immer am linken Rand des Inhalts-Containers bzw. des DIV´s aus und nicht mittig.

Also gibst Du ul einfach text-align.

Zitat:

Zitat von Bomb-Jack

Wahrscheinlich werde ich es doch mit einer ollen Tabelle machen müssen.

Definitiv nicht.

Bomb-Jack · #5 (**permalink**) 22.06.2010, 13:24

Vielen Dank, nu hat es funktioniert

Gruß, BJ

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Wrapper wächst nicht mit, keine Floats	maclady	CSS	11	10.02.2010 17:30
Wachsende Container	Andy CD	CSS	13	10.02.2010 13:08
Parent DIV soll mit der Höhe seines Childs wachsen	Tekkla	CSS	2	19.11.2009 18:27
Grafik in einer Tabellenzelle rechts unten ausrichten ?	Worance	CSS	1	19.11.2006 15:09
Problem: Überschrift <hx> innerhalb von Abschnitt <p>	Ares	CSS	7	24.10.2006 13:30