Unterstreichen von Überschriften

[Maria Magdalena]

Hallo!

Ich möchte gerne eine Überschrift über die Länge der Buchstaben und in einer anderen Farbe als die Überschrift selbst unterstreichen.

Das Problem ist, daß mit 'underline' die Linie zwar so lange wie die Überschrift ist, aber immer nur in der selben Farbe wie der Text, weil man der underline-Linie keine eigene Farbe zuweisen kann...

... und mit 'border-bottom' kann ich zwar die Farbe der Linie unter der Überschrift ändern, da ist dann aber die Linie nicht nur unter den Buchstaben, aus denen die Überschrift besteht, sondern geht über die komplette Breite des Bereichs, in dem die Überschrift steht. :-(

FRAGE : Ist es möglich, daß ich mit CSS einer Überschrift eine Unterstreichung in ANDERER Farbe UND in Breite der Überschrift geben kann?

Danke

Maria Magdalena

[Picco]

1.lösung:

gibt es ein underline-color?

2.lösung
eine grafik hinter die überschriften machen wo unten eben die linie ist

3. Lösung die ganze überschrift als grafik machen^^

[Maria Magdalena]

Hi!

1.lösung:
gibt es ein underline-color?

Nein. Und _ICH_ bin in dem Thread der Fragensteller! ;-)

2.lösung
eine grafik hinter die überschriften machen wo unten eben die linie ist

Nein. Auch da geht die Linie dann über die komplette Breite.

3. Lösung die ganze überschrift als grafik machen^^

Das ist das Unsinnigste überhaupt in Bezug auf Usability.

Maria Magdalena

[Matze]

Hallo,

... und mit 'border-bottom' kann ich zwar die Farbe der Linie unter der Überschrift ändern, da ist dann aber die Linie nicht nur unter den Buchstaben, aus denen die Überschrift besteht, sondern geht über die komplette Breite des Bereichs, in dem die Überschrift steht. :-(

welches Element hast du denn benutzt? Also das, dem du den Border gegeben hast?

Ich habs jetzt nicht getestet, aber evtl. geht es wenn du dem h-Element display:block gibst und dann border-bottom.

Grüße, Matze

[Maria Magdalena]

Hi Matze!

evtl. geht es wenn du dem h-Element display:block gibst und dann border-bottom.

Das hab ich natürlich versucht. Nein, auch dann geht die Linie über die komplette Breite.

Leider. :-(

Maria Magdalena

[Matze]

Hallo,

Das hab ich natürlich versucht. Nein, auch dann geht die Linie über die komplette Breite.

sorry, meinte inline.

h1 {
 display:inline;
 border-bottom:1px solid black;}
h2 {
 display:inline;
 border-bottom:1px solid red;}
h3 {
 display:inline;
 border-bottom:1px solid yellow;}

<h1>Schwarz</h1><br />
<h2>Rot</h2><br />
<h3>Gelb</h3><br />

Grüße, Matze

[Maria Magdalena]

Den Denkanstoß hat mir Matze gegeben mit seinem :

evtl. geht es wenn du dem h-Element display:block gibst und dann border-bottom.

Das ist natürlich Unsinn, weil h1 _IST_ ja schon ein Blocklevel-Element. Und da fiel der Groschen : Was ist, wenn man aber aus dem h ein Inline-Element macht? Bingo!

Mit h als Inlineelement und einem border-bottem erreiche ich genau das, was ich wollte.

Danke für den Denkanstoß!

Maria Magdalena

[stareagle]

Moin,

FRAGE : Ist es möglich, daß ich mit CSS einer Überschrift eine Unterstreichung in ANDERER Farbe UND in Breite der Überschrift geben kann?

Ja. http://www.css4you.de/trickkiste/tr00001.html

Gruß

Stareagle

[Gunnar Bittersmann]

@@Maria Magdalena:

... und mit 'border-bottom' kann ich zwar die Farbe der Linie unter der Überschrift ändern, da ist dann aber die Linie nicht nur unter den Buchstaben, aus denen die Überschrift besteht, sondern geht über die komplette Breite des Bereichs, in dem die Überschrift steht. :-(

Dann enge den Bereich ein:

h1  
{  
 float: left;  
 border-bottom: 1px solid red;  
}

Damit das nachfolgende Element nicht um die Überschrift floatet:

h1+*  
{  
 clear: left  
}

_I_redend_E_in Browser ist allerdings zu blöd für den Selektor für Nachfahren; also den nachfolgenden Elementtypen (bzw. das nachfolgende Element) explizit angeben.

Live long and prosper,
Gunnar