CSS: 1 Bild und daneben 2 Zeilen Text

[NiLS-Da-BuBi]

Mahlzeit,

also ich habe folgendes Problem:

Ich möchte gerne eine art Schlagzeile darstellen - als erstes kommt ein Bild (eine art Bullet) und daneben sollen dann zwei Zeilen Text stehen: Headline und in der zweiten Zeile Datum und Uhrzeit.

mit einer Tabelle wäre das ganz easy:

<table>
  <tr>
    <td rowspan="2"><img....></td>
    <td><h1>Schlagzeile</h1></td>
  </tr>
  <tr>
    <td>Datum Uhrzeit</td>
  </tr>
</table>

Ok mit CSS würde ich wohl LI und UL nutzen... aber wie wie wie?

Erbitte Tipps!
Danke.

 

[msslovi0]

mit einer Tabelle wäre das ganz easy:

Definitionssache. Außerdem ist mir nicht so ganz klar, was eine Überschrift erster Ordnung da soll. Außer es ist wirklich die Topnews auf deiner Seite.

Ok mit CSS würde ich wohl LI und UL nutzen

Nein, mit css kannst du auch Tabellen nutzen. Aber wenn du hin zu vernünftigem Markup und weg von Tabellen als Layoutkrücken willst wäre auch UL/LI der falsche Ansatz, denn UL bietet dir keine Möglichkeit, Bild und zugehörige Beschreibung vernünftig in Relation zu bringen.

... aber wie wie wie?

So z.B.:

[...]
<style type="text/css">
  dt {
    float: left;
    margin-right: 15px; /* Damit der Text nicht so am Bild klebt */
  }
</style>
[...]
<dl>
  <dt><img src="test.png" alt="" /></dt>
  <dd><h4>&Uuml;berschrift</h4>Datum Uhrzeit</dd>
</dl>
[...]

 

[Standard-Q-L-sa]

hallöchen
also DL ist aber auch nicht unbedingt angebracht an dieser Stelle, da dies eine Definitionsliste wäre.
Tabellen schon eher, obwohl der Inhalt keine tabellarischen Werte enthält.

Ich würde das In einem DIV-Container machen.

<div>
	<img />
	<h1>Schlagzeile</h1>
	<p>Text</p>
</div>

und

im Stylesheet:

div > img{float:left;}

der Rest müsste ja dann von alleine gehen


gruß vom Standard (erster Beitrag )

 

[msslovi0]

hallöchen
also DL ist aber auch nicht unbedingt angebracht an dieser Stelle, da dies eine Definitionsliste wäre.

Es ist eine Definitionsliste. Nur das der Term (DT) in dem Fall halt kein Text sondern eben ein Bild ist.

Tabellen schon eher, obwohl der Inhalt keine tabellarischen Werte enthält.

Tabellen schon gar nicht, weil der Inhalt keine tabellarischen Werte enthält.

<div>
	<img />
	<h1>Schlagzeile</h1>
	<p>Text</p>
</div>

Nur weil es funktioniert ist es weder sinnvoll noch schön, geschweige denn unter semantischen Gesichtspunkten gut zu heißen, da durch diese Auszeichnung keinerlei Beziehung zwischen Bild und zugehörigem Text hergestellt werden kann.

Gruß

Matt
P.S.: Willkommen im Forum