Pfeil unter h2, Border mit CSS erstellen

[MonA]

Ich möchte meine Überschricht mit einem Pfeil nach unten versehen.

h2{
font-weight:bold;
font-size: 22px;
border-bottom: 1px solid #C0C0C0;
padding:0 0 10px 10px;
margin: 20px 20px 30px 0px;
}

h2:before{
content: ' ';
position: relative;
top:52px;
left:230px;
border: 15px solid #6E6E6E;
border-right-color:  transparent;
border-bottom-color: transparent;
border-left-color:   transparent;
}

Doch ich habe zwei Probleme bei denen ich nicht weiterkomme.

1. Ich möchte den Pfeil unten ausrichten.Im Augenblick mache ich das über top:52px;, abe rich muss gestehen ich habe die 52 erraten, und so sieht es auch in den untershciedlichen Brwosern aus.

2. ich möchte das die Überschrift einen Abstand zur Linken Seite hat, ich bekomme aber die Schrift und die Linie nicht bündig zusammen.

Zu allgemeinen Verständlichkeit habe ich ein Beispiel hier hinterlegt:

http://jsfiddle.net/W6jy3/

MonA

[Matthias Scharwies]

Ich möchte meine Überschricht mit einem Pfeil nach unten versehen.

h2{
font-weight:bold;
font-size: 22px;
border-bottom: 1px solid #C0C0C0;
padding:0 0 10px 10px;
margin: 20px 20px 30px 0px;
}

h2:before{
position: relative;
top:52px;

1. Ich möchte den Pfeil unten ausrichten.Im Augenblick mache ich das über top:52px;, abe rich muss gestehen ich habe die 52 erraten, und so sieht es auch in den untershciedlichen Brwosern aus.

mach h2:before
position:absloute;
bottom:0;

2. ich möchte das die Überschrift einen Abstand zur Linken Seite hat, ich bekomme aber die Schrift und die Linie nicht bündig zusammen.

Du hast KEINEN abstand zur linken Seite:
margin: 20px 20px 30px 0px;

besser wäre: margin: 0 0 30 30px;
(oben, rechts, unten, links)

LG Matthias

MonA

[MonA]

mach h2:before
position:absloute;
bottom:0;

2. ich möchte das die Überschrift einen Abstand zur Linken Seite hat, ich bekomme aber die Schrift und die Linie nicht bündig zusammen.

Du hast KEINEN abstand zur linken Seite:
margin: 20px 20px 30px 0px;

besser wäre: margin: 0 0 30 30px;
(oben, rechts, unten, links)

Ich habe es gemacht...

http://jsfiddle.net/W6jy3/2/

ausser dsa alles linksbündig ist, hat sich nichts geändert.

Die Überschrift soll einen Abstand zur linken Seite haben, wenn ich den versuche mit margin-right zu ändern, hat das keinerlei Auswirkung!

und der Pfeil der runterzeigt, ist auf top:52px; gesetzt,
Warum: Keine Ahnung! ich weis nur das es ungefähr hinkommt. Aber ich würde gerne wissen warum es ungefähr hinkommt, und vor allem wie ich ihn (Pixel)GENAU an die untere Linie bekomme:

border: 15px solid #6E6E6E;

Mona

[Matthias Apsel]

Om nah hoo pez nyeetz, MonA!

position:absloute;

Informiere dich, wie position funktioniert.

Du hast KEINEN abstand zur linken Seite:
margin: 20px 20px 30px 0px;

besser wäre: margin: 0 0 30 30px;
(oben, rechts, unten, links)

Ich habe es gemacht...

Du hast einen ungültigen margin-wert. (Bei der zweiten 30 fehlt die Einheit.)

Die Überschrift soll einen Abstand zur linken Seite haben, wenn ich den versuche mit margin-right zu ändern, hat das keinerlei Auswirkung!

links != right.

und der Pfeil der runterzeigt, ist auf top:52px; gesetzt,
Warum: Keine Ahnung! ich weis nur das es ungefähr hinkommt. Aber ich würde gerne wissen warum es ungefähr hinkommt, und vor allem wie ich ihn (Pixel)GENAU an die untere Linie bekomme:

Pixelgenau ist oft unsinnig, wenn es unter allen Umständen pixel-genau sein soll, solltest du auf eine Hintergrundgrafik zurückgreifen. Man kann mehrere verwenden, zwei sollten mit linaer-gradient gebastelt, den Pfeil ergeben, die dritte ebenfalls als gradient die Linie.

Die vertikale Positionierung sollte nicht das Problem sein. Der top-Wert des absolut positionierten before-Pseudoelementes ist gleich der Summe aus line-height und (abhängig von gewählten Boxmodel) padding-bottom und border-bottom der Überschrift. Wenn du also die line-heigth mit 30px festlegst und 10px padding hast, liegt mit top: 40px; das Dreieck genau auf der Linie, mit top: 41px genau unterhalb der Linie.

horizontal könnte left: calc(50% - 15px) die richtige Lösung sein. Als Fallback für ältere Browser würde ich

left: 50%;  
left: -webkit-calc(50% - 15px);  
left: calc(50% - 15px);

anbieten

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Pixelgenau ist oft unsinnig,

Yep.

wenn es unter allen Umständen pixel-genau sein soll, solltest du auf eine Hintergrundgrafik zurückgreifen. Man kann mehrere verwenden, zwei sollten mit linaer-gradient gebastelt, den Pfeil ergeben, die dritte ebenfalls als gradient die Linie.

Ich werde übermorgen erzählen, dass man das machen kann. aber auch, dass man es nicht wirklich sollte.

Der Fön geht an. Und wenn man mehrere davon auf der Seite hat, könnte es beim Scrollen holpern.

Qapla'

[Gunnar Bittersmann]

@@MonA:

nuqneH

Ich möchte meine Überschricht mit einem Pfeil nach unten versehen.

Das kam heute übern Ticker.

http://jsfiddle.net/W6jy3/

„Titel Zeile“. Habe Aua im Auge.

Qapla'