Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 19.06.2010, 22:19
Bomb-Jack Bomb-Jack ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.06.2010
Beiträge: 3
Bomb-Jack befindet sich auf einem aufstrebenden Ast
Standard CSS waagerechte flexible Bildergallerie mit Text ohne Tabellen immer mittig

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>
Mit Zitat antworten
Sponsored Links