[CSS] Tabellen-ähnliche Anordnung

[Chrissi007]

Hi,

Ich häng hier gerade an einem bestimmt total simplen Design-CSS-Problem fest und komme einfach nicht weiter.

Es geht um folgendes:

- Simple Newsausgabe in der Form:

<ul>
<li>Datum: Das ist der Titel von News 1</li>
<li>Datum: Das ist ein sehr sehr sehr sehr sehr sehr sehr langer Titel von News 2</li>
</ul>

Soweit so gut. Jetzt möchte ich aber, dass der Schriftzug von der zweiten News umgebrochen wird und hinter das Datum eingerückt wird. Siehe beigefügten Screenshot. So soll das aussehen (Auf dem Screenshot die unterste News).

Ich habs darüber gelöst, indem ich dem Datum und der News-Überschrift jeweils ein label-Tag verpasst habe mit ein paar CSS Attributen. Also sozusagen:

<li><label style="display: block; float: left;">DATUM</label> 
<label style="display: block; float: left;">Überschrifttext</label></li>

Im Internet Explorer kommt dabei die Version raus, wie man sie auf dem Screenshot sieht. Auf dem Firefox allerdings nicht. Ich vermute, das liegt einfach daran, dass meine CSS-Defintionen wahrscheinlich total idiotisch sind. Aber ich weiß echt nicht weiter. Sieht jemand von euch, wo mein Denkfehler ist bzw. hat auch eine Mozilla-freundliche Lösung dieses Problems parat?

Es soll wie gesagt nur ein einheitlicher Blocktext entstehen und lange News nicht umgebrochen werden und dann unter dem Datum erscheinen. Der umgebrochene Text soll schön bündig hinter dem Datum stehen, so wie auf dem Screenshot zu sehen. Nur habe ich echt keine Ahnung, wie man das "schön" mit CSS machen könnte.

[Blackgreetz]

Das ist eine Tabelle. (border=0)


mfg

[Chrissi007]

Ne, der Screeny kommt ja von mir selbst und stellt das Wunsch-Ergebnis dar. Auf dem Internet Explorer funktioniert die Ausgabe wie gesagt, nur auf dem Firefox siehts eben nicht so aus, wie auf dem Screeny.

Hier ein Auszug aus dem Quelltext:

<li><label id="content_box_datefield">Son, 04.01.</label> 
<a href="/?cmd=news&nid=8&ln=de">
A b c D e f G h i J k l M</a> (0 Kommentare)</li>
<li><label id="content_box_datefield">Son, 04.01.</label> 
<a href="/?cmd=news&nid=7&ln=de">
DCS: Black Shark veröffentlicht mit längerem Heading</a> (0 Kommentare)</li>

und hier noch die Deklarationen von content_box_datefield

#content_box_datefield {
display: block;
	width: 70px;
	float:left;
	font-size: 11px;
}

Also es handelt sich schon um CSS und nicht um ein Tabellenlayout. Ein Tabellenlayout wollte ich an dieser Stelle vermeiden.


Kurz noch mal erklärt:
Was ich nicht möchte, ist dies:

25.12.2008: Das ist der Titel einer sehr langen News,
die umgebrochen wurde (0 Kommentare)

... sondern:

25.12.2008: Das ist der Titel einer sehr langen News,
            die umgebrochen wurde (0 Kommentare)

Ich vermute, dass ich das irgendwie mit zwei label-Tags realisieren könnte. Quasi dem Datum einen "display: block; float: left;" zu verpassen und ähnliche Attribute auch auf das label-Tag für die Überschrift anwenden. Nur bin ich total ratlos, wie ich das umzusetzen habe.

Über jeden noch so kleinen Tipp bin ich echt dankbar!

[Blackgreetz]

Ich bin durchaus des Lesens mächtig.
Das du keine Tabelle nutzt, seh ich an deiner Liste.

Vlt hätte ich noch sagen müssen:

"Nutz eine Tabelle, denn es ist eine."

mfg
Edit: Code bitte umbrechen.

[Chrissi007]

Du sprichst in Rätseln

Tabellen mage ich so gut es geht außen vor lassen.

Hier siehst du ein Livebeispiel (hatte gerade nix anderes):

http://www.computerbase.de

Die dortige Newsansicht wird unter Dienstag, 6. Januar 2009 ebenfalls umgebrochen. Hier ein Quelltextauszug:

<ul class="plain">

<li class="compact_item">
<small class="date">22:50</small>
<a href="/news/allgemein/computerbase/2009/januar/computerbase_ces_las_vegas/">
<strong>ComputerBase erreicht CES in Las Vegas</strong></a>
<small>(29)</small>
</li>

<li class="compact_item">
<small class="date">20:30</small>
<a href="/news/software/multimedia/2009/januar/divx_7_windows/">
<strong>DivX 7 für Windows verfügbar</strong></a> 
<small>(50)</small>
</li>

</ul>

