Anpassen der horizontalen Trennlinie

[Konrad L. M. Rudolph]

Moin,

ich würde gerne die horizontalen Trennlinie anpassen, und zwar wie in Büchern üblich mit einem zentrierten Trennzeichen.
Die erste Überlegung wäre dabei z.B. so etwas:

hr {
    border: none;
    content: "*";
    font-size: 2em;
    text-align: center;
}

Das klappt natürlich nicht, da "content" nur für die Pseudklassen :before und :after definiert ist.
Workaround wäre jetzt, ein Hintergrundbild zu verwenden. Aber das skaliert ja nicht mit, wenn man die Größe der Dokumentschriftart ändert.
Gibt es da eine Lösung für?

lg, Konrad -

[Webblob]

Moin Konrad,

ich würde gerne die horizontalen Trennlinie anpassen

schau' mal hier, vielleicht hilft es dir weiter
http://css-discuss.incutio.com/?page=HorizontalLine

Gruß Gunther

[Konrad L. M. Rudolph]

Moin,

schau' mal hier, vielleicht hilft es dir weiter
http://css-discuss.incutio.com/?page=HorizontalLine

Leider nein: die Seite setzt sich nur mit dem Anpassen der Farbe auseinander, nicht mit Symbolinhalten.

Die allgemeine Lösung via Schachtelung in <div> finde ich nicht schön.

lg, Konrad -

[Webblob]

Moin nochmal!

Bist du auch den Links auf der Seite gefolgt? Insbesondere zu http://www.sovavsiti.cz/css/hr.html

Für mein Verständnis: Soll es eine Linie mit einem zentriertem Trennzeichen sein, oder nur ein Trennzeichen? Und was soll skalieren beim Ändern der Schriftgröße (hab' das noch nicht ganz verstanden)?

Gruß Gunther

[Konrad L. M. Rudolph]

Moin,

Bist du auch den Links auf der Seite gefolgt? Insbesondere zu http://www.sovavsiti.cz/css/hr.html

Für mein Verständnis: Soll es eine Linie mit einem zentriertem Trennzeichen sein, oder nur ein Trennzeichen? Und was soll skalieren beim Ändern der Schriftgröße (hab' das noch nicht ganz verstanden)?

Es soll ein Trennzeichen (ohne Linie) sein.
Das Skalieren soll sein, dass wenn ich die Schriftgröße in meinem Browser ändere, sich auch die Größe des Symbols ändert. Und das geht eben mit einem Bild nicht.

lg, Konrad -

[agapanthus]

Moin.

Gibt es da eine Lösung für?

Eigentlich sollte style="display:inline" die Lösung sein:
<hr style="display:inline"> * <hr style="display:inline">

Das versagt aber. In Opera 7.54 geht das:
<hr style="display:inline" width="48%" > * <hr style="display:inline" width="48%" >

Und das geht möglicher Weise (?) überall:

Mach Dir ein 1px-Image (bubble.gif) mit der entsprechenden Farbe und probier das:

<div style="white-space:nowrap;">
<img src="bubble.gif" width="48%" height="3px" style="vertical-align:middle; display:inline"> * <img src="bubble.gif" width="48%" height="3px" style="vertical-align:middle; display:inline">
</div>

Mit "vertical-align" kannst Du noch etwas experimentieren, auch beim '*', damit alles wirklich in einer Linie ist.

Gruß Frank

[Gunnar Bittersmann]

<hr style="display:inline" width="48%" > * <hr style="display:inline" width="48%" >

Frank,
Du hast Konrad falsch verstanden. Er möchte, dass im HTML-Quelltext nur <hr> steht und dieses Element mit CSS so formatieren, dass keine Linie, sondern * angezeigt wird.

Da passt hr (horizontal rule) als Elementname nicht mehr so recht. Das hat auch das W3C schon erkannt und in XHTML 2 fliegt hr raus und separator kommt dafür hinzu.

Gunnar

[agapanthus]

Moin.

Du hast Konrad falsch verstanden. Er möchte, dass im HTML-Quelltext nur <hr> steht und dieses Element mit CSS so formatieren, dass keine Linie, sondern * angezeigt wird.

Schon klar, daß er nur <hr> notieren will. Aber angezeigt werden soll ja - * - (Linie Stern Linie). Und _das_ geht im Moment eben nur über Umwege (und davon gibts sicher viele).

Gruß Frank

[Konrad L. M. Rudolph]

Moin,

Schon klar, daß er nur <hr> notieren will. Aber angezeigt werden soll ja - * - (Linie Stern Linie).

Ah, nein. Angezeigt werden soll "*", ohne Linien. Aber auch dieser Fall scheint ja nur über ein Workaround möglich zu sein.

Auf XHTML 2 zu warten ist leider mit meinem Termin nicht vereinbar. ;-)

Egal, dann muss ich mich wohl mit dem Hintergrundbild zufrieden geben. Danke trotzdem.

lg, Konrad -

[MudGuard]

Hi,

Ah, nein. Angezeigt werden soll "*", ohne Linien. Aber auch dieser Fall scheint ja nur über ein Workaround möglich zu sein.

Dann ist es ja noch viel einfacher:

hr { border:none; background:transparent; }
hr:after { content:"*"; display:block; text-align:center; font-size:2em;  }

(geht aber immer noch nicht im IE, weil der :after ja nicht kann.

cu,
Andreas

[MudGuard]

Hi,

Das klappt natürlich nicht, da "content" nur für die Pseudklassen :before und :after definiert ist.
Workaround wäre jetzt, ein Hintergrundbild zu verwenden. Aber das skaliert ja nicht mit, wenn man die Größe der Dokumentschriftart ändert.
Gibt es da eine Lösung für?

hr:after
{
   content:"*";  /* der Stern */
   font-size:2em; /* etwas größer */
   margin-left:49%; /* ab in die Mitte (genauen Wert ausprobieren) */
   margin-top:-0.5em; /* nach oben über die Linie */
   color:red;
   display:block; /* damit der margin-top greift */
   background:yellow; /* Hintergrundfarbe an der gewünschten Stelle (damit die Linie unterbrochen ist), zum Ausprobieren erstmal gelb, damit man sieht, wo das padding greift */
   width:.5em; /* wg. Hintergrund */
   padding-left:0.3em; padding-right:0.3em; /* um die Hintergrundfarbe auszudehnen und damit die Linie zu unterbrechen */
}

Sieht zumindest im Mozilla einigermaßen aus.
Opera hab ich grad nicht hier.
IE kann sowieso kein :after

cu,
Andreas

[Konrad L. M. Rudolph]

Moin,

Danke, das ist klasse so.

lg, Konrad -

[MudGuard]

Hi,

Danke, das ist klasse so.

Siehe anderes Posting https://forum.selfhtml.org/?t=90448&m=542499, wenn NUR der Stern angezeigt werden soll.

cu,
Andreas