An CSS-Profis (Tabellen-Ersatz) ...

Beitrag von **Markus_S** » 01.12.2011, 06:11

Hallo,

da man Tabellen-Layouts nur noch für "echte" Tabellen einsetzen soll, versuche ich verschiedene alte Layouts nun per CSS zu transformieren.

Leider scheitere ich daran, mehrere Fotos in einem flexiblen Container gleichmäßig verteilt und jeweils zentriert darzustellen.

variable Gesamtbreite der Foto-Leiste
die Fotos verteilen sich gleichmäßig horizontal (nebeneinander!)
Fotobeschreibungen unterhalb jeweils zentriert

Code: Alles auswählen

|-----------------------------------------------------------------------|
|                 |                 |                 |                 |
|     #######     |     #######     |     #######     |     #######     |
|     #     #     |     #     #     |     #     #     |     #     #     |
|     #     #     |     #     #     |     #     #     |     #     #     |
|     #     #     |     #     #     |     #     #     |     #     #     |
|     #######     |     #######     |     #######     |     #######     |
|       F 1       |       F 2       |       F 3       |       F 4       |
|                 |                 |                 |                 |
|-----------------------------------------------------------------------|

"Früher" wurde das so gelöst:

Code: Alles auswählen

<table width="100%" border="0">
<tr>
<td align="center"><img src="url1" width="100"><br />F1</td>
<td align="center"><img src="url2" width="100"><br />F2</td>
<td align="center"><img src="url3" width="100"><br />F3</td>
<td align="center"><img src="url4" width="100"><br />F4</td>
</tr>
</table>

Wie man erkennt, werden hier 4 Spalten je nach variabler (!!!) Gesamtbreite der Tabelle gleichmäßig verteilt und der Spalteninhalt ist jeweils zentriert.

Wie setze ich das in CSS um, damit es sich exakt genauso verhält???

So einfach klappt es jedenfalls nicht:

Code: Alles auswählen

CSS&#58;

#gesamt &#123;
width&#58; 100%; // Achtung&#58; variable Breite !!!
&#125;

.spalten &#123;
display&#58; inline;
text-align&#58; center;
&#125;

.spalten img &#123;
width&#58; 100px;
margin-left&#58; auto;
margin-right&#58; auto;
&#125;

-------------------------------

HTML&#58;

<div id="gesamt">
<div class="spalten"><img src="url1"></div>
<div class="spalten"><img src="url2"></div>
<div class="spalten"><img src="url3"></div>
<div class="spalten"><img src="url4"></div>
</div>

Auch meine Versuche mittels "float:left" scheitern an der fehlenden Variabilität zur Gesamtbreite und mittels "display:inline-block" stellt der IE7 die Images untereinander dar. Tricks mit 25% Weite oder spezielle Abstände führen auch ins Leere, da die Gesamtbreite ja noch flexibel sein muss...

Kann mir jemand helfen?

Vielen lieben Dank

von **Anzeige von ABAKUS** »

Beitrag von **Anna Bolika** » 01.12.2011, 08:25

Versuchs mal damit (ungetestet und ohne Garantie).
Wenns mir zu bunt wird mit CSS, bleibe ich notfalls bei Tabellen. Besser was funktionierendes mit Tabellen als was unberechnenbares mit CSS.

Code: Alles auswählen


.spalten
&#123;
width&#58; 23%; /*sicherheitshalber*/
float&#58; left;
text-align&#58; center;
&#125;


.spalten img
&#123;
/*bleibt leer*/
&#125;

Beitrag von **nicolas** » 01.12.2011, 11:33

Funktioniert mit CSS nicht einfach so.
Lösungsansätze sind meistens mit display: table-cell; etc. , kannst mal in diese Richtung suchen.
Du machst also aus den DIV im CSS wieder Tabellen.

Beitrag von **mano_negra** » 01.12.2011, 12:18

warum sollte das nicht gehen?
sowie anna bolika müsste es doch funktionieren.

Auch meine Versuche mittels "float:left" scheitern an der fehlenden Variabilität zur Gesamtbreite

?warum

Tricks mit 25% Weite oder spezielle Abstände führen auch ins Leere, da die Gesamtbreite ja noch flexibel sein muss...

ist sie ja noch. die 25% beziehen sich ja auf die breite des gesamt-divs.

Beitrag von **Markus_S** » 01.12.2011, 16:18

mano_negra hat geschrieben:ist sie ja noch. die 25% beziehen sich ja auf die breite des gesamt-divs.

Nun, mit 25% geht es leider nicht. Da wandert das vierte Element bereits in die nächste Zeile. Und bereits mit 24% je Div ist der ganze Spaß dank float:left 4% außermittig zur Gesamtbreite.

Da inline-block und table-cell im IE7 nicht funktionieren, werde ich wohl trotzallem wieder eine Tabelle einsetzen müssen.

Oder findet noch jemand eine Lösung?

Beitrag von **oliverp19** » 01.12.2011, 16:40

Und bereits mit 24% je Div ist der ganze Spaß dank float:left 4% außermittig zur Gesamtbreite.

Code: Alles auswählen

text-align&#58;center;

im übergeordneten Block mit 100% width könnte funktionieren.

Ansonsten wäre da noch

Code: Alles auswählen

margin&#58;0px auto;

im Elternelement, wenn es keine 100% width hat.

Damit sollte das Ganze zentriert dargestellt werden.

Beitrag von **Markus_S** » 01.12.2011, 19:36

Ich habe es hinbekommen... Und zwar doch mit float:left und 25% je Div.

Dass es zuvor nicht klappte, lag an meinem 1px Kontroll-Border, den ich beim Basteln stets eingestellt habe. Der wurde offenbar auf die 4*25% addiert und löste den Zeilenumbruch aus.

Danke allen, die sich bemüht haben.