28220 sujets

CSS et mise en forme, CSS3

Bordure avec des images transparentes

Bonjour !

Un petit problème qui me donne du fil à retordre...

Je souhaite entourer un div d'une bordure réalisée à partir d'images à fond transparent, et dont les coins sont ici arrondis.
J'ai suivi la méthode décrite ici,
le problème dans cette méthode est que les coins ont un fond de la même couleur que les bords et quand on passe à des images à fond transparent, les bords apparaîssent sous les coins.
J'ai tenté de jouer avec les margins et les paddings mais je n'ai pas réussi à résoudre le problème (les différents div étant imbriqués).

J'ai finalement à moitié résolu le problème en utilisant les listes de la façon suivante : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

 <title>Test</title>

 <meta http-equiv="content-Type" content="text/html; charset=iso-8859-15" />

<style type="text/css">

<!--

body {
background:url("fond.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;

}

.ulpanneau {display:inline}
.ulpanneau li  { list-style-type:none; }
.panneau_bord_haut {margin-left:12px; margin-right:12px;height:12px;background: url(panneau/bord_haut.gif) 0 100% repeat-x;  }
.panneau_bord_bas {margin-left:12px; margin-right:12px;height:12px;background: url(panneau/bord_bas.gif) 0 100% repeat-x;  }
.panneau_bord_gauche {background: url(panneau/bord_gauche.gif) 0 0 repeat-y;}
.panneau_bord_droit {background: url(panneau/bord_droit.gif) 100% 0 repeat-y; }
.panneau_coin_bas_gauche {height:12px;background: url(panneau/coin_bas_gauche.gif) 0 100% no-repeat; }
.panneau_coin_bas_droit {height:12px;background: url(panneau/coin_bas_droit.gif) 100% 100% no-repeat;}
.panneau_coin_haut_gauche {height:12px;background: url(panneau/coin_haut_gauche.gif) 0 0 no-repeat; }
.panneau_coin_haut_droit {height:12px;background: url(panneau/coin_haut_droit.gif) 100% 0 no-repeat;}
.panneau {margin-left:12px; margin-right:12px; background: url(panneau/fond.png) 0 0 repeat; }

-->

</style>

</head>

<body >

<div id="global">

<ul class="ulpanneau">
<li>
<div class="panneau_coin_haut_gauche">
	<div class="panneau_coin_haut_droit">
	<div class="panneau_bord_haut"></div></div></div>
</li>
<li>
	<div class="panneau_bord_gauche">
	<div class="panneau_bord_droit">
	<div class="panneau" style="color:white">totoblablanlanla
	</div></div></div>
</li>
<li>
<div class="panneau_coin_bas_gauche">
	<div class="panneau_coin_bas_droit">
	<div class="panneau_bord_bas"></div></div></div>
</li>
</ul>

</div>
</body>

</html>


Les problèmes restants :
- j'ai toujours des décalages avec ie6
upload/8009-exemplebord.jpg
- la largeur du div ne correspond pas juste à la largeur du contenu (ici il fait la largeur de la page).

Quelqu'un aurait-il une solution à ce problème ?

PS : l'idée est que la bordure s'ajuste lorsqu'on change la taille de police, donc une image faisant la largeur du div n'est pas satisfaisante...

Merci d'avance !

<edit>
L'utilisation d'un tableau résoud évidemment le problème mais il doit bien exister un moyen de faire sans tableau Smiley langue !
< /edit>
Modifié par gwalarn (11 Aug 2006 - 16:06)
Sujet clos
Aller à