Hi Jungs,
ich hab ebenfalls ein kleines Anliegen, was den selben Ansatz hat.
Allerdings soll bei mir der Inhalt im Wrapper durch einen Rahmen vom gesamten Hintergrund getrennt sein.
Funktioniert soweit, nur nicht der mittlere Inhalt.
Top Border - Left, center und right -> funktioniert
Center -> funktioniert nicht
Bottom Border - Left, center und right -> funktioniert.
Mein Anliegen also:
Wie definiere ich in nachfolgend gezeigter css-datei den Center Bereich so, dass er einen
linken Rand - mittleren Bereich - rechten Rand
erstellt.
Da ihr im Vorfeld mit divs gearbeitet habt, meine ich, dass dieser Lösungsansatz für mich nicht in Betracht kommt, da das eigentliche Layout ja schon steht und es sich hier nur um den Hintergrund
innerhalb des Wrappers handelt.
Code: Alles auswählen
.top-left, .top-right, .bottom-left, .bottom-right {
height: 20px;
weidth: 20px;
font-size: 2px;
}
.top-left {
background-image: url("{T_THEME_PATH}/images/borders_tc.png"); background-repeat:no-repeat;
background-position: 0 -20px;
margin-left: 0px;
margin-top: 0px;
margin-right: 9px;
}
.top-right {
background-image: url("{T_THEME_PATH}/images/borders_tc.png"); background-repeat:no-repeat;
background-position: 100% 0;
margin-left: 0px;
margin-top: -9px;
margin-right: 0px;
}
.top-center {
background-image: url("{T_THEME_PATH}/images/borders_02.png");
background-position: 0 0px;
height: 20px;
weidth: 20px;
font-size: 2px;
margin-left: 20px;
margin-top: -20px;
margin-right: 20px;
margin-bottom: -20px;
}
.bottom-left {
background-image: url("{T_THEME_PATH}/images/borders_bc.png"); background-repeat:no-repeat;
background-position: 0 0px;
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
}
.bottom-right {
background-image: url("{T_THEME_PATH}/images/borders_bc.png"); background-repeat:no-repeat;
background-position: 100% -20px;
margin-right: 0px;
margin-left: 0px;
margin-top: -20px;
}
.bottom-center {
background-image: url("{T_THEME_PATH}/images/borders_09.png");
background-position: 0 0px;
height: 20px;
weidth: 20px;
font-size: 2px;
margin-left: 20px;
margin-top: -20px;
margin-right: 20px;
margin-bottom: -20px;
}
.inside {
border-left: 0px solid #ffffff;
border-right: 0px solid #ffffff;
color: #000000;
padding-left: 5px;
padding-right: 5px;
background-image: url("{T_THEME_PATH}/images/borders_06.png");
}
Der Hintergrundbereich den ich meine wird im letzten Teil: .inside {...} definiert.
Aufgrund des absolut gefährlichen Halbwissens meine ich, dass ich da 3 neue Teile anlegen müsste: .. also
.inside_left
.inside_center
.inside_right
... und nun... brauch ich n Profi..
[ externes Bild ]