CSS Einrücken - neben anderem Text

[Unknowen]

Hallo Forum,

ich habe folgende Problemstellung: Es handelt sich um eine große Menge an Informationen. Auf der linken Seite steht jeweils ein kurzer Text. Rechts daneben soll jeweils eine eingerückte Legende angezeigt werden. So weit so gut, nun das Problem: Die Legenden sollen immer gleich weit eingerückt werden und können mehrzeilig sein. Das ganze soll mit CSS realisiert werden.

Verwende ich span, wird jeweils nur die erste Zeile der Legende eingerückt; der Rest wird am Zeilenanfang fortgesetzt.

Verwende ich div, wird zwar alles schön eingerückt, aber dann entsteht vor dem div ein unerwünschter Zeilenumbruch. Weise ich dem div 'display:inline;' zu, komme ich zum selben Ergebnis, wie bei einem span.

Wie kann ich umsetzen, dass die Legenden in der gleichen Zeile wie der Text beginnen und immer die selbe Einrückung besitzen? Irgendwie komme ich da auf keine richtige Lösung...

[Tweetymax]

Kleine Gegenfrage...

könntest du vielleicht ein kleines Bild zusammenbasteln, wie es aussehen soll?

Denn so ganz verstehe ich noch nicht wo bzw wie die Legende sein soll.

[Unknowen]

Ich hoffe, dass es jetzt ein wenig erklärender ist.

[azett]

Was spricht gegen die Verwendung einer Tabelle?

[Tweetymax]

mist wollte ich auch grade Fragen @ azett

Eine blind-Table bietet sich dafür wirklich sehr an. Bei Divs ein Design hinzubekommen, dass dynamisch viele Zeilen beinhaltet und dann auch noch immer im selben abstand zum text steht wird schwer.

zum einen, weil Ziemlich lange Worte dir die Container komplett zerreißen können, und zum 2. weil du die Divs wahrscheinlich eh tabellenartig schachteln müsstest, um nicht auf einmal die Legende vor oder neben dem nächsten Punkt zu haben.

[Unknowen]

Was spricht gegen die Verwendung einer Tabelle?

...dass ich noch in Ausbildung bin & das mit CSS umsetzen soll.

Normal hätte ich das auch einfach mit einer Tabelle gelöst - geht einfacher und schneller.

Aber ich soll das mit CSS machen, damit ich mich damit befasse und besser auskenne. Leider komme ich da (wie bereits gesagt ^^) auf keine richtige Lösung...

[geloescht_JesterDay]

Aber ich soll das mit CSS machen, damit ich mich damit befasse und besser auskenne.

Was auch nötig ist

Ein div ist per default ein Blocklevel-Element. Als solches steht es immer in einer eigenen Zeile. Das Gegenteil davon ist ein Inline-Element, wie das Span per Default. Das steht immer im Fließtext und kann keine Eigenschaften wie Margin oder position o.ä. haben. Umschalten kannst du den default wert aber auch, und zwar per... na... display.

Hier mal auf die schnelle:

<div style="float: left; width: 100%; border: 1px solid #000000;">

<div style="float: left; width: 45%;">normaler Text normaler Text</div>

<div style="float: right; width: 45%;">Text der Legende Text der Legende Text der Legende Text der Legende</div>

</div>

<div style="float: left; width: 100%; border: 1px solid #000000;">

<div style="float: left; width: 45%;">normaler Text normaler Text</div>

<div style="float: right; width: 45%;">Text der Legende</div>

</div>

<div style="float: left; width: 100%; border: 1px solid #000000;">

<div style="float: left; width: 45%;">normaler Text normaler Text</div>

<div style="float: right; width: 45%;">Text der Legende Text der Legende Text der Legende</div>

</div>

[sunny.p]

...dass ich noch in Ausbildung bin & das mit CSS umsetzen soll.

Normal hätte ich das auch einfach mit einer Tabelle gelöst - geht einfacher und schneller.

*MÖP* falsche Antwort - weil Tabellen (unter Anderem) nicht barrierearm und absolut veraltet sind! Wenn Du jetzt lernst freu Dich, dass Du direkt mit so tollen Dingen wie CSS anfangen darfst und Dir gar nicht erst den Tabellenmist aus dem Kopf wieder rauskloppen musst.

Was auch nötig ist

Ein div ist per default ein Blocklevel-Element. Als solches steht es immer in einer eigenen Zeile. Das Gegenteil davon ist ein Inline-Element, wie das Span per Default. Das steht immer im Fließtext und kann keine Eigenschaften wie Margin oder position o.ä. haben. Umschalten kannst du den default wert aber auch, und zwar per... na... display.

