:before & :after

04/04/2016 16:00 xsrf#1
Ich versuche mittels :before und :after den oberen und unteren Teil des Panels anzeigen zulassen, sodass nur die Mitte sich wiederholt.

Leider funktioniert das nicht, wie auf dem Bild zu erkennen ist.

Design:

[Only registered and activated users can see links. Click Here To Register...]

Umsetzung ( Fehler ):

[Only registered and activated users can see links. Click Here To Register...]

Mein Code:



HTML Code:
/* large panel */

.lg-panel{
	width:1060px;
	margin:0 auto;
	min-height:150px;
	background: url("../img/panel/lg_panel_middle.png") repeat-y;
}

.lg-panel:before {
	background: url("../img/panel/lg_panel_top.png") no-repeat;
}

.lg-panel:after {
	background: url("../img/panel/lg_panel_bottom.png") no-repeat;
}
04/05/2016 14:00 Undaground#2
Versuch den Before & After - Elementen entweder eine feste Höhe zu verpassen oder ein:
HTML Code:
display: block;
oder beides musst du mal ausprobieren

HTML Code:
.lg-panel{
	width:1060px;
	margin:0 auto;
	min-height:150px;
	background: url("../img/panel/lg_panel_middle.png") repeat-y;
}

.lg-panel:before {
        content: "";
	background: url("../img/panel/lg_panel_top.png") no-repeat;
        display: block;
        height: DEINE HÖHE;
}

.lg-panel:after {
        content: "";
	background: url("../img/panel/lg_panel_bottom.png") no-repeat;
        display: block;
        height: DEINE HÖHE;
}
04/07/2016 18:18 iKyroja :>#3
du musst einen content für after und before angeben

.lg-panel:before {
content: "";
background: url("../img/panel/lg_panel_top.png") no-repeat;
display: block;
// Maße
}
04/08/2016 22:02 #Metho#4
Du kannst als Content auch dein Bild angeben, was um einiges angenehmer ist. Da es direkt die Breite und Höhe des Bildes übernimmt.

Code:
.lg-panel{
	width: 1060px;
	margin: 0 auto;
	min-height: 150px;
	background: url("../img/panel/lg_panel_middle.png") repeat-y;
}

.lg-panel:before, .lg-panel:after {
	position: absolute;
	left: 50%;
}
.lg-panel:before {
	content: url('../img/panel/lg_panel_top.png');
	top: 0;
	transform: translate(-50%, -100%);
}

.lg-panel:after {
	content: url('../img/panel/lg_panel_bottom.png');
	bottom: 0;
	transform: translate(-50%, 100%);
}
Damit ist es perfekt mittig, oben und unten positioniert und du kannst das Bild beliebig austauschen. Zudem solltest du ::after und ::before statt :after/:before nutzen, da diese Pseudo-Elemente sind und keine Pseudo-Statements.