[css] probleme de pordures personnalisé sous ie

Bonjour à tous!

voila mon problème :

Je voudrais mettre des bordures personnalisées à un div.
La solution que j'ai mise en place (peut être pas la meilleur et je prend si vous avez mieux!) consiste à imbriqué plusieurs div. Cela marche tres bien sur firefox et opera mais pas bien sur ie (www.e-caveavin.com essayé vous verrez..).

Voici les sources :

<code type="html">                                
        <div class="coin_hg">
        </div>
        <div class="coin_hd">
        </div>
        <div class="bordure_h">
        </div>
        <div class="cote_gauche">
                <div class="cote_droit">
                        <input type="text" size="15" name="login" /><br/>
                        <input  type="password" size="15" name="password" /><br/>
                        <input type="submit" name="connexion" value="s'identifier"/><br/>
                        <a href="mot-de-passe.php">Mot de passe oublié?</a>
                </div>
        </div>
        <div class="coin_bg">
        </div>
        <div class="coin_bd">
        </div>
        <div class="bordure_b">
        </div>

le css :

div.coin_hg
{
        background: url('csg.jpg')top left no-repeat;
        height: 11px; /* Remplacez par votre valeur à vous */
                  width:17px;
                  float: left;
}

div.coin_hd
{
        background: url('csd.jpg') top right no-repeat;
        float: right;
        height: 11px;
        width:18px;
}

div.bordure_h
{
        background: url('bs.jpg') top repeat-x;
        height : 11px;
}


div.coin_bg
{
        background: url('cig.jpg') left bottom no-repeat;
        padding-left: 17px;
        float: left;
        height: 11px;
        width:17px;
}

div.coin_bd
{
        background: url('cid.jpg') right bottom no-repeat;
        padding-right: 18px; 
        float: right;
        height: 11px; 
        width:18px;
}

div.bordure_b
{
        background: url('bi.jpg') bottom repeat-x;
        height : 11px;
}

div.cote_gauche
{
    background: url("bg.jpg")  left repeat-y;
    padding-left: 19px;
}

div.cote_droit
{
    background: url("bd.jpg") right repeat-y;
    padding-left: 20px;
         overflow: hidden;
}

Merci d'avance à vous tous! je reste à votre entière disposition!

Salut,

Je te propose de te simplifier la vie, et de simplifier ton code par la même occasion. Fais un tour sur ces deux pages qui t'aideront à faire quelque chose qui marche et qui ne ressemble pas à une usine à gaz comme présentement

Une boîte de largeur fixe avec bordures et coins arrondis
Page fluide avec bordures
A toi de choisir celle qui te convient le mieux si tu veux des blocs de tailles fixes ou fluides.

Je viens de regarder...mais je crois qu'aucune des solutions n'est extensibles dans les deux sens? si?

serial a écrit :
Je viens de regarder...mais je crois qu'aucune des solutions n'est extensibles dans les deux sens? si?

La deuxième (celle qui n'est pas détaillée) si, mais c'est relativement complexe à gérer.

Mais sauf erreur de ma part, ce que tu as fait sur ton site n'est pas extensible en largeur. Le premier exemple (ou une version adaptée) pourrait donc convenir.

sisi! ce que j'ai fait est extensible dans les deux sens vu que le div le plus interieur va élargir les autres. tu vois? enfin je l'utilise et il est extensible lol

Le prob en fait sous ie c'est c'est qu'il y a un probleme de marge je pense...

En fait il suffit de 8 images et de 4 conteneurs 1pour chaque bodure, les coins ne necissitant pas de conteneur, simplement une image dotée d'un attribut id ou class
Modifié par overflow (28 Apr 2007 - 08:01)

pourrais tu etre plus precis s'il te plait?je ne suis pas sur d'avoir tout bien saisi...

merci de m'aider!!

en fait il faut un conteneur pour chaque bordure avec une image en
repeat-x pour le haut et le bas et
repeat-y pour gauche et droite.

pour les coins 1 image avec attribut class ou id selon que tu dois repeter ou pas ton bloc dans ta page.
L'attribut de chaque image la fera se positionner la ou tu le desires

si tu marques .coingauche{float:left} ton image se positionnera a gauche et en haut et ainsi pour chaque image tu donnes la propriété adequate..

je vais t'en preparer un vite fait et je te previens pour te donner les codes



les codes sont sur la page ICI
Modifié par overflow (28 Apr 2007 - 11:58)

MERCI!! Franchement c'est enorme! Et puis une fois les que j'i vu te sources je me suis dit...quel c*n! Vraiment merci!

Avec plaisir

Et peut-etre que d'autres pourront en profiter