Die haben im Prinzip genau das, was ich möchte. Das Datum steht stets einzeln vorne dran und der Text wird rechts sauber umgebrochen. Ich hab mich schon durch die dortigen css files durchgewühlt aber da ich mich mit css sehr wenig auskenne, komme ich mit den dortigen Deklarationen nicht wirklich zurecht. Die Seite zeigt mir ja, dass es mit css funktioniert - die Frage ist nur: wie? Für jemanden, der sich ein bisschen mit css auskennt müsste das doch zu beantworten sein, oder?

EDIT: Mach mal die Computerbase-Seite kleiner, in dem du dein Fenster kleiner ziehst. Du wirst sehen wie bei wenig Platz die Newsüberschriften umgebrochen werden. Genau das brauche ich.

[onemorenerd]

Mit Firebug kannst du dir die effektiv verwendeten Styles der beteiligten HTML-Elemente anzeigen lassen. Dazu muss man kein CSS-Guru sein.

[pekka]

Computerbase bescheißt mit Line-height: 130%. Das geht aber schätze ich spätestens bei der 3. Textzeile auch in die Hose.

Lade Dir wie onemorenerd schons sagt den Firebug, oder die Web Developer Toolbar für den Firefox herunter. Mit der Funktion "CSS / View Style Information" kannst Du Dir die CSS-Eigneschaften von jedem Element anzeigen lassen.

Trotzdem: Ich halte das auch für mit Kanonen auf Spatzen geschossen, und Tabellen viel besser geeignet. Für diesen Zweck sind Tabellen auch in CSS-Layouts gedacht, und auch das einzige Element das dafür vernünftig geeignet ist. Die allgemeine Verpöntheit von Tabellen bezieht sich darauf, sie als Layoutinstrument zu gebrauchen.

[ghostgambler]

Tendenziell würde ich auch zu Tabelle raten.
Ansonsten kannst du ein
float:left;display:block;width:130px; auf das label und ein margin-left:140px auf den Rest versuchen (ggf. auch noch mit float:left) ... aber dolle ist das alles nicht

[Blackgreetz]

Entschuldige für die äußerst knappe Formulierung heute Nacht.
Ich fand es aussagekräftig, aber vlt auch nur, weil ich wusste, was ich meine...

Was ich sagen wollte:

Dein Vorhaben ist keine Liste sondern eine Tabelle. Was computerbase da macht ist unsinnig und geht eventuell auf diese falsche Einstellung zurück:

Tabellen mage ich so gut es geht außen vor lassen.

Kurz knapp:

pekka: Tabellen sind für die Darstellung von tabellarischen Daten völlig in Ordnung und nach wie vor das A und O. Der allgemeine Konsens ist, daß man da von Tabellen weg soll, wo sie für Layoutzwecke benutzt werden.
Quelle

Edit: ich hab immer noch eine Scrollbar ausgehend von deinem 1. Beitrag

[Chrissi007]

Super, habt mir weiter geholfen. Danke vielmals.

Scrollbar ist jetzt hoffentlich weg, ansonsten größeren Monitor kaufen

[ghostgambler]

Original geschrieben von Chrissi007
Scrollbar ist jetzt hoffentlich weg, ansonsten größeren Monitor kaufen

Dein zweiter Post ist noch zu breit.

Wohl eher Forum wechseln, oder CSS manuell abändern...

[Chrissi007]

Postingbreite noch mals geändert...

Das Problem habe ich jetzt doch css-seitig gelöst. Ich bin folgendermaßen vorgegangen, vielleicht interessierts ja den ein oder anderen:

<li style="margin-left: 70px;"> <label style="margin-left: -70px">D A T U M</label> L I N K </li>

Das gesamte LI-Element beginnt sozusagen bei einem margin von 70px. Das Label-Element Datum beginnt bei einem negativen Margin von -70px und gehört optisch sozusagen gar nicht mehr zur Liste dazu. Hat den selben Effekt wie wenn mans mit ner Tabelle machen würde und spart ein paar Zeilen Code. Obendrein dürfts eigentlich relativ solid sein und auf allen Browsern funktionieren. Meine ich zumindest.

[Blackgreetz]

Warum?
Es ist doch keine Liste sondern eine Tabelle

[MuffiTehmaeh]

Heyho, es gibt eine Sehr gute lösung dazu die auch mir erst vor kurzem zur "Rettung" wurde:
<dl> <dt> und <dd>
der ungefähre aufbau würde so aussehen:

<dl  id="listen_name">
<dt>Spalte Links</dt>
<dd>Spalte Rechts</dd>
</dl>

Dazu muss mann nch einen kleinen CSS Angaben Pool nutzen:
Die DT Elemente brauchen

clear:left;
float:left;

und die DD Elemente

float:left;

und schon hat man eine Liste mit 2 Spalten kannst das ja mal ausprobieren und bei fragen dich einfach melden

Gruß
Richard | Muffi