Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild

von joschi1989 Fr 12 Apr 2013 - 0:18

Hallo,

ich bin grad eine Html Tabelle für ein Indexmodul am basteln,soweit hab ich das hinbekommen aber nun
habe ich das Problem, dass die Überschrift (1.Platz, 2.Platz usw) der einzelnen Bilder nicht genau über
das jeweilige Bild steht.Wie muss ich das machen bzw. welchen Code muss ich wo einsetzen? Habe
es schon mit

Code:: <br> und </br>

versucht aber das klappt nicht oder ist das falsch? confused

Weiter, wie bekomme ich auf das jeweilige Bild ein Tooltip? Da soll der Name der App drin stehen?
Wenn das als 2. Frage nicht Regelkomform ist dann sorry, würde dann einen 2.Thread auf machen,
ich denke aber das es zusammen gehört weil das ja ein Code ist oder?

Diesen Code habe ich bis jetzt erstellt:

Code:: <center> <br><b>1.Platz 2.Platz 3.Platz 4.Platz 5.Platz</b></br> <a href="http://www.whatsapp.com/?l=de"><img src="http://i69.servimg.com/u/f69/17/63/79/66/whatsa12.png" border="1" width="50" height="50"></a> <a href="http://www.viber.com/"><img src="http://i69.servimg.com/u/f69/17/63/79/66/viber-11.png" border="1" width="50" height="50"></a> <a href="http://www.4bilder1wort.de/android-ios-versions/"><img src="http://i69.servimg.com/u/f69/17/63/79/66/mzl_pl11.png" border="1" width="50" height="50"></a> <a href="http://zattoo.com/"><img src="http://i69.servimg.com/u/f69/17/63/79/66/zattoo11.png" border="1" width="50" height="50"></a> <a href="https://itunes.apple.com/de/app/ihandy-wasserwaage-kostenlos/id299852753?mt=8"><img src="http://i69.servimg.com/u/f69/17/63/79/66/40316911.png" border="1" width="50" height="50"></a> </center>

So sieht das dann aus:

Tabelle Startseite - Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild Screen27

von Günther Fr 12 Apr 2013 - 0:47

Hallo Christian,

wo siehst du in deinem Code eine HTML-Tabelle?
Du hast nur den Text eingesetzt, danach die verlinkten Grafiken und alles zusammen zentriert. Mit einer Tabelle hat er nichts zu tun. confused

Genau das ist auch die Lösung auf deine Frage: Du musst diesen Code tatsächlich in eine Tabelle umwandeln, damit der Text jeweils über der passenden Grafik zentriert angezeigt wird. Lies dich am besten dort ein:
http://de.selfhtml.org/html/tabellen/
Du solltest auch besonders das Zellenattribut "align" beachten, das es dir dann ermöglicht, die einzelnen Zellinhalte zentriert auszurichten.
Das Ergebnis müsste dann in Tabellenform so aussehen:

1. Platz	2. Platz	3. Platz	...
BILD 1	BILD 2	BILD 3	...

Wie du Grafiken einen Tooltip hinzufügen kannst (title-Attribut), wird dort erklärt:
http://de.selfhtml.org/html/grafiken/einbinden.htm#referenz

Liebe Grüße
Günther

von joschi1989 Fr 12 Apr 2013 - 1:17

Stimmt Gümther hast recht das war ja garkeine HTML Tabelle, hatte vorher was drüber gelesen, daher habe
ich mich vertan.
Ich habe jetzt eine Tabelle erstellt, hat bestens geklappt....Danke:
Schau Dir bitte mal den Code an, ist da alles richtig? Angezeigt wird das richtig.

