CSS: 1 Bild und daneben 2 Zeilen Text

Dieses Thema im Forum "Web Page Design" wurde erstellt von NiLS-Da-BuBi, 02.02.2006.

  1. NiLS-Da-BuBi

    NiLS-Da-BuBi Thread Starter MacUser Mitglied

    Beiträge:
    707
    Zustimmungen:
    8
    Mitglied seit:
    27.11.2003
    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:
    PHP:
    <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.
     
  2. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.714
    Zustimmungen:
    115
    Mitglied seit:
    20.03.2005
    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.

    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.

    So z.B.:
    HTML:
    [...]
    <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>
    [...]
    
     
  3. Standard-Q-L-sa

    Standard-Q-L-sa MacUser Mitglied

    Beiträge:
    6
    Zustimmungen:
    0
    Mitglied seit:
    02.02.2006
    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.

    HTML:
    <div>
    	<img />
    	<h1>Schlagzeile</h1>
    	<p>Text</p>
    </div>
    und

    im Stylesheet:
    Code:
    div > img{float:left;}

    der Rest müsste ja dann von alleine gehen :)


    gruß vom Standard (erster Beitrag :) )
     
  4. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.714
    Zustimmungen:
    115
    Mitglied seit:
    20.03.2005
    Es ist eine Definitionsliste. Nur das der Term (DT) in dem Fall halt kein Text sondern eben ein Bild ist.

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

    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
     
Die Seite wird geladen...

Diese Seite empfehlen