zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Überschrift zentriert mit zwei horizontalen Linien per CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.10.2016, 16:33
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard Ü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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.10.2016, 16:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.10.2016, 17:26
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
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.
Hi, danke schonmal aber so ganz will das bei mir nicht funktionieren.

Also ich habe hier ein DIV mit einer Überschrift, nehmen wir an:

HTML-Code:
<div class="panel--title">Testüberschrift 1</div>
In dem DIV lege ich die Standardwerte fest, z.B.

Code:
text-align: center;
font-family: Arial, sans-serif;
position: relative;
So und jetzt mit den Pseudoklassen ::before und ::after arbeiten?

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;
}
In diese Richtung? Bekomme das so irgendwie nicht hin, vermute mal er erkennt die Breite nicht....
Mit Zitat antworten
  #4 (permalink)  
Alt 10.10.2016, 17:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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>
Ansonsten:
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;
}
Mit Zitat antworten
  #5 (permalink)  
Alt 10.10.2016, 17:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

du kannst zu diesem HTML

Code:
<h2>Überschrift</h2>
folgendes CSS probieren:

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;
}
Statt direkt h2 anzugeben kannst du natürlich auch Klassen (class) verwenden.

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;
}
Falls nur vor oder hinter dem Text ein Strich sein soll einfach entsprechend before oder after weglassen. Der Text wird dann zusätzlich ohne weitere Anpassungen links- oder rechtsbündig angezeigt.

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 18:45 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 11.10.2016, 10:39
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 11.10.2016, 10:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 11.10.2016, 10:55
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
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.
Okay das war es, jetzt werden sie angezeigt. Problem ist jetzt folgendes:

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?
Mit Zitat antworten
  #9 (permalink)  
Alt 11.10.2016, 11:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.10.2016, 11:42
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Dynamisches CSS per Server? Oder client? Oder wie? andir CSS 4 25.11.2010 13:20
Option Value aufgrund Value inhalt per CSS definieren noxx-forever CSS 7 01.08.2010 22:09
Problem mit Menü per CSS jippel CSS 1 31.07.2008 21:53
"Fusszeile" per CSS? derSESO CSS 3 02.02.2005 01:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:45 Uhr.