|
|||
Überschrift zentriert mit zwei horizontalen Linien per CSS
Hallo,
in einem Onlineshop habe ich folgende Überschrift gesehen: Ich würde gerne diese Art von Überschrift mit den zwei Linien auch für unseren Shop verwenden. Ich habe gesehen, der Shop der das benutzt verwendet jedoch eine Grafikdatei für diese Überschriften. Das will ich auf keinen Fall machen. Frage: Ist so etwas auch mit reinem CSS umzusetzen. Hätte da jemand einen Ansatz für mich? Gruß ChOp |
Sponsored Links |
|
|||
Ja, das ist auch mit CSS möglich. Hier der Ansatz (falls du spezifischere Hilfe brauchst, bitte melden):
Du arbeitest mit ::before und ::after Elementen. Das ::before und ::after Element machst du jeweils zB 45% breit (hängt vom Element ab) und gibst ihnen jeweils einen 1px top-border. Dann platzierst du das ::before Element links und das ::after-Element rechts und fertig. |
Sponsored Links |
|
|||
Zitat:
Also ich habe hier ein DIV mit einer Überschrift, nehmen wir an: HTML-Code:
<div class="panel--title">Testüberschrift 1</div> Code:
text-align: center; font-family: Arial, sans-serif; position: relative; Code:
.panel--title::before{ width: 45%; border-top: 1px solid #000; position: absolute; left: 0; } .panel--title::after{ width: 45%; border-top: 1px solid #000; position: absolute; right: 0; } |
|
|||
Erstens: Du ahst keine Überschrift. Für eine Überschrift muss ein h1, h2, ... Tag vorhanden sein. div hat keinerlei Bedeutung (egal, wie du den Text darin stylest)
Code:
<h1 class="special-style">Ich bin eine Überschrift</h1> Ja, du bist am richtigen Weg. Damit die Breite erkannt wird muss das Element ein block-Element sein, du brauchst also ein display:block; So kannst du das CSS kürzer schreiben: Code:
.panel--title::before, .panel--title::after{ width: 45%; border-top: 1px solid #000; position: absolute; left: 0; display:block; /*Das fehlt dir! */ } .panel--title::after{ left:auto;right: 0; } |
|
|||
Hallo
du kannst zu diesem HTML Code:
<h2>Überschrift</h2> Code:
h2 { display: flex; } h2::before { content: " "; background-image: linear-gradient(transparent, transparent 49%, red 49%, red 51%, transparent 51%, transparent 100%); margin-right: 1rem; flex: 1 1 1px; } h2::after { content: " "; background-image: linear-gradient(transparent, transparent 49%, red 49%, red 51%, transparent 51%, transparent 100%); margin-left: 1rem; flex: 1 1 1px; } Bis auf margin kannst du die Angaben für ::before und ::after auch zusammenfassen, also Code:
h2 { display: flex; } h2::before, h2::after { content: " "; background-image: linear-gradient(transparent, transparent 49%, red 49%, red 51%, transparent 51%, transparent 100%); flex: 1 1 1px; } h2::before { margin-right: 1rem; } h2::after { margin-left: 1rem; } Wie Strichbreite und -farbe geändert werden sollte direkt ersichtlich sein. So sind auch mehrfarbige Linien kein Problem. Gruss MrMurphy Geändert von MrMurphy (10.10.2016 um 17:45 Uhr) |
|
|||
Hallo,
schon mal besten Dank für Eure Mühe. @cloned: Also diese Variante bekomme ich nach wie vor nicht hin. Habe dazu mal einen Testcase gebaut: Testcase @MrMurphy: Deine Variante funktioniert. Ist auch sehr interessant umgesetzt. Ich sehe hier nur das Problem, dass du die Linienfarbe nicht einfarbig gestalten kannst, oder ist das nicht korrekt? Mit dem Farbverlauf bekommt man doch bei 1px Linie keine tiefschwarze Linie hin #000000? Gruß kweb. |
|
|||
Verzeih, damit ::before und ::after Elemente angezeigt werden, müssen sie auch einen Inhalt haben. Du brauchst also noch content: "" ; bei deinen Pseudoelementen. (und ein top: 50% wäre wohl auch nicht verkehrt. )
MrMurphy verwendet hier übrigens exakt den selben Ansatz wie ich, er verwendet statt dem border eine Füllung für das Element. Du könntest dein Pseudoelement ja auch zB 1px hoch machen und dann mit schwarz füllen bei meinem Beispiel, ich verwende für einfärbige Linien aber lieber den Border. |
|
|||
Zitat:
Bei einem Onlineshop-System habe ich nicht die Möglichkeit jede Überschrift separat zu stylen: Soll heißen bei deiner Variante müsste ich die Breite "width:45%" immer anpassen, sonst ragen die Linien in die Überschrift rein. Ich habe mal beie Lösungsansätze in meinem Testcase hinzugefügt. In diesem Fall scheint die Lösung von Mr. Murphy unabhängig von der Breite der Überschrift zu sein, oder? |
|
|||
Wie gesagt, der Ansatz ist bei beiden Varianten der Selbe. Du kannst auch MrMurphys flexbox Lösung nehmen und statt dem background den border von mir nehmen. Oder eben seinen background einfärbig machen.
Eine andere Variante, welche aber nur bei einfärbigen Hintergründen funktioniert ist folgende: Du machst nur ein Pseudoelement mit 100% Breite und gibst der Überschrift eine Hintergrundfarbe (und legst sie natürlich über den "Strich"). So schaut es aus, als ob du zwei Striche hättest, da die Hintergrundfarbe des Textes natürlich auch über dem Strich liegt. |
Sponsored Links |
|
|||
Okay alles klar - habe beide Lösungen verstanden und funktionieren auch so wie ich sie haben will.
Vermute aber mal, dass deine Lösung zwecks Browserkompabilität noch etwas empfehlenswert ist. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 12:25 |
Dynamisches CSS per Server? Oder client? Oder wie? | andir | CSS | 4 | 25.11.2010 12:20 |
Option Value aufgrund Value inhalt per CSS definieren | noxx-forever | CSS | 7 | 01.08.2010 21:09 |
Problem mit Menü per CSS | jippel | CSS | 1 | 31.07.2008 20:53 |
"Fusszeile" per CSS? | derSESO | CSS | 3 | 02.02.2005 00:44 |