Div mit 8 Hintergrundbildern

[Blackout289]

Hallo,

Ich komm hier einfach nich weiter.
Mein Ziel ist ein Kasten (Div) mit 4 versch. Ecken und 4 versch. Seiten, also Hintergründen.
Hab jetzt die 4 Ecken zugeschnitten, und von den Seiten jeweils 1px zwecks repeat.
Hab das ganze mal so hinbekommen:

<style type="text/css">
.botleft {background: url(./IMGsGimp/boxincorbotleft.png) 0 100% no-repeat #fff;width:200px;}
.botright {background: url(./IMGsGimp/boxincorbotright.png) 100% 100% no-repeat;
}
.topleft {background: url(./IMGsGimp/boxincortopleft.png) 0 0 no-repeat;
}
.topright {background: url(./IMGsGimp/boxincortopright.png) 100% 0 no-repeat; padding:10px;
}
.brep {background:url(boxinbot.png) repeat-x bottom;}
.trep {background:url(boxintop.png) repeat-x top;}
.lrep {background:url(boxinleft.png) repeat-y left;}
.rrep {background:url(.boxinright.png) repeat-y right;}
</style>

<div class="botleft"><div class="botright"><div  class="topleft"><div class="topright"><div  class="brep"><div class="trep"><div class="lrep"><div  class="rrep">
Lorem ipsum dolor sit amet consectetur adipisicing elit</div></div></div>
</div></div></div></div></div>

Das obere Bild soll aber zwischen die beiden Eckbilder, das Linke zwischen das linke obere und untere Eckbild, usw.

Wie geht das?

Dankeschön

 

[igolounge]

AW: Div mit 8 Hintergrundbildern

.topright {background: url(./IMGsGimp/boxincortopright.png) 100% 0 no-repeat; padding:10px;

Vielleicht mal das padding entfernen?
Ansonsten würde ich einen Container um alles machen mit width:200px. Macht das Positionieren der einzelnen Elemente einfacher (z.B. Position:relative,...).

 

[sokie]

AW: Div mit 8 Hintergrundbildern

warum das ganze?
wenn du dem äusseren Container(.botleft) sowieso eine feste Breite gibst brauchst du eigentlich nur ein oberes grafikelement, ein unteres, und eins das sich per repeat-y wiederholt.

 

[Blackout289]

AW: Div mit 8 Hintergrundbildern

@sokie ich brauch mehrer Boxen und möchte nicht für jede eigene Elemente ausschneiden

@ igolounge Wenn ich nur das padding entferne, dann siehts folgendermaßen aus


Die Seitenteile fehlen also

 

[Gack81]

AW: Div mit 8 Hintergrundbildern

Guten Abend

aus meiner Erfahrung mit runden Ecken ,habe ich lernen müssen das die div´s den du die Eigenschaft repeat zuerst im Quellcode steckst mein Beispiel

<div id="inhalt">
<div class="inhalt_mitte">
<div class="inhalt_top_mitte">
<div class="inhalt_left_mitte">
<div class="inhalt_right_mitte">
<div class="inhalt_bottom_mitte">
<div class="inhalt_top_left">
<div class="inhalt_top_right">
<div class="inhalt_bottom_left">
<div class="inhalt_bottom_right">
<div class="inhalt">

</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>

hier die css dazu

#inhalt{
position:relative;
top: -60px;
padding: 0 20px 0 180px;
margin: 0 0 0 0;
}

.inhalt_mitte{
background:url(../design/siedebar_center_center.jpg);
}

.inhalt_top_mitte{
background:url(../design/siedebar_top_center.jpg) top center repeat-x;
}

.inhalt_left_mitte{
background:url(../design/siedebar_center_left.jpg) left center repeat-y;
}

.inhalt_right_mitte{
background:url(../design/siedebar_center_right.jpg) right center repeat-y;
}

.inhalt_bottom_mitte{
background:url(../design/siedebar_bottom_center.jpg) bottom center repeat-x;
}

.inhalt_top_left{
background:url(../design/siedebar_top_left.jpg) top left no-repeat;
}

.inhalt_top_right{
background:url(../design/siedebar_top_right.jpg) top right no-repeat;
}

.inhalt_bottom_left{
background:url(../design/siedebar_bottom_left.jpg) bottom left no-repeat;
}

.inhalt_bottom_right{
background:url(../design/siedebar_bottom_right.jpg) bottom right no-repeat;
}


.inhalt{
min-height:500px;
border: none;
}

So Funktioniert es bei mir
weiß auch nicht wieso es nur so funktioniert und vor allem wie lange ich daran saß das es funktionierte.
Aber es geht




Hier der dazu gehörige Screenshot:

viel spaß

 

[Blackout289]

AW: Div mit 8 Hintergrundbildern

Daaaaaaaaaaaaaaaaaaaaankeschöööön

 

[michas]

AW: Div mit 8 Hintergrundbildern

Also ich würde mir den ganzen HTML-Overhead sparen und auf JavaScript zurückgreifen (falls es das Projekt zuläßt).

Das funktioniert bei mir bisher immer problemlos.

Schau mal die Demos an:

http://www.ruzee.com/files/shadedborder/test.html
Liquid Canvas Demo