Code:: <table border="0" width="100%"> <tr> <td align="left"> <div style="margin:auto;text-align:center;width:100%"><strong>1.Platz</strong></div> </td><td align="left"> <div style="margin:auto;text-align:center;width:100%"><strong>2.Platz</strong></div> </td><td align="left"><div style="margin:auto;text-align:center;width:100%"> <strong>3.Platz</strong></div><td align="left"> <div style="margin:auto;text-align:center;width:100%"><strong>4.Platz</strong></div><td align="left"> <div style="margin:auto;text-align:center;width:100%"><strong>5.Platz</strong></div> </td> </tr><tr> <td align="left"><div style="margin:auto;text-align:center;width:100%"> <a href="http://www.whatsapp.com/?l=de"><img src="http://i69.servimg.com/u/f69/17/63/79/66/whatsa12.png" border="0" width="50" height="50"></a> </div> </td><td align="left"><div style="margin:auto;text-align:center;width:100%"> <a href="http://www.viber.com/"><img src="http://i69.servimg.com/u/f69/17/63/79/66/viber-11.png" border="0" width="50" height="50"></a> </div> </td><td align="left"><div style="margin:auto;text-align:center;width:100%"> <a href="http://www.4bilder1wort.de/android-ios-versions/"><img src="http://i69.servimg.com/u/f69/17/63/79/66/mzl_pl11.png" border="0" width="50" height="50"></a> </div> </td><td align="left"><div style="margin:auto;text-align:center;width:100%"> <a href="http://zattoo.com/"><img src="http://i69.servimg.com/u/f69/17/63/79/66/zattoo11.png" border="0" width="50" height="50"></a> </div> </td><td align="left"><div style="margin:auto;text-align:center;width:100%"> <a href="https://itunes.apple.com/de/app/ihandy-wasserwaage-kostenlos/id299852753?mt=8"><img src="http://i69.servimg.com/u/f69/17/63/79/66/40316911.png" border="0" width="50" height="50"></a> </div> </td> </tr> </table>

Wie bekomme ich denn da jetzt noch zu jeder Grafik ein Tooltip drauf?

von Günther Fr 12 Apr 2013 - 1:24

Bitte, Christian. Smile

Der Code ist nun prinzipiell in Ordnung, aber einige überflüssige Stellen sind enthalten, und zwar innerhalb jeder einzelnen Zelle die div-Tags:

Code:: <div style="margin:auto;text-align:center;width:100%"> ... </div>

Diese sind unnötig und können entfernt werden. Stattdessen musst du nur meinem Tipp nachkommen, um dasselbe Ergebnis sinnvoller, einfacher und valider zu erreichen:

Günther schrieb:Du solltest auch besonders das Zellenattribut "align" beachten, das es dir dann ermöglicht, die einzelnen Zellinhalte zentriert auszurichten.

Du hast die einzelnen Zellen jeweils mit align="left" ausgerichtet, aber für deinen Zweck ist left nicht der richtige Wert:
http://de.selfhtml.org/html/tabellen/gestaltung.htm#ausrichtung_zellen

joschi1989 schrieb:Wie bekomme ich denn da jetzt noch zu jeder Grafik ein Tooltip drauf?

Günther schrieb:Wie du Grafiken einen Tooltip hinzufügen kannst (title-Attribut), wird dort erklärt:
http://de.selfhtml.org/html/grafiken/einbinden.htm#referenz

von joschi1989 Fr 12 Apr 2013 - 1:38

Vertsehe ich nicht das ist überflüssig?

Code:: div style="margin:auto;text-align:center;width:100%">

Oder bis wohin muss die Zeile weg?

Allles andere bekomme ich hin

von Günther Fr 12 Apr 2013 - 1:40

Ja, es ist immer wieder dieser Bereich (diese beiden zusammengehörenden Tags) überflüssig und kann entfernt werden:

Code:: <div style="margin:auto;text-align:center;width:100%"> ... </div>

Stattdessen musst du nur die align-Werte der Zellen für eine Zentrierung anpassen und alles ist wie gewünscht. Wink

Dann sind deine Fragen geklärt? Smile

von joschi1989 Fr 12 Apr 2013 - 1:42

... </div> Das finde ich nicht in der Zeile scratch

von Günther Fr 12 Apr 2013 - 1:45

<table border="0" width="100%">
<tr>
<td align="left"> <div style="margin:auto;text-align:center;width:100%"><strong>1.Platz</strong></div> </td><td align="left"> <div style="margin:auto;text-align:center;width:100%"><strong>2.Platz</strong></div> </td><td align="left"><div style="margin:auto;text-align:center;width:100%"> <strong>3.Platz</strong></div><td align="left"> <div style="margin:auto;text-align:center;width:100%"><strong>4.Platz</strong></div><td align="left"> <div style="margin:auto;text-align:center;width:100%"><strong>5.Platz</strong></div> </td>
</tr><tr>
<td align="left"><div style="margin:auto;text-align:center;width:100%">
<a href="http://www.whatsapp.com/?l=de"><img src="https://i.servimg.com/u/f69/17/63/79/66/whatsa12.png" border="0" width="50" height="50"></a> </div>
</td><td align="left"><div style="margin:auto;text-align:center;width:100%">
<a href="http://www.viber.com/"><img src="https://i.servimg.com/u/f69/17/63/79/66/viber-11.png" border="0" width="50" height="50"></a>
</div>
</td><td align="left"><div style="margin:auto;text-align:center;width:100%">
<a href="http://www.4bilder1wort.de/android-ios-versions/"><img src="https://i.servimg.com/u/f69/17/63/79/66/mzl_pl11.png" border="0" width="50" height="50"></a>
</div>
</td><td align="left"><div style="margin:auto;text-align:center;width:100%">
<a href="http://zattoo.com/"><img src="https://i.servimg.com/u/f69/17/63/79/66/zattoo11.png" border="0" width="50" height="50"></a>
</div>
</td><td align="left"><div style="margin:auto;text-align:center;width:100%">
<a href="https://itunes.apple.com/de/app/ihandy-wasserwaage-kostenlos/id299852753?mt=8"><img src="https://i.servimg.com/u/f69/17/63/79/66/40316911.png" border="0" width="50" height="50"></a>
</div>
</td>
</tr>
</table>

