Smartfone Optimierung einer Tabelle mit Text und Bild

[Simmyne]

Hallo allerseits,

ich bin dabei, meine Homepage smartfone-tauglich zu machen. Dies hier ist auf der alten Homepage alles mit Tabellen aufgebaut:

http://www.sowiwi.de/?ProHof-Raetsel

Auf dem Smartfone sollen die Vorschauen der Rätsel natürlich alle untereinander kommen. Und der Text mit dem Monat/Jahr soll immer unter das jeweilige Bild.

Wie macht man das?

LG Simm

[cmb]

Ist eigentlich ganz einfach: weg mit der Tabelle, und statt der <td>s floatende <div>s oder, was ich gerne mache, den <div>s einfach display:inline-block geben. Das ist dann prima responsive. Also statt:

Code: Select all

<td width="152">&nbsp;<a href="./downloads/WiWi-raetsel_2011_12.pdf" target="_blank"><img alt="Rätsel Dezember 2011" border="0" height="212" src="./images/WiWi-raetsel_2011_12.jpg" width="152"></a></td>

einfach:

Code: Select all

<div class="riddle_preview">&nbsp;<a href="./downloads/WiWi-raetsel_2011_12.pdf" target="_blank"><img alt="Rätsel Dezember 2011" border="0" height="212" src="./images/WiWi-raetsel_2011_12.jpg" width="152"></a></div>

[Simmyne]

Danke schon mal, kann ich erst morgen oder am WE ausprobieren.

[Tata]

Ist eigentlich ganz einfach: weg mit der Tabelle...

Nur - falls nötig - um klar zu machen. Das "weg mit der Tabelle" heisst alle

Code: Select all

<table>, </table>, <tbody>, </tbody> und <tr>,</tr>

entfernen.

[Simmyne]

Hallo cmb und tara,

ich habe in das css

Code: Select all

.riddle_preview {display: inline-block;}

geschrieben.

Der Quellcode für drei Vorschauen sieht so aus:

Code: Select all

<div class="riddle_preview">März 2017<a href="./userfiles/downloads/WiWi_raetsel_2017_03.pdf" target="_blank"><img alt="" src="./userfiles/images/WiWi_raetsel_2017_03.jpg" style="width: 152px; height: 212px;"></a></div>

<div class="riddle_preview">Februar 2017<a href="./userfiles/downloads/WiWi_raetsel_2017_02.pdf" target="_blank"><img alt="" src="./userfiles/images/WiWi_raetsel_2017_02.jpg" style="width: 152px; height: 212px;"></a></div>

<div class="riddle_preview">Januar 2017<a href="./userfiles/downloads/WiWi_raetsel_2017_01.pdf" target="_blank"><img alt="" src="./userfiles/images/WiWi_raetsel_2017_01.jpg" style="width: 152px; height: 212px;"></a></div>

Aber es sieht leider nur so aus:
Link gelöscht, da es jetzt richtig ist.

In der PC-Ansicht ist der Text Monat/Jahr neben dem Bild (er soll aber drunter).

In der Smartfone-Ansicht (ich simuliere sie, dass in dem ich das Browserfenster zusammenschieb), sieht's ganz gut aus, aber ich hätte gerne den Vorschautitel mit Monat/Jahr unter dem Bild und nicht drüber.

Was soll ich tun?

LG Simm

[Simmyne]

Habe versucht, die Vorschautitel Monat/Jahr unter das Bild zu bekommen. In der PC-Ansicht sieht's sowieso gar nicht so aus wie ich es sein soll, und in der simulierten Smartfone-Ansicht steht der Monat noch neben dem Bild, das Jahr aber drunter. Geht auch nicht.

Link ist weg, da Problem erledigt.

[frase]

Code: Select all

<div class="riddle_preview">
<a href="./userfiles/downloads/WiWi_raetsel_2017_03.pdf" target="_blank">
<img alt="" src="./userfiles/images/WiWi_raetsel_2017_03.jpg" style="width: 152px; height: 212px;">
</a><br>
März 2017
</div>

[Tata]

Hier würde ich wohl die Bildbeschreibung und Link Title nutzen und aus dem Content ganz rausnehmen. So wird es am "hover" gezeigt.

Code: Select all

<a href="./userfiles/downloads/WiWi_raetsel_2017_03.pdf" target="_blank" title="Februar 2017">
<img alt="Februar 2017" src="./userfiles/images/WiWi_raetsel_2017_03.jpg" style="width: 152px; height: 212px;">

[cmb]

Hier würde ich wohl die Bildbeschreibung und Link Title nutzen und aus dem Content ganz rausnehmen. So wird es am "hover" gezeigt.

Auf Touchscreens gibt es allerdings kein Hover.

Ich würde Franks (frase) Variante bevorzugen, aber statt des <br> einfach im Stylesheet ergänzen:

Code: Select all

.riddle_preview a {display:block} 

Und damit alles schön mittig wird:

Code: Select all

.riddle_preview {text-align: center}

[Simmyne]

Hallo und danke schon mal,

habe mich für das <br> entschieden, weil ich keinen Link auf das pdf vom Schriftzug aus mehr haben will, nur noch vom Vorschaubildchen aus. Das spar ich mir jetzt

Wie mache ich es, wenn ich zwischen den Vorschaubildchen noch ein bisschen Abstand haben möchte? Und dann sollte ein Abstand zur unteren Reihe sein.

Link gelöscht, das es jetzt richtig ist.

LG simm