aider avec css sur l'image de frontière

Question

J'essaye de créer des frontières avec des images, et je suis presque là, mais les divs gauche et droit ne sont pas tout à fait raison. Celui de gauche est sous le TL, ce qui est mauvais, et celui de droite flotte dessous pour une raison quelconque et rend les objets du bas tous décalés. Je pourrais joindre un exemple si je connaissais un bon site pour mettre des choses sur l'échantillon (ne veulent pas donner mon url)

html

<div id="text"> 
<div class="tl"></div><div class="tm"></div><div class="tr"></div> 
<div class="left"></div><div class="content"></div><div class="right"></div> 
<div class="bl"></div><div class="bm"></div><div class="br"></div> 
</div> 

css

.tl { 

     background: url(corner1.png) no-repeat; 
     float: left; 
     height: 56px; 
     width: 55px 
     } 

    .tm { 
     width: 352px; 
     height: 59px; 
     background: url(top.png) repeat-x; 
     float: left; 
     } 

    .tr { 

     background: url(corner2.png) no-repeat; 
     float: left; 
     height: 56px; 
     width: 55px 
     } 

    .content { 
     padding: 0 5px; 
     width: 360px; 
    float: left 
     } 

    .bl {  
     background: url(corner4.png) no-repeat; 
     float: left; 
     height: 56px; 
     width: 55px 
     } 

    .bm { 
     width: 352px; 
     height: 58px; 
     background: url(bottom.png) repeat-x; 
     float: left; 
     } 

    .br { 
     background: url(corner3.png) no-repeat; 
     float: left; 
     height: 56px; 
     width: 55px 
     } 

.left {background: url(left.png) repeat-y; width: 58px; height: 100%} 
.right {background: url(right.png) repeat-y; width: 58px; float: left; height: 100%} 

Answer 1

Je n » J'ai l'air très dur, mais quelques choses que j'ai remarqué qui devraient vous aider à vous rapprocher d'une solution:

vous n'avez pas d'attribut flottant, et j'imagine qu'il devrait flotter: left.

L'autre chose que vous devriez faire dans le TR, vous devriez mettre un clair: droit, donc vous êtes garanti que le div suivant est en dessous.

Vous devriez faire la même chose pour le div .right.

Vérifiez la propriété clear css.

De même, faites correspondre vos hauteurs. tl, tm et tr ont des hauteurs différentes. À des fins de dépannage, vous devriez les faire tous les mêmes.

Answer 2

Je suggère d'éviter les flotteurs, et à la place en utilisant le positionnement absolu. Donc, quelque chose comme ...

#text{position:relative;padding:60px} 
.tl,.tm,.tr,.bl,.bm,.br,.left,.right{position:absolute} 
.tl{top:0;left:0} 

... et ainsi de suite jusqu'à ...

.br(right:0;bottom:0} 

Answer 3

Je ne vois pas de différence.

<div id="text"> 
    <div class="tl"></div><div class="tm"></div><div class="tr"></div> 
    <div class="left"></div><div class="content"></div><div class="right"></div> 
    <div class="bl"></div><div class="bm"></div><div class="br"></div> 
</div> 

vs

<table cellpadding="0" cellspacing="0"> 
    <tr><td class="tl"></td><td class="tm"></td><td class="tr"></td></tr> 
    <tr><td class="left"></td><td class="content"></td><td class="right"></td></tr> 
    <tr><td class="bl"></td><td class="bm"></td><td class="br"></td></tr> 
</table> 

Si vous allez abuser balises utilisent ceux qui travaillent.

Vous pouvez également utiliser ...

<style type="text/css"> 
.tl {background:url('tl.GIF') no-repeat left top;} 
.tr {background:url('tr.GIF') no-repeat right top;} 
.bl {background:url('bl.GIF') no-repeat left bottom;} 
.br {background:url('br.GIF') no-repeat right bottom;} 
.t {background:url('t.GIF') repeat-x left top;} 
.b {background:url('b.GIF') repeat-x left bottom;} 
.l {background:url('l.GIF') repeat-y left top;} 
.r {background:url('r.GIF') repeat-y right top;} 
</style> 

<div class="t"> 
<div class="b"> 
<div class="l"> 
<div class="r"> 
<div class="tl"> 
<div class="tr"> 
<div class="bl"> 
<div class="br"> 
    content 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 

Vous n'avez pas besoin d'être ce bavard. J'ai obtenu de bons résultats avec seulement les DIVs .lt et .br avec de grandes images.