[HTML] Mettre une couleur à l'interieur d'une bordure et une autre à l'exterieur

**alex_m94** · 28/03/2008, 13h52

Bonjour, je suis nouveau dans le monde du développement web.
Je suis en train de faire un site et j'ai fait une bordure et j'aimerai mettre deux couleurs différentes : une à l'interieur de la bordure et une autre à l'exterieur de la bordure.

Un peu comme ce site http://www.landes.org/ où on a une image de fond et en page centrale les menus .....

Pouvez vous m'aider svP ??

**BnA** · 28/03/2008, 15h01

Code :

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

1
2
3
4
5
6
 
<div style="border:2px solid blue;width:500px;height:500px;">
   <div style="border:2px solid green;width:100%;height:100%;">
      Ton contenu
   </div>
</div>

**alex_m94** · 28/03/2008, 15h08

Envoyé par BnA

Code :

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

1
2
3
4
5
6
 
<div style="border:2px solid blue;width:500px;height:500px;">
   <div style="border:2px solid green;width:100%;height:100%;">
      Ton contenu
   </div>
</div>

Excuse mais je ne comprends pas, moi j'ai un fichier css et un html. Peut tu etre plus explicite stp?

**BnA** · 28/03/2008, 15h21

Oui, ça ce sont juste des "styles en ligne", c'est plus ou moins pareil...

Ton code séparé devrait ressembler à ceci:

Code html :

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

1
2
3
4
5
6
 
<div id="outside">
  <div id="inside">
    contenu
  </div>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
#outside{
border:2px solid green;
width:500px;
height:500px;
}
 
#inside{
border:2px solid blue;
width:100%;
height:100%;
}

En fait, ce que je fais, c'est que je crée une DIV avec une taille fixe et une bordure (d'une seule couleur).

A l'intérieur de cette DIV, je crée une autre DIV, à laquelle je dis d'utiliser toute la taille dispo. Cette DIV interne a une bordure d'une autre couleur.

C'est un "contournement" du problème, car je t'avoue ne pas voir d'autre solution.

**alex_m94** · 28/03/2008, 15h45

OK mais ce que je veux c'est mettre un couleur dans toute la zone a l'interieur de la bordure et une autre à l'exterieur de la bordure.

**BnA** · 28/03/2008, 16h07

Ah ok, je n'avais pas du tout compris cela...

Bah, essaie avec ceci.

Code html :

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

1
2
3
4
5
6
 
<body>
  <div id="container">
    Contenu
  </div>
</body>

Code css :

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

1
2
3
4
5
6
7
8
9
 
body{
background-color:#B8CAD6;
}
 
#container{
border:2px solid #73A9C3;
background-color:#DAE2E9;
}

Ca s'en rapproche?

Ici j'ai utilisé <body>, mais libre à toi d'adapter le code.
Retiens juste que ça marche par "paire" (2 DIV pour obtenir ce que tu veux), le PARENT ("celui qui contient") et l'ENFANT ("celui qui est contenu").

[HTML] Mettre une couleur à l'interieur d'une bordure et une autre à l'exterieur

HTML

Vue hybride

Discussions similaires

Partager

Partager