CSS: 1 Bild und daneben 2 Zeilen Text

  1. NiLS-Da-BuBi

    NiLS-Da-BuBi Thread StarterMacUser Mitglied

    Mitglied seit:
    27.11.2003
    Beiträge:
    707
    Zustimmungen:
    8
    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.
     
    NiLS-Da-BuBi, 02.02.2006
  2. msslovi0

    msslovi0MacUser Mitglied

    Mitglied seit:
    20.03.2005
    Beiträge:
    2.714
    Zustimmungen:
    115
    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>
    [...]
    
     
    msslovi0, 02.02.2006
  3. Standard-Q-L-sa

    Standard-Q-L-saMacUser Mitglied

    Mitglied seit:
    02.02.2006
    Beiträge:
    6
    Zustimmungen:
    0
    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 :) )
     
    Standard-Q-L-sa, 02.02.2006
  4. msslovi0

    msslovi0MacUser Mitglied

    Mitglied seit:
    20.03.2005
    Beiträge:
    2.714
    Zustimmungen:
    115
    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
     
    msslovi0, 02.02.2006
Die Seite wird geladen...
Ähnliche Themen - CSS Bild daneben
  1. freakApple
    Antworten:
    4
    Aufrufe:
    7.958
    macfan97
    25.06.2012
  2. hightime-fan
    Antworten:
    3
    Aufrufe:
    1.095
    hightime-fan
    26.03.2012
  3. tucholdi
    Antworten:
    3
    Aufrufe:
    1.440
    pferdle
    10.12.2009
  4. MotionX
    Antworten:
    1
    Aufrufe:
    584
    mrthomasd
    02.01.2009
  5. _julius
    Antworten:
    9
    Aufrufe:
    747
    _julius
    14.11.2006