CSS Automatischer Zeilenumbruch nach CSS-Selektor

[AndrewPoison]

Vorab: die kleine Stelle Quelltext, die uns interessiert:

<span id="head">Titeldingsbums</span>
<span id="date">Und hier steht auch was</span>

Kurze Frage: gibt es eine Möglichkeit, den CSS-Selektor "head" so zu gestalten, dass nach ihm automatisch ein Zeilenumbruch erfolgt? Ich meine, ich könnte ja auch einfach ein "<br/>" hinter das erste "</span>" setzen - aber geht es eben auch mit CSS? Denn so wie der Quelltext aktuell da steht, erscheint der Text ja direkt hintereinander.

 

[System01]

probiers mit:

<div>text ... </div>
<div>noch ein text</div>

 

[AndrewPoison]

Naja, das ist ja auch nur eine andere Methode, es eben nicht mit CSS sondern über die HTML-Codes zu regeln. Der HTML-Quelltext sollte aber nach Möglichkeit unangetastet bleiben. Das CSS darf misshandelt werden

 

[Mr. Snoot]

So:

    <span id="head" [B][COLOR="Red"]style="display:block"[/COLOR][/B]>Titeldingsbums</span>
    <span id="date">Und hier steht auch was</span>

bzw. halt #head {display: block;} im Stylesheet.

 

[AndrewPoison]

Jappy... genau die Property hab ich gesucht. Hab mich durch alle möglichen Line- und Style-Properties gequält :/

Thx, Mr. Snoot ^^


Das dumme Display-Property ist irgendwie immer für ne ganze Menge mehr verantwortlich als ich ihm zugestehen will

 

[QXARE]

Oder du machsts mit dem Pseudoelement :after und dem content-Attribut, wobei das noch nicht überall unterstützt wird...

Btw. Es gibt keinen head-Selektor...

Das dumme Display-Property ist irgendwie immer für ne ganze Menge mehr verantwortlich als ich ihm zugestehen will

Wieso dieses Attribut dumm sein soll versteh ich nicht. Der <span>-Tag ist ein inline-Element und wird auch als solches dargestellt...

 

[AndrewPoison]

Auch wenn schon alles wunderbar so funzt wie es soll, hab mich vielleicht etwas unglücklich ausgedrückt:

Das SPAN-Element hat eine ID namens "head", dafür gibt es einen CSS-Selektor (eben den Head-Selektor im Stylesheet),.
Und das mit dem "dumm" ist nicht ganz so gemeint wie es da steht -> deswegen Smily.

Wie gesagt, mittels display: block; läuft nun alles genau so, wie es soll und angedacht war. Mehr gibts eigentlich nicht zu sagen. Du kennst schließlich nicht den ganzen Quelltext bzw. dessen Struktur und Sinn ^^

 

[Fatal Error]

du könntest der #head auch einfach margin-bottom: 10px; zum beispiel geben, oder mit em statt pixeln

 

[Mr. Snoot]

@ Fatal Error: damit vergrößerst du ja nur den Außenabstand nach unten - das zweite span-Element bleibt dadurch aber wo es ist.