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?