Bonjour à tous,
je voudrais réaliser un cadre arrondi avec 8 images. 4 pour les coins et 4 sur le cotés.
Mon soucis est que sur les 8 images, seul 6 s'affichent normalement sur internet explorer 6. Le div affichant l'image de droite et celle de gauche ne prenne pas en compte le [I][B]repeat-y[/B][/I] sur ie 6.
Pourtant si je test la méthode sur d'autre navigateur celle-ci marche parfaitement, même pour ie 5.5 et 5.1.
Voilà mon code CSS :
Voila la partie HTML du code ( en italique la partie optionnel )
J'espère que vous me trouverez une solution, car la j'avoue, je sèche totalement.
Merci d'avance pour vos réponse et bonne journée à tous
je voudrais réaliser un cadre arrondi avec 8 images. 4 pour les coins et 4 sur le cotés.
Mon soucis est que sur les 8 images, seul 6 s'affichent normalement sur internet explorer 6. Le div affichant l'image de droite et celle de gauche ne prenne pas en compte le [I][B]repeat-y[/B][/I] sur ie 6.
Pourtant si je test la méthode sur d'autre navigateur celle-ci marche parfaitement, même pour ie 5.5 et 5.1.
Voilà mon code CSS :
.relsample {
position: relative;
}
.relsample
.top_left,
.relsample
.top_right,
.relsample
.bottom_left,
.relsample
.bottom_right {
height: 25px;
width: 25px;
background-repeat: no-repeat;
position: absolute;
}
.relsample .top_left {
top: 0px;
left: 0px;
background-image: url("images/Dtheme/cornergh.gif"); z-index: 0;
}
.relsample .top_right {
top: 0px;
right: 0px;
background-image: url("images/Dtheme/cornerdh.gif"); z-index: 1;
}
.relsample .bottom_left {
bottom: 0px;
left: 0px;
background-image: url("images/Dtheme/cornergb.gif"); z-index: 2;
}
.relsample .bottom_right {
bottom: 0px;
right: 0px;
background-image: url("images/Dtheme/cornerdb.gif"); z-index: 3;
background-position: bottom;
}
.relsample .content {
position: relative;
padding: 12px; z-index: 4;
}
.top {
position: absolute;
right: 0px;
top: 0px;
width: 100%;
height:4px;
background-image: url("images/Dtheme/barho.gif");
background-repeat: repeat-x;
}
.bottom {
position: absolute;
bottom: 0%;
width: 100%;
height: 4px;
left: 0px;
background-image: url("images/Dtheme/barho.gif");
background-position: bottom;
background-repeat: repeat-x;
}
.left {
position: absolute;
width: 4px;
height: 100%;
left: 0px;
background-image: url("images/Dtheme/barvert.gif");
background-repeat: repeat-y;
}
.right {
position: absolute;
right: 0%;
width: 4px;
height: 100%;
background-image: url("images/Dtheme/barvert.gif");
background-repeat: repeat-y;
background-position: right;
}
Voila la partie HTML du code ( en italique la partie optionnel )
<div class="relsample">
<div class="top">
[I] <div align=center>[/I]
LE TITRE DANS LA PARTIE HAUTE ARRONDIE[I]</div>[/I]
</div>
<div class="left"></div>
<div class="right"></div>
<div class="top_left"></div>
<div class="top_right"></div>
[I]<div class="contentu">[/I]
LE CONTENUE
[I]</div>[/I]
<div class="bottom"></div>
<div class="bottom_left"></div>
<div class="bottom_right"></div>
</div>
J'espère que vous me trouverez une solution, car la j'avoue, je sèche totalement.
Merci d'avance pour vos réponse et bonne journée à tous