Smartfone Optimierung einer Tabelle mit Text und Bild
Smartfone Optimierung einer Tabelle mit Text und Bild
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
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
Last edited by Simmyne on Mon Jun 26, 2017 2:30 pm, edited 1 time in total.
Re: Smartfone Optimierung einer Tabelle mit Text und Bild
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:
einfach:
Code: Select all
<td width="152"> <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>
Code: Select all
<div class="riddle_preview"> <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>
Christoph M. Becker – Plugins for CMSimple_XH
Re: Smartfone Optimierung einer Tabelle mit Text und Bild
Danke schon mal, kann ich erst morgen oder am WE ausprobieren.
Re: Smartfone Optimierung einer Tabelle mit Text und Bild
Nur - falls nötig - um klar zu machen. Das "weg mit der Tabelle" heisst allecmb wrote:Ist eigentlich ganz einfach: weg mit der Tabelle...
Code: Select all
<table>, </table>, <tbody>, </tbody> und <tr>,</tr>
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.
Re: Smartfone Optimierung einer Tabelle mit Text und Bild
Hallo cmb und tara,
ich habe in das css
geschrieben.
Der Quellcode für drei Vorschauen sieht so aus:
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
ich habe in das css
Code: Select all
.riddle_preview {display: inline-block;}
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>
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
Last edited by Simmyne on Mon Mar 20, 2017 10:56 am, edited 3 times in total.
Re: Smartfone Optimierung einer Tabelle mit Text und Bild
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.
Link ist weg, da Problem erledigt.
Last edited by Simmyne on Fri Mar 17, 2017 10:31 am, edited 1 time in total.
Re: Smartfone Optimierung einer Tabelle mit Text und Bild
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>
Re: Smartfone Optimierung einer Tabelle mit Text und Bild
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;">
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.
Re: Smartfone Optimierung einer Tabelle mit Text und Bild
Auf Touchscreens gibt es allerdings kein Hover.Tata wrote:Hier würde ich wohl die Bildbeschreibung und Link Title nutzen und aus dem Content ganz rausnehmen. So wird es am "hover" gezeigt.
Ich würde Franks (frase) Variante bevorzugen, aber statt des <br> einfach im Stylesheet ergänzen:
Code: Select all
.riddle_preview a {display:block}
Code: Select all
.riddle_preview {text-align: center}
Christoph M. Becker – Plugins for CMSimple_XH
Re: Smartfone Optimierung einer Tabelle mit Text und Bild
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
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
Last edited by Simmyne on Mon Mar 20, 2017 10:57 am, edited 2 times in total.