ubuntuusers.de

Hallo,
Ich möchte auf einer Website ein Bild und die passende Bildunterschrift in einer Tabelle anzeigen lassen. Das klappt soweit auch ganz gut. Nur ist es ziemlich aufwändig immer untenstehen Code komplett abzutippen. Da ich selbst nicht ganz so fit mit der Verwendung von HTML und CSS bin würde ich gerne wissen, ob es irgendwie möglich ist das Tabellenlayout im stylesheet zu definieren, damit der Aufruf des ganzen nicht mehr so kompliziert ist.
Sowas in die Richtung <bild_links bild="http://blablubb" text="Bildunterschrift">
Ist soetwas möglich? Ich würde mich über eine Antwort freuen. Falls ihr noch andere Ideen habt nehme ich die auch gerne entgegen. Die Darstellung sollte schon möglichst so aussehen wie in diesem Eintrag in meinem Blog. Nur ist mir das ein bisschen zu aufwändig ☺
Da es ja immer die selbe Tabelle ist aber nur der Inhalt anders ist sollte das irgendwie möglich sein oder?

<table align="left" border="1" cellpadding="5" cellspacing="0">
<tr>
<th><img src="Pfad zum Bild"></th></tr>
<tr><td align="center"><b>Bildunterschrift</b></td></tr>
</table>

Ich bin ein HTML-CSS-Analphabet, und empfehle daher ein template-script:

1
2
3
4
5
6

#!/bin/bash
echo '<table align="left" border="1" cellpadding="5" cellspacing="0">
<tr>
<th><img src="'$1'"></th></tr>
<tr><td align="center"><b>'$2'</b></td></tr>
</table>'

aufzurufen mit

tabletemplate.sh "foo.bar/usplash.png" "Neuer Bootsplash"

Aber ein kleines CSS wäre wohl eleganter - ich glaube aber das gibt es nicht, sonst würde man das und ähnliches öfter sehen.

Noch eleganter ist wohl eine Lösung mit CSS, aber ohne Tabelle. ☺

Nur mit CSS wird er sich wohl so oder so keine Arbeit sparen, weil irgendwie die verschiedenen Elemente vom restlichen Text differenziert werden müssten Pseudo:

<div id="floating_image">
 <image src = "foo" />
 Captiontext
</div>

Ist also auch nicht unbedingt kürzer. Ganz elegant würde ich wohl nen XML und ne vernünftige XSLT dazu schreiben, macht den Content auch besser verwaltbar.

Bilder kann man mit den CSS-Eigenschaften "display: inline" und "float: left" linksbündig ausrichten. Genaueres dazu steht lässt sich auf http://de.selfhtml.org nachlesen.

Tabellen sollte man übrigens nie für Layout-Zwecke einsetzen, sondern nur und ausschließlich zur Darstellung tabellarischer Daten. Und man sollte HTML und CSS lernen, bevor man eine Website aufsetzt ...

@Greebo
Eine Lösung ohne Tabelle ist wenigstens semantisch korrekt. "id" ist in deinem Beispiel übrigens nicht unbedingt das richtige Attribut, da davon auszugehen ist, dass mehrere Bilder auf einer Seite auf diese Art ausgerichtet werden. "class" wäre richtig.

Lunar schrieb:

Bilder kann man mit den CSS-Eigenschaften "display: inline" und "float: left" linksbündig ausrichten. Genaueres dazu steht lässt sich auf >http://de.selfhtml.org nachlesen.

Das weiß ich, ich hab die Tabelle "missbraucht", weil mir das für mein Vorhaben als erstes eingefallen ist.

Tabellen sollte man übrigens nie für Layout-Zwecke einsetzen, sondern nur und ausschließlich zur Darstellung tabellarischer Daten. Und man sollte HTML >und CSS lernen, bevor man eine Website aufsetzt ...

Also wäre es dann besser, wenn ich das Bild rechts- bzw. linksbündig ausrichte, mit CSS einen Rahmen drum zeichnen lasse? Für die Bildunterschrift dann ebenfalls einen Rahmen, der dann unterhalb vom Bild platziert wird?
Edit:
Ich habe mir jetzt folgendes überlegt:

span.bildtext {
display: block;
border-top-width:1px;
border-top-style:solid;
border-top-color:white;
color: white;
text-align: center;
} 

.bild-rechts
{
float:right;
text-align:right;
border-width:1px;
border-style:solid;
border-color:white;
}

Bild und Text einsetzen:

<div class="bild-rechts">Pfad zum Bild
<span class="bildtext">Bildunterschrift</span>
</div>

Lunar schrieb:

Tabellen sollte man übrigens nie für Layout-Zwecke einsetzen, sondern nur und ausschließlich zur Darstellung tabellarischer Daten.

Fakt ist, dass sich der Einsatz von Tabellen zu Layout-Zwecken als ziemlich praktisch erwiesen hat, denn andernfalls wäre wohl niemand auf die Idee gekommen, CSS-Eigenschaften wie display: table-cell u. ä. einzuführen.

Der Unterschied ist nur, dass dieses Element Teil einer Formatierungssprache ist, also dafür zuständig ist, wie etwas aussehen soll. Dementsprechend ist es völlig okey mit CSS eine Darstellung zu verbiegen. Renderer die CSS interpretieren stellen das (hoffentlich) wie gewünscht dar, und Renderer die CSS außenvor lassen haben die Auszeichnungen von HTML zur Verfügung. Der Fehler auf den Lunar wahrscheinlich aufmerksam machen wollte ist eben etwas als etwas auszuzeichen, was es nicht ist. Dann bedankt sich nämlich jeder Sprachsynthesizer, Suchmaschinenranker, Kleingeräterenderer (Handy und Co), oder Textbrowser. Ich bin mir aber bewusst, dass dir das eigentlich bewusst ist 😉.

@lunar Ja stimmt, habe ich beim AdHoc zusammentippseln nicht bedacht.

Greebo schrieb:

Der Unterschied ist nur, dass dieses Element Teil einer Formatierungssprache ist, also dafür zuständig ist, wie etwas aussehen soll.

Der Unterschied ist in erster Linie der, dass display: table-cell im IE < 8 nicht funktioniert und man es daher de facto nicht nutzen kann. Klar, Tabellen sind semantisch nicht korrekt, und ich habe mich damals auch bemüht, sie zu vermeiden. Im nachhinein wäre das Layout mit Tabellen aber einfacher umzusetzen gewesen.