Hier mal auf die schnelle:

<div style="float: left; width: 100%; border: 1px solid #000000;">

<div style="float: left; width: 45%;">normaler Text normaler Text</div>

<div style="float: right; width: 45%;">Text der Legende Text der Legende Text der Legende Text der Legende</div>

</div>

<div style="float: left; width: 100%; border: 1px solid #000000;">

<div style="float: left; width: 45%;">normaler Text normaler Text</div>

<div style="float: right; width: 45%;">Text der Legende</div>

</div>

<div style="float: left; width: 100%; border: 1px solid #000000;">

<div style="float: left; width: 45%;">normaler Text normaler Text</div>

<div style="float: right; width: 45%;">Text der Legende Text der Legende Text der Legende</div>

</div>

Und am Besten definierst Du dir für das umfassende und die links-/rechts-floatenden DIVs eigene Klassen in der externen CSS-Datei, die Du nur noch aufrufen brauchst und immer wieder verwenden/ändern kannst, wenn es nötig ist.

[geloescht_JesterDay]

*MÖP* falsche Antwort - weil Tabellen (unter Anderem) nicht barrierearm und absolut veraltet sind!

Allgemein stimm ich dir da voll zu... das Beispiel ist aber eins, wo man durchaus eine Tabelle im Sinn von Tabellen verwenden könnte. Denn es ist ja u.U. schon eine Tabelle die da angezeigt werden soll (auch wenn sie blind ist). Also Daten in Zeilen und Spalten die da nicht nur wegen dem Layout drinstehen...

[Unknowen]

Aber ich soll das mit CSS machen, damit ich mich damit befasse und besser auskenne.

Das sollte sich jetzt nicht so anhören, dass ich was dagegen hätte. Im Gegenteil: Ich bin ja froh, wenn ich CSS dazu lerne.

Vielen Dank für den Code JesterDay, hat mir sehr weitergeholfen. ...float ist hier im Prinzip dafür, dass das div keine 'eigene Zeile' bekommt, sondern vom jeweils anderen div 'umflossen' wird, oder?

Und am Besten definierst Du dir für das umfassende und die links-/rechts-floatenden DIVs eigene Klassen in der externen CSS-Datei, die Du nur noch aufrufen brauchst und immer wieder verwenden/ändern kannst, wenn es nötig ist.

Ja, das hätte ich sowieso gemacht, anders wäre das ja sehr umständlich. Aber trotzdem danke, dass du mich darauf hingewiesen hast.

Bis hier hin hat alles wunderbar geklappt, so wie ich mir das vorgestellt hab. Jedoch hab ich bei jeder Legende vorne noch ein • (welches auch eins bleiben soll) stehen. Mit text-indent kann man ja die erste Zeile einrücken. In meinem Fall möchte ich es genau umgekehrt, dass alles außer der ersten Zeile eingerückt wird. Mit negativen Werten funktioniert das auch, allerdings wird manchmal der Beginn des Textes abgeschnitten. (siehe Bild)

Kann das an der zugeteilten div-Größe liegen, dass die Legende diesen Bereich überschreitet und deswegen abgeschnitten wird? Gibt es da noch weiter Möglichkeiten, um alle außer der ersten Zeile einzurücken?

Oder muss ich das dann nochmal verschachteln? :confused:

[geloescht_JesterDay]

Oder muss ich das dann nochmal verschachteln? :confused:

Hab ich jetzt nicht ausprobiert... aber wieso machst du nicht das was so ein Bull automatisch setzt? eine Liste

<ul>

<li>Hier steht der Text der Legende</li>

<ul>

CSS heißt nicht, dass du alles was du sonst mit Tabellen machen würdest jetzt mit Divs machst (Es ist für Beispiele aber allgemein leichter Divs für alles zu nehmen ). Vorallem machst du alles mit den Tags, die für sowas gedacht sind. Und die Tags kannst du dann mit CSS entsprechend deinen Wünschen stylen.

[geloescht_JesterDay]

...float ist hier im Prinzip dafür, dass das div keine 'eigene Zeile' bekommt, sondern vom jeweils anderen div 'umflossen' wird, oder?

Mit float nimmst du das Element aus dem normalen Textfluss heraus. Es steht also nicht an der Position, an der es normalerweise im Text stehen würde. Allgemein halt links oder rechts, umflossen vom normalen Textfluss.

