Hi Leute, ich war heute dabei eine Box zu erstellen:
Oben
Mitte
Unten
Mitte soll sich jeweils der Länge des Textes anpassen und der Text soll einen Abstand von jeweils 5 px in alle Richtungen haben - so weit so gut. Habe dann auch 2 Varianten probiert - ein mal mit einem zweiten Div in dem "Mitte" div drin, dem ich margin: 5px gegeben habe. Fazit: Das Hintergrundbild von "Mitte" wird nur in dem Bereich des Div's angezeigt, der in "Mitte" drin ist und das margin bestitzt.
Zweitens habe ich das ganze noch mit padding probiert, indem ich wieder einen weiteren Div in "Mitte" gesetzt habe und diesem padding: 5px; gegeben habe. Fazit: Oben, links, unten wunderbar, nur rechts leider 0px Abstand.
Naja, damits nicht zu trocken wird, hier mal mein Code (ist nur ein Beispiel, habs grob vereinfacht und auch nicht auf Doctype, etc. geachtet, ist nur zur Demo gedacht).
test.html
style.css (Variante 1 mit margin)
style.css (Variante 2 mit padding)
Die Borders dienen nur zur Darstellung, damit die Div's ohne Hintergrundbild auch sieht.
Bin für jede Lösung dankbar.
Oben
Mitte
Unten
Mitte soll sich jeweils der Länge des Textes anpassen und der Text soll einen Abstand von jeweils 5 px in alle Richtungen haben - so weit so gut. Habe dann auch 2 Varianten probiert - ein mal mit einem zweiten Div in dem "Mitte" div drin, dem ich margin: 5px gegeben habe. Fazit: Das Hintergrundbild von "Mitte" wird nur in dem Bereich des Div's angezeigt, der in "Mitte" drin ist und das margin bestitzt.
Zweitens habe ich das ganze noch mit padding probiert, indem ich wieder einen weiteren Div in "Mitte" gesetzt habe und diesem padding: 5px; gegeben habe. Fazit: Oben, links, unten wunderbar, nur rechts leider 0px Abstand.
Naja, damits nicht zu trocken wird, hier mal mein Code (ist nur ein Beispiel, habs grob vereinfacht und auch nicht auf Doctype, etc. geachtet, ist nur zur Demo gedacht).
test.html
Code:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="top"></div>
<div class="mitte">
<div class="mitte_i">Hallohoooooooooooo</div>
</div>
<div class="bottom"></div>
</body>
</html>
style.css (Variante 1 mit margin)
Code:
.top {
width: 100px;
height: 20px;
border: 1px solid green;
}
.mitte {
width: 100px;
background-image: url('bg.PNG');
}
.mitte_i {
margin: 5px;
border: 1px solid green;
}
.bottom {
width: 100px;
height: 10px;
border: 1px solid black;
}
style.css (Variante 2 mit padding)
Code:
.top {
width: 100px;
height: 20px;
border: 1px solid green;
}
.mitte {
width: 100px;
background-image: url('bg.PNG');
}
.mitte_i {
padding: 5px;
overflow: hidden;
border: 1px solid green;
}
.bottom {
width: 100px;
height: 10px;
border: 1px solid black;
}
Die Borders dienen nur zur Darstellung, damit die Div's ohne Hintergrundbild auch sieht.
Bin für jede Lösung dankbar.