Smartfone Optimierung einer Tabelle mit Text und Bild

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Simmyne
Posts: 253
Joined: Tue Oct 14, 2008 7:57 pm

Smartfone Optimierung einer Tabelle mit Text und Bild

Postby Simmyne » Thu Mar 16, 2017 5:05 pm

Hallo allerseits,

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

http://www.wietzel-winkler.de/?ProHof_R%C3%A4tsel oder wenn's nicht geht
http://www.wietzel-winkler.de/?ProHof_Rätsel

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
Posts: 10455
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: Smartfone Optimierung einer Tabelle mit Text und Bild

Postby cmb » Thu Mar 16, 2017 5:15 pm

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>
Christoph M. Becker –Plugins for CMSimple_XH, but not for CMSimple 4+

Simmyne
Posts: 253
Joined: Tue Oct 14, 2008 7:57 pm

Re: Smartfone Optimierung einer Tabelle mit Text und Bild

Postby Simmyne » Thu Mar 16, 2017 5:41 pm

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

Tata
Posts: 2178
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Smartfone Optimierung einer Tabelle mit Text und Bild

Postby Tata » Thu Mar 16, 2017 8:54 pm

cmb wrote: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.
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.

Simmyne
Posts: 253
Joined: Tue Oct 14, 2008 7:57 pm

Re: Smartfone Optimierung einer Tabelle mit Text und Bild

Postby Simmyne » Fri Mar 17, 2017 6:11 am

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
Last edited by Simmyne on Mon Mar 20, 2017 10:56 am, edited 3 times in total.

Simmyne
Posts: 253
Joined: Tue Oct 14, 2008 7:57 pm

Re: Smartfone Optimierung einer Tabelle mit Text und Bild

Postby Simmyne » Fri Mar 17, 2017 6:28 am

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.
Last edited by Simmyne on Fri Mar 17, 2017 10:31 am, edited 1 time in total.

frase
Posts: 770
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Smartfone Optimierung einer Tabelle mit Text und Bild

Postby frase » Fri Mar 17, 2017 7:23 am

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
Posts: 2178
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Smartfone Optimierung einer Tabelle mit Text und Bild

Postby Tata » Fri Mar 17, 2017 7:25 am

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.

cmb
Posts: 10455
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: Smartfone Optimierung einer Tabelle mit Text und Bild

Postby cmb » Fri Mar 17, 2017 8:04 am

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.

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}
Christoph M. Becker –Plugins for CMSimple_XH, but not for CMSimple 4+

Simmyne
Posts: 253
Joined: Tue Oct 14, 2008 7:57 pm

Re: Smartfone Optimierung einer Tabelle mit Text und Bild

Postby Simmyne » Fri Mar 17, 2017 9:46 am

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
Last edited by Simmyne on Mon Mar 20, 2017 10:57 am, edited 2 times in total.


Return to “Deutsch”

Who is online

Users browsing this forum: No registered users and 10 guests