Discussion :

[Xzander]

Bonjour! Je voudrais comment faire pour avoir un div avec une bordure personnalisée. Mon motif a trois pixels de long par un pixel de largeur.

J'avais pensé à ceci:
CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div#BordureHaut
{
    background-image: url(MotifHorizontal.gif);
    background-repeat: repeat-x;
    background-position: top;
}
div#BordureBas
{
    background-image: url(MotifHorizontal.gif);
    background-repeat: repeat-x;
    background-position: bottom
}
div#Contenant
{
    background-image: url(MotifVerticalGaucheDroite.gif);
    background-repeat: repeat-y;
}
div#Contenu
{
    background-image: none;
    background-color: Transparent;
}

XTHML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div id="Contenant">
    <div id="BordureHaut"></div>
    <div id="Contenu">Test</div>
    <div id="BordureBas"></div>
</div>

Avec ceci, mes bordures du haut et du bas n'apparaissent pas dans IE6 car les divs sont vides.

Si je rajoute   alors les divs prennent des dimensions trop grandes même si j'essaie ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

font-size: 0;

J'ai aussi essayé de forcer les deux divs à garder un height de 1 mais on dirait qu'il l'ignore.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

height: 1px;

Avez-vous une idée de ce que je dois faire?

[Celeri]

As-tu essayé de mettre dans tes div vides simplement des commentaires :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!-- -->

[Xzander]

As-tu essayé de mettre dans tes div vides simplement des commentaires :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!-- -->

Ah bien Celeri, t'es un magicien! Ça fontionne! Aussi insignifiant que ça puisse sembler... Ce n'est pas très élégant.. mais IE6 ne semble pas l'être davantage...

D'après moi, le problème, c'est IE6... car sur FireFox et Netscape, aucun problème, si je dis height: 1px;, ça fontionne alors que sur IE6... impossible d'afficher correctement.

Merci encore!!