von joschi1989 Fr 12 Apr 2013 - 1:57

Super jetzt habe ich es Danke Günther

Den Rest krieg ich hin

Gute Nacht Sleep

von Günther Fr 12 Apr 2013 - 1:58

Wunderbar, bitteschön. Smile

Ebenfalls eine gute Nacht, Christian. Sleep

-closed-

Edit: Auf Wunsch wieder geöffnet.

von joschi1989 So 14 Apr 2013 - 0:06

Hallo Günther

Danke für´s wieder öffnen, ich habe nochmal eine kleine Frage.
Mir ist aufgefallen, dass wenn ich die Auflösung bzw. die Grösse meiner Seite veränder,
das man die Grafiken im Indexmodul nicht alle sieht.
Kann man das irgendwie einstellen, dass die Grafiken mitgehen bzw. die sich anpassen?

Tabelle Startseite - Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild Screen28

von Günther So 14 Apr 2013 - 0:15

Das kommt daher, dass dein Forum eine variable Rahmenbreite besitzt.
Auch die Breite der Portalspalten ist prozentual festgelegt, was aber bei einer variablen Rahmenbreite auch so belassen werden sollte. Ein Umstieg auf fixe Pixelwerte ist in diesem Fall nicht sinnvoll.

Deshalb ist klar, dass bei einer geringeren Bildschirmauflösung auch weniger Platz in diesem Modul zur Verfügung steht. Da Tabellen nicht automatisch umgebrochen werden, stehen dir nun drei Möglichkeiten offen:

am einfachsten: Du verschiebst dieses Modul vom Portal zu den Indexmodulen. Diese sind, unabhängig von der jeweiligen Auflösung, immer gleich breit. Danach gestaltest du die Tabelle so um, dass nur mehr so viele Spalten angezeigt werden, wie es mit der Breite der Indexmodule in Einklang steht, und erstellst dafür mehr Zeilen.
Du verschiebst das Portalmodul dort in die mittlere Spalte, wo unter jeder Auflösung ausreichend Platz zur Verfügung steht.
Du gestaltest die Tabelle von vorne herein so um, dass sie nur drei Spalten und dafür mehr Zeilen besitzt. Dann sollte sie auch bei geringen Auflösungen noch korrekt dargestellt werden.

Unelegante Lösungen (Scrollbar etc.) lasse ich mal außen vor.

von joschi1989 So 14 Apr 2013 - 0:28

Ok, hab verstanden.
Da ich mehrere solcher Tabellen machen will, bietet sich das ja an, dass
ich diese Tabelle in der Mitte platziere wo nachher dann mehrere Tabellen stehen. Dort ist ja wie du sagst genug Platz.

Danke Günther, das war´s schon. Dann kann hier auch wieder zu.

LG

Christian

von Günther So 14 Apr 2013 - 0:29

Gerne und noch einen schönen Restabend, Christian. Smile

-closed-

	Neue Beiträge seit dem letzten Besuch.	
	Textbausteine des MODERATIONSTOOL	
	AB > PFAD > GENERATOR	
	FORUM > PFAD > GENERATOR	
	Unterstützung Lösungs-Probleme	
	Auffällige User	
	Der Runde Tisch	
	HÄUFIG GESTELLTE FRAGEN	

Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild

Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild

Re: Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild

Re: Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild

Re: Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild

Re: Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild

Re: Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild

Re: Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild

Re: Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild

Re: Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild

Re: Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild

Re: Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild

Re: Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild

Re: Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild

Re: Problem mit Html Tabelle - Platzierung Überschrift + Tooltip für Bild