Cadre souple

Cadre souple - HTML/CSS - Programmation

Marsh Posté le 01-04-2006 à 17:22:55    

Hello,

 


je souhaite faire un cadre souple autour de certaines div, pour ca je
dispose de toutes les images necessaire (coin inférieurs/supérieurs
etc...).

 


J'ai commencé par essayer de faire le haut du cadre avec la méthode suivante:

 


- Un div contenant en background la partie centrale du cadre qui se repete

 


- Dans ce div, deux span flotant a droite et a gauche avec en background les coins supérieurs et inférieurs.

 


Le code est le suivant:

 

 


Le XHTML:
 

Code :
  1. <!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  9.    <head>
  13.        <title>Cadre</title>
  17.        <meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
  21.       <link rel="stylesheet" media="screen" type="text/css" title="Test du css" href="style.css" />
  25.    </head>
  29.    <body>
  33.       <div>
  37.          <div class="top_border">
  41.             <span class="top_corner_l"></span> <span class="top_corner_r"></span>
  45.          </div>
  49.       </div>
  53.    </body>
  57. </html>

 


Le CSS:
 

Code :
  1. .top_border {
  5.    background-image: url('border_top_repeat.png') repeat-x;
  9.    width: 50%;
  13.    height: 15px ;
  17.    border: 2px solid;
  21. }
  29. .top_corner_l {
  33.    float: left;
  37.    background-image: url('border_top_left_corner.png');
  41.    width: 16px;
  45.    height: 15px ;
  49.    border: 2px solid blue;
  53. }
  61. .top_corner_r {
  65.    float: right;
  69.    background-image: url('border_top_right_corner.png');
  73.    width: 16px;
  77.    height: 15px ;
  81.    border: 2px solid red;
  85. }

 


Les coins s'affichent correctements.

 


Par contre, la partie centrale du cadre, qui devrait être en background du div conteneur, ne s'affiche pas et reste blanche...

 


 

 


Quelqu'un voit-il mon erreur?
 
Merci d'avance

Reply

Marsh Posté le 01-04-2006 à 17:22:55   

Reply

Marsh Posté le 01-04-2006 à 17:35:29    

remplace:
background-image: url('border_top_repeat.png') repeat-x;
par:
background: url('border_top_repeat.png') repeat-x;

Reply

Marsh Posté le 01-04-2006 à 17:46:39    

Oui ca fonctionne merci.
Tu sais pourquoi il n'accepte pas avec background-image?

Reply

Marsh Posté le 01-04-2006 à 17:51:04    

parceque background-image n accepte que une url, alors que ``background`` tout court accepte couleur+url+repeat+position à la queue leu leu
 
la doc CSS: http://www.w3.org/TR/CSS1

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed