<h1> gestallten

[Matthias Apsel]

Om nah hoo pez nyeetz, Carmen!

vielen lieben Dank für das Online Beispiel. Hab es in meine Seite eingebaut: http://friseursalon.bplaced.net/ allerdings habe ich jetzt ein kleines Problem. Ich wollte der <h2> ein Abstand mit padding-top:0.5em; bzw. margin-top:0.5em; geben.

Diese Angaben werden aber nicht beachtet. Ich nehmen an, es liegt an  display: table; da man einer Tabelle kein Abstand geben kann? Soll ich also um das ganze noch ein <span> packen?

gut beobachtet. Respekt! Margin sollte kein Problem darstellen. Padding sehr wohl. Wenn es dir nur darum geht, dass die Linie nicht in der Mitte verlaufen soll, heißt deine Schraube

h1::before, h1::after {  
        background-position: 0 50%;  
     }

Siehe http://wiki.selfhtml.org/wiki/Background-position

Sollte dies nicht dein Problem sein, schildere bitte, was du vorhast. Bestimmt lässt sich eine Lösung finden. Zusätzliche Elemente sind uncool.

Und mein zweites Problem ist border-right: 1.2em solid transparent; solid bedeutet doch "durchgezogen" was ich aber auf meinem Bildschirm sehe ich dotted. Kann ich irgendwie erreichen dass ich solid auch sehe?

h1::before, h1::after {  
        content: "";  
        display: table-cell;  
        width: 50%;  
  
        background-image: linear-gradient(to right, #c4d4da 50%, transparent 50%);  
        background-position: 0 50%;  
        background-repeat: repeat-x;  
        background-size: 6px 2px;  
      }  
h1::before {  
        border-right: .5em solid transparent;  
      }  
h1::after {  
        border-left: .5em solid transparent;  
      }

Die Border links und rechts sorgen dafür, dass die Pseudoelemente visuell nicht ganz bis an die Überschrift heranreichen. Die Gestaltung deiner Linie erfolgt über

h1::before, h1::after {  
        background-image: linear-gradient(to right, #c4d4da 50%, transparent 50%);  
        background-size: 6px 2px;  
      }

Für eine durchgehende Linie hilft etwa

h1::before, h1::after {  
        background-image: linear-gradient(to right, #c4d4da, #c4d4da);  
        background-size: 100% 2px;  
      }

Siehe: http://wiki.selfhtml.org/wiki/Linear-gradient

Matthias