Da du das Element aber aus dem normalen Textfluss herausnimmst, interagiert es auch nicht mehr so wirklich mit dem normalen Textfluss bzw den Elementen darin.

Es gibt eigentlich 3 Bereiche die sich gegenseitig nur bedingt beeinflussen. Der normale Textfluss, floats und position: absolute. Elemente in diesen Bereichen beeinflussen sich gegenseitig, Elemente aus anderen Bereichen werden aber nur bedingt beeinflusst.

Also mal als Beispiel:

* 2 Divs, im Quelltext nacheinander, im normalen Textfluss werden untereinander dargestellt.

* Das erste Div im float Bereich beeinflusst den Inhalt vom Div danach, aber nicht das div direkt.

* Das erste davon im position: absolute Bereich beeinflusst das zweite gar nicht mehr.

Ich glaube position: fixed ist auch noch unabhängig vom Rest...

Aus dem Grund ist das äußere Div auch als float: left definiert, weil es sonst mehr oder weniger unabhängig von den inneren Divs wäre.

Das wirkt sich halt auf größere codegerüste schon arg aus. So einfach wie eine Tabelle zusammenpuzzlen (ein Teil neben das andere) ist das halt nicht...

Ich denke das ist es auch, was viele so Probleme macht (naja, macht es ja schon fast allen) mit CSS und auf den ersten Blick würde man ja schon sagen dass das in der Tabellenart (alles wie ein Puzzle nebeneinander bzw untereinander) leichter ist. Ich denke aber grundlos werden die das nicht so gebaut haben und mit etwas Übung geht es schon.

Und mit Inlineblocks (Also eine Mischung aus den beiden, die leider noch von kaum einem Browser unterstützt werden) kommt man ja auch dem gefühlt einfacheren Layout wieder näher.

Bearbeitet 22. Juli 2008 von JesterDay

[Unknowen]

Hab ich jetzt nicht ausprobiert... aber wieso machst du nicht das was so ein Bull automatisch setzt? eine Liste

...da komme ich dann wieder zu dem Problem, dass NACH jeder Legende eine Leerzeile entsteht. :/ Und wenn ich da float:left; einfüge, sind die Bulls weg. Oder gibt es dafür auch wieder etwas?

CSS heißt nicht, dass du alles was du sonst mit Tabellen machen würdest jetzt mit Divs machst (Es ist für Beispiele aber allgemein leichter Divs für alles zu nehmen ). Vorallem machst du alles mit den Tags, die für sowas gedacht sind. Und die Tags kannst du dann mit CSS entsprechend deinen Wünschen stylen.

Ja stimmt, soll ja alles seinen Sinn haben.

Danke für die wirklich ausführliche Erklärung über float. Jetzt kommt mir das alles schon viel logischer vor.

[geloescht_JesterDay]

...da komme ich dann wieder zu dem Problem, dass NACH jeder Legende eine Leerzeile entsteht. :/ Und wenn ich da float:left; einfüge, sind die Bulls weg. Oder gibt es dafür auch wieder etwas?

Das könnte daran liegen, dass ul ein Blocklevel-Element ist? (hab ich jetzt nicht nachgesehen und weiß es auch nicht) Oder dass da standardmäßig ein margin-bottom vorhanden ist? Oder oder...

Jeder Browser hat für die meisten Elemente erstmal ein Standard-Style. Wenn dir der nicht passt musst du den explizit ändern. (Beispiel h1, das sieht bei jedem Browser nach ner Überschrift aus, aber doch überall anders)

[Unknowen]

Hab das gerade eben herausgefunden, dass es mit 'margin-bottom:0px;' funktioniert. Jetzt passt alles so, wie ich es haben wollte.

Das mit den Standardwerten für jedes Element ist mir zwar bewusst, jedoch ist es bei mir da eher das Problem, dass ich oft nicht genau weiß, mit welchen Werten ich arbeiten muss (bzw. welche das Element unterstützt) - da brauch ich meistens noch´n Weilchen. :hells:

Danke nochmal für Deine Hilfe und dass du dir so viel Zeit dafür genommen hast.

[Toothrot]

Das mit den Standardwerten für jedes Element ist mir zwar bewusst, jedoch ist es bei mir da eher das Problem, dass ich oft nicht genau weiß, mit welchen Werten ich arbeiten muss (bzw. welche das Element unterstützt) - da brauch ich meistens noch´n Weilchen. :hells:

Dafür gibt es SelfHTML, da kann man sowas fix nachschlagen.