Hallo,
kann ich eine <h1>Test</h1> so gestallten wie auf dem Bild? Bis jetzt hatte ich dafür Grafiken verwedet. Mir wäre lieber wenn dieses mit CSS gehen würde.
Mir kommt es hier auf den Strich links und rechts vom Wort an.
war mir beim Anschauen schon klar. ;-)
Ob es ohne zusätzliches Markup geht, ist zunächst mal zweifelhaft. Die Linie an sich könnte eine in x-Richtung gekachtelte Hintergrundgrafik sein, aber das möchtest du ja nicht. Eventuell kann man mit einer Kombination von height, overflow, margin-bottom und border-bottom was reißen, etwa so:
<h1><span>Explore</span></h1>
h1
{ height: 0.5em;
overflow: visible;
border-bottom: 1px solid #888;
margin-bottom: 0.5em;
text-align: center;
}
h1 span
{ background-color: #FFF;
text-transform: uppercase;
padding: 0 0.5em;
}
Der entscheidende Punkt ist, dass hier das h1-Element nur halb so hoch ist wie sein inline-Inhalt, und somit die Unterkante (border-bottom) etwa auf halber Höhe des Texts zu liegen kommt. Damit der Abstand zu nachfolgenden Elementen wieder passt, gleiche ich das mit margin-bottom:0.5em aus.
Der Textinhalt selbst, also das span-Element, muss nun einen deckenden (nicht-transparenten) Hintergrund haben, damit der die Rahmenlinie des h1-Elements überdeckt. Dazu ein bisschen padding seitlich, damit's etwas gefälliger aussieht.
Mit den Maßen musst du vermutlich ein bisschen spielen, bis es so richtig passt.
Viel Spaß beim Weiterstricken,
Martin
PS: "gestalten" hat nichts mit "Stall" zu tun!
I do take my work seriously, and the way to do that is not to take yourself too seriously.
(Alan Rickman, britischer Schauspieler)
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(