[ERLEDIGT] Bild und Text in Tabelle nebeneinander stellen

[belame]

Moin! Seit 3 Tagen jetzt, versuche ich meine Bilder in der Tabelle neben den Text zu stellen. Bei mir sieht das jedoch leider so
aus:

Hier der Quellcode dazu:

<table>
<tbody>
<tr>
<td><img class="alignnone wp-image-891" src="[URL]http://schreckschusswaffen-vergleich.de/wp-content/uploads/2017/04/roehmrg300-1-300x213.jpg[/URL]" alt="" width="200" height="142" /></td>
<td style="text-align: left;"><strong>Röhm RG 300</strong>
- Kaliber: 6mm Flobert
- Magazinkapazität: 10 Schuss
- Gesamtlänge: 141 mm
- Gewicht: 465 gr<strong style="color: #f33f3f;">71,00€</strong> Zum Shop&gt;&gt;</td>
</tr>
<tr>
<td><img class="alignnone wp-image-894" src="[URL]http://schreckschusswaffen-vergleich.de/wp-content/uploads/2017/04/Coltdoubleeagle-300x198.jpg[/URL]" alt="" width="200" height="132" /></td>
<td style="text-align: left;"><strong>Colt Double Eagle</strong>
- Kaliber: 9mm P.A.K.
- Magazinkapazität: 8 Schuss
- Gesamtlänge: 190 mm
- Gewicht: 1 Kg<strong style="color: #f33f3f;">71,00€</strong> Zum Shop&gt;&gt;</td>
</tr>
<tr>
<td><img class="alignnone wp-image-892" src="[URL]http://schreckschusswaffen-vergleich.de/wp-content/uploads/2017/04/p88compact-300x235.jpg[/URL]" alt="" width="200" height="157" /></td>
<td style="text-align: left;"><strong>Walhter P88 Compact</strong>
- Kaliber: 9mm P.A.K.
- Magazinkapazität: 10 Schuss
- Gesamtlänge: 182mm
- Gewicht: 940 gr<strong style="color: #f33f3f;">71,00€</strong> Zum Shop&gt;&gt;</td>
</tr>
<tr>
<td><img class="alignnone wp-image-893" src="[URL]http://schreckschusswaffen-vergleich.de/wp-content/uploads/2017/04/zorakimod914-300x242.jpg[/URL]" alt="" width="200" height="161" /></td>
<td style="text-align: left;"><strong>Zoraki Mod. 914</strong>
- Kaliber: 9mm P.A.K.
- Magazinkapazität: 14 Schuss
- Gesamtlänge: 154 mm
- Gewicht: 700 gr<strong style="color: #f33f3f;">71,00€</strong> Zum Shop&gt;&gt;</td>
</tr>
<tr>
<td><img class="alignnone wp-image-890" src="[URL]http://schreckschusswaffen-vergleich.de/wp-content/uploads/2017/04/zorakim906-300x217.jpg[/URL]" alt="" width="200" height="145" /></td>
<td style="text-align: left;"><strong>Zoraki Mod. 906</strong>
- Kaliber: 9mm P.A.K.
- Magazinkapazität: 6 Schuss
- Gesamtlänge: 145 mm
- Gewicht: 470 gr<strong style="color: #f33f3f;">71,00€</strong> Zum Shop&gt;&gt;</td>
</tr>
</tbody>
</table>

Wenn ich diesen Quellcode über einen editor als html speicher und im browser öffne wird mir die Tabelle zwar so angezeigt, das die bilder und texte nebeneinander stehen, jedoch hab ich die tabelle bei wordpress in meine Seite eingefügt - und da wirds so angezeigt wie auf meinem Bild ?!?!

Was muss ich ändern?
Vielen Dank im Voraus!
Béla

 

[SpiceLab]

Wenn ich diesen Quellcode über einen editor als html speicher und im browser öffne wird mir die Tabelle zwar so angezeigt, das die bilder und texte nebeneinander stehen,

Kann ich bestätigen: https://jsfiddle.net/SpiceLab/m3wjac04/

jedoch hab ich die tabelle bei wordpress in meine Seite eingefügt - und da wirds so angezeigt wie auf meinem Bild ?!?!

Was muss ich ändern?

Das CSS vom Wordpress-Theme. Was für eine Frage

Inspiziere die Elemente mit dem integrierten DevTool deines verwendeten Browsers, um dahinterzukommen, welche CSS-Regel/n dafür verantwortlich ist/sind, und sie in einem zweiten CSS zu überschreiben.

Mehr können wir dir da auch nicht empfehlen, ausser, dass du die Tabelle semantisch mißbrauchst/zweckentfremdest. Ich kann darin keine tabellarischen Daten entdecken, die zB aus einer Datenbank stammen, die selbst eine tabellarische Struktur aufweist.

 

[SpiceLab]

PS: Weil ich es erst jetzt bewusst wahrgenommen haben, nachdem ich deinen Code in einen Syntax-Highlighter gepackt habe:

<img class="alignnone" ...>

Hast Du Dich schon darüber informiert, was es beispielsweise mit dieser CSS-Klasse auf sich hat? Mit welchen CSS-Eigenschaften sie im Einzelnen ausgestattet ist?

https://www.google.de/search?q=alignnone -> https://codex.wordpress.org/CSS#WordPress_Generated_Classes

 

[belame]

klar, die Idee hatte ich auch schon...
Aber da konnte ich keine ungewöhnlichkeiten erkennen:

 

[SpiceLab]

Jo, an diesem Ausschnitt liegt's mit Sicherheit nicht, der das äußere Erscheinungsbild der Tabelle definiert; dein Problem spielt sich aber im Inneren der Tabelle ab.

Weitermachen/-suchen!

 

[belame]

Kann ich bestätigen: https://jsfiddle.net/SpiceLab/m3wjac04/
Inspiziere die Elemente mit dem integrierten DevTool deines verwendeten Browsers, um dahinterzukommen, welche CSS-Regel/n dafür verantwortlich ist/sind, und sie in einem zweiten CSS zu überschreiben.

klar, die Idee hatte ich auch schon, allerdings konnte ich da keine texte erkennen, die da nicht hingehören.

PS: Weil ich es erst jetzt bewusst wahrgenommen haben, nachdem ich deinen Code in einen Syntax-Highlighter gepackt habe:

<img class="alignnone" ...>

Hast Du Dich schon darüber informiert, was es beispielsweise mit dieser CSS-Klasse auf sich hat? Mit welchen CSS-Eigenschaften sie im Einzelnen ausgestattet ist?

Wenn ich das bild auf alignleft oder alignright setze, verändert es zwar seine position, es ist aber trozdem noch ein block element oder so.

 

[SpiceLab]

es ist aber trozdem noch ein block element oder so.

Wie gesagt

Jo, an diesem Ausschnitt liegt's mit Sicherheit nicht, der das äußere Erscheinungsbild der Tabelle definiert; dein Problem spielt sich aber im Inneren der Tabelle ab.

Weitermachen/-suchen!

Schließlich besteht das Wordpress-(Theme-)CSS ja nicht nur aus diesen paar Regelblöcken.

Wenn du das <img>-Element im DevTool unter die Lupe nimmst, werden dir u.a. alle CSS-Regeln aufgelistet, die für es gelten. Über eine vorangestellte Checkbox, können sie wahlweise deaktiviert, sowie ihre gesetzten Eigenschaftswerte editiert werden, um das Verhalten des Elements zu studieren, und so die verantwortliche Regel dingfest zu machen.

 

[belame]

Wie gesagt
Schließlich besteht das Wordpress-(Theme-)CSS ja nicht nur aus diesen paar Regelblöcken.

Wenn du das <img>-Element im DevTool unter die Lupe nimmst, werden dir u.a. alle CSS-Regeln aufgelistet, die für es gelten. Über eine vorangestellte Checkbox, können sie wahlweise deaktiviert, sowie ihre gesetzten Eigenschaftswerte editiert werden, um das Verhalten des Elements zu studieren, und so die verantwortliche Regel dingfest zu machen.

Dank dir! Hab ein falsches vertical-align im dev tool gefunden!

 

[SpiceLab]

Hast Du Dich schon darüber informiert, was es beispielsweise mit dieser CSS-Klasse auf sich hat? Mit welchen CSS-Eigenschaften sie im Einzelnen ausgestattet ist?

https://www.google.de/search?q=alignnone -> https://codex.wordpress.org/CSS#WordPress_Generated_Classes

Hab eben mal die weiteren Google-Suchergebnisse verfolgt, und als Non-WP-User wieder mal was dazulernen können, und bei dir eventuell der Fall sein könnte.

Gut möglich, dass WP die Texte jeweils in einen Textabsatz packt. Tja, und <p></p> ist nunmal von Natur aus ein Block-Element - ganz ohne jeglichen CSS-Einfluss.

• https://css-tricks.com/snippets/wordpress/remove-paragraph-tags-from-around-images/
• https://gist.github.com/davidrgreen/309022d02ea3edd15079

 

[SpiceLab]

Hab eben mal die weiteren Google-Suchergebnisse verfolgt, und als Non-WP-User wieder mal was dazulernen können, und bei dir eventuell der Fall sein könnte.

Gut möglich, dass WP die Texte jeweils in einen Textabsatz packt. Tja, und <p></p> ist nunmal von Natur aus ein Block-Element - ganz ohne jeglichen CSS-Einfluss.

• https://css-tricks.com/snippets/wordpress/remove-paragraph-tags-from-around-images/
• https://gist.github.com/davidrgreen/309022d02ea3edd15079

Dank dir! Hab ein falsches vertical-align im dev tool gefunden!

Oder am Ende halt doch nur so profan