Du befindest Dich im Archiv vom ABAKUS Online Marketing Forum. Hier kannst Du Dich für das Forum mit den aktuellen Beiträgen registrieren.

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

Ajax, Hijax, Microformats, RDF, Markup, HTML, PHP, CSS, MySQL, htaccess, robots.txt, CGI, Java, Javascript usw.
Neues Thema Antworten
Markus_S
PostRank 2
PostRank 2
Beiträge: 57
Registriert: 17.04.2007, 23:58

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

Anzeige von ABAKUS

von Anzeige von ABAKUS »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002
  • persönliche Betreuung
  • individuelle Beratung
  • kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.


Anna Bolika
PostRank 2
PostRank 2
Beiträge: 44
Registriert: 22.08.2008, 07:44

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;


nicolas
PostRank 9
PostRank 9
Beiträge: 986
Registriert: 11.10.2006, 13:06
Wohnort: Thun, CH

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. :D

mano_negra
PostRank 9
PostRank 9
Beiträge: 2812
Registriert: 23.07.2009, 15:29
Wohnort: la luna

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.

Markus_S
PostRank 2
PostRank 2
Beiträge: 57
Registriert: 17.04.2007, 23:58

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?

oliverp19
PostRank 4
PostRank 4
Beiträge: 182
Registriert: 05.03.2009, 20:32

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.

Markus_S
PostRank 2
PostRank 2
Beiträge: 57
Registriert: 17.04.2007, 23:58

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.

Antworten
  • Vergleichbare Themen
    Antworten
    Zugriffe
    Letzter Beitrag