CSS waagerechte flexible Bildergallerie mit Text ohne Tabellen immer mittig
 |
|
|
LinkBack | Themen-Optionen | Ansicht |
19.06.2010, 21:19
|
|||
|
|||
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>
|
| Sponsored Links |
|
20.06.2010, 00:54
|
||||
|
||||
|
Hier ist eine Variante: http://xhtmlforum.de/58071-elemente-...tml#post441798
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
| Sponsored Links |
|
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 Geändert von Bomb-Jack (22.06.2010 um 13:23 Uhr)
|
|
21.06.2010, 11:45
|
||||
|
||||
|
Zitat:
Zitat:
Zitat:
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
|
| Themen-Optionen | |
| Ansicht | |
|
|
Ä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 |
Linear-Darstellung
