zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS waagerechte flexible Bildergallerie mit Text ohne Tabellen immer mittig

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.06.2010, 22:19
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
  #2 (permalink)  
Alt 20.06.2010, 01:54
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.06.2010, 10:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.06.2010
Beiträge: 3
Bomb-Jack befindet sich auf einem aufstrebenden Ast
Lächeln

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 14:23 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 21.06.2010, 12:45
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Bomb-Jack Beitrag anzeigen
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 Beitrag anzeigen
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 Beitrag anzeigen
Wahrscheinlich werde ich es doch mit einer ollen Tabelle machen müssen.
Definitiv nicht.
__________________
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.)
Mit Zitat antworten
  #5 (permalink)  
Alt 22.06.2010, 14:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.06.2010
Beiträge: 3
Bomb-Jack befindet sich auf einem aufstrebenden Ast
Lächeln

Vielen Dank, nu hat es funktioniert

Gruß, BJ
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:54 Uhr.