CSS: 1 Bild und daneben 2 Zeilen Text

Diskutiere mit über: CSS: 1 Bild und daneben 2 Zeilen Text im Web Page Design Forum

  1. NiLS-Da-BuBi

    NiLS-Da-BuBi Thread Starter MacUser Mitglied

    Beiträge:
    706
    Zustimmungen:
    8
    Registriert 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.713
    Zustimmungen:
    115
    Registriert 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
    Registriert 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.713
    Zustimmungen:
    115
    Registriert 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...
Ähnliche Themen - CSS Bild daneben Forum Datum
Bild via CSS einfügen Web Page Design 15.06.2012
Bei Link:Hover ein Bild unter einem Text-Feld anzeigen Web Page Design 18.03.2012
CSS Bild ausrichten Web Page Design 10.12.2009
[CSS] Bild nach unten vervielfältigen Web Page Design 10.11.2006
CSS - Text am Bild entlang. wie? Web Page Design 26.06.2005

Diese Seite empfehlen

Benutzerdefinierte Suche