• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Trennlinie mit Text

E

EVACE Media

Neues Mitglied
Hey,

bin aktuell beim erlernen von HTML5 & CSS3 und bin absoluter Neueinsteiger. Jedoch habe ich bisher mit viel googlen und sonstigem schon alles relativ gut hinbekommen :).

EVACE Media

Nun weiß ich absolut nicht wie ich eine Trennlinie mit einem Icon und einem Text (OUR PROCESS etc) dazwischen erstellen kann, wie auf dem folgendem Screendesign zu sehen:

EVACE Media

Hoffe ihr könnt mir helfen! Danke :)
 
Wenn Du das layer.png per "background-position: 0 -16px;" positionierst und die Grafik noch auf einzig den roten Bereich beschränkst, sollte es passen. Den Text darunter kannst Du in das dazugehörige Element mit der ID "pos" schreiben.

Moderation: Verschoben von HTML zu CSS, da es um Gestaltung geht.
 
Ne um den Layer geht es nicht ;) Der kommt später mit dem Slider, ist nur als Vorschau gedacht. Geht um die Trennlinien bei z.B. OUR PROCESS oder CLIENTS auf der index.html oder unter About WHO I AM etc.
 
Ach jetzt seh ich das erst. Das würde ich als border von einem Element machen. Den Text dann mit relativer Positionierung und bottom oder top drüber schieben.
 
Mhh bekomms nicht ganz hin.

Die Borderline passt, wenn ich jedoch den Text hochschiebe verschwindet die Linie.

CSS
Code: 
.linie{
	border-bottom: 1px solid #d9d9d9;
	margin-top:27px;
}


p.describe{
	font-family: 'Open Sans', sans-serif;
	background-color: #FFF;
	font-weight: bold;
	font-size: 12px;
	position:relative;
	top: -3px;
}

Code: 
<div class="linie"></div><p class="describe">asd</p>

Denke das ganze liegt an der background-color, jedoch brauche ich diese doch damit der Text nicht über der Linie liegt?

Danke :)
 
Das liegt daran, dass du mit <p> ein Blocklement nutzt, dass per Definition über die ganze Briete läuft. Erstetz das mal durch einen <span>
 
Perfekt! Danke dir! Wie binde ich jetzt am besten das Icon davor noch ein? Am besten mit <img> oder ner eigenen klasse und dann als bg image?!

//edit:

Habs schon hinbekommen.

Ist der Code so ok, oder gibt es bessere möglichkeiten?

Code: 
.linie{
    border-bottom: 1px solid #d9d9d9;
    margin-top:27px;
}


.describe{
    font-family: 'Open Sans', sans-serif;
    background-color: #FFF;
    font-weight: bold;
    font-size: 12px;
    position:relative;
    top: -10px;
    left: 58px;
    padding-left: 8px;
    padding-right:8px;
}


.dots{
    margin-right:4px;
    position:relative;
    top:1px;
}



Code: 
 <div class="linie"></div><span class="describe"><img class="dots" src="img/dots.png" alt="dots"></img>OUR PROCESS</span>

//edit2:
Safari mag die Lösung wohl nicht so ganz, wohingegen Firefox alles korrekt anzeigt.



 
Zuletzt bearbeitet:
Moin,
ich würde dafür eher ein fieldset bevorzugen.

So z.B.

CSS:
Code: 
fieldset.row {
  border: 0px;
  border-top: 1px solid #d9d9d9;
  margin-top:27px;
  }

fieldset.row legend {
  font-family: 'Open Sans', sans-serif;
  background-color: #FFF;
  font-weight: bold;
  font-size: 12px;
  }
HTML:
Code: 
<fieldset class="row"><legend><img class="dots" src="img/dots.png" alt="dots" />OUR PROCESS</legend></fieldset>

MfG
 
Ausgehen von deinem Code in Beitrag #7 würde ich raten folgenden HTML-Code zu verwenden (so hatte ich es eigentlich auch gemeint).

HTML: 
<p class="linie"><span>OUR PROCESS</span></p>

Und das CSS dazu:

Code: 
.linie{
 border-bottom: 1px solid #d9d9d9;
 margin-top:27px;
}

.linie span {
 background-color: #fff;
 background-image: url(img/dots.png);
 background-position: center left;
 background-repeat: no-repeat;
 display: block;
 padding-left: 32px;
 position: relative;
 top: 6px;
 width: 92px;
 z-index: 1;
}

Die Werte für padding, top und width musst Du ggfs. noch anpassen.
 
Firefox


Safari



Es ist zum verzweifeln :D

Also es geht nicht darum das im Firefox die Linie links nicht zu sehen ist, das kommt ja durchs padding. Mit margin sieht alles ok aus, jedoch fehlt das BG image und im Safari wieder die darstellung als ob kein CSS da wäre.
 
Da stimmt doch im Quellcode irgendwas nicht. Dort wirkt ja keine Eigenschaft die per CSS gesetzt wurde. Kontrolliere mal bitte, ob HTML- und CSS-Code valide sind bzw. der CSS-Code nicht irgendwie auskommentiert oder anderweitig für den Browser nicht lesbar sein könnte. Wenn Du es nicht findest, stell mal die Seite online, so dass wir sie ansehen können.
 
Hab keinen Safari, aber für mich sieht das alles eigentlich OK aus. Nur, dass Du die dots-Grafik nicht richtig hinterlegt hast.
 
Mhh nach nem Neustart siehts auch bei mir im Firefox & Safari (beides Mac) gleich aus. Komisch. Nun gibts jedoch noch 2 Probleme. Wie bekomm ich den margin vom background image (dots.png) hin. Dieser klebt immer am linken Rand der Linie. Und wie kann ich es machen das der Abstand vom Text nach rechts nicht durch die width bestimmt wird sondern auch durch ein margin oder ähnliches, sodass ich nicht immer für jede neue Überschrift ein neues Element machen muss
 
EVACE Media schrieb:
Nun gibts jedoch noch 2 Probleme. Wie bekomm ich den margin vom background image (dots.png) hin.
Zum Vergrößern anklicken....

Mit background-position.

Und wie kann ich es machen das der Abstand vom Text nach rechts nicht durch die width bestimmt wird sondern auch durch ein margin oder ähnliches, sodass ich nicht immer für jede neue Überschrift ein neues Element machen muss
Zum Vergrößern anklicken....


Mit padding.
 
Danke das erste mit dem Background hat sich damit erledigt :).

Das 2. Problem jedoch nicht. Momentan wird ja die breite/der Abstand durch die width bestimmt. Ich möchte aber das ich das mit einem padding-right:5px; einrichten kann, so dass immer 5px nach Ende des Textes (span) die Linie wieder anfängt.
 
da es hier um css3 gehen soll, müsste das ganze mit :before und content() gelößt werden :p ein <img> ist abr schon ganz richtig, da css3 noch nicht produktiv eingesetzt werden sollte.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben