Pfeil unter h2, Border mit CSS <- Will nicht wie er soll

[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