Zum Inhalt springen

Zweizeilige Überschrift

Erstellt am 15. Juli 2011 · 8 Antworten · letzte Antwort am 18. Juli 2011

Tags: Inhaltselemente, HTML & CSS, Frage

Mosaik ·

Hallo,

ich möchte gerne in den Contentelementen eine zweizeilige Überschrift einfügen.
Dafür habe ich folgendes Script verwendet,

http://www.thomas-hirt.at/blog/detailansicht/datum/2008/07/30/typo3-mehrzeilige-ueberschrift-und-zeilenumbruch.html

Alles klappt soweit, außer, dass der Abstand zwischen Headline und Subtitle zu weit ist.
Wenn im Backend im Contenelement ab der zweiten Zeile beginne wird alles richtig dargestellt.

Hat jemand eine Ideem wieso?

Grüße
Mosaik

headline.png

aimcom ·

Was für HTML-Code wird denn für deine Überschrift gerendert und hast du dein CSS-Stylesheet entsprechend überprüft, ob dadurch irgendwelche unerwünschten Abstände gerendert werden?

Mosaik ·

Hallo,

das ist der html code. alles ok.

<div class="csc-header csc-header-n1"><h2 class="csc-firstHeader">Headline<br />
Subtitle</h2></div>

Eingebunden ist das CSS Styles Content.

Grüße
Mosaik

Mosaik ·

Habe mal nachgemessen. Das sind über 280px Abstand zwischen Headline und Subline.
Habe es auch mal auf einer anderen Instllataion auf einem anderen Server getestet. Dasselbe Problem :-(

Hat jemand noch eine Idee, wie ich zweizeilige Überschirften erzeugen kann?

aimcom ·

Das kann ich leider gar nicht nachvollziehen, denn warum rendert der Browser denn überhaupt einen Zeilenumbruch? Der HTML-Schnipsel, den du gepostet hast, müsste dazu führen, dass die beiden Worte einfach nebeneinander stehen.

Ich würde mal mit einem entsprechenden Tool wie Firebug für Firefox, Dragonfly für Opera oder den Entwickler Tools vom Safari / Chrome nachschauen, welches Element den Abstand verursacht.

Mosaik ·

Der Umbruch ist schon ok. Beim Kopieren ist wohl etwas Code verloren gegangen.

<div class="csc-header csc-header-n1"><h2 class="csc-firstHeader">Headline<br />
Subtitle</h2></div>

Hier ein Auszug aus Firebug.

<div id="c766" class="csc-default" style="margin-bottom:5px;">
<div class="csc-header csc-header-n1">
<h2 class="csc-firstHeader">
Headline
<br>
Subtitle
</h2>
</div>
#content h2, #contentwide h2, #contentwide2 h2 {
    color: #00AEEF;
    font-size: 19px;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}
Geerbt vondiv#content
#content {
    line-height: 1.5em;
}
Geerbt vondiv#wrap
#wrap {
    color: #404040;
}
Geerbt vonbody
body {
    color: #404040;
    font-family: Arial,Verdana,Tahoma,sans-serif;
    font-size: 70%;
    font-size-adjust: none;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
aimcom ·

Was passiert, wenn du im Firebug testweise die Angabe "line-height: 1.5em" ausknipst? Ich vermute, dass es an diesem Wert liegt.