Cadres graphiques

**vinzzzz** · 01/04/2006, 17h17

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:
XHTML:

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
 
<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Cadre</title>
       <meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Test du css" href="style.css" />
   </head>
   <body>
		<div>
			<div class="top_border">
				<span class="top_corner_l"></span> <span class="top_corner_r"></span>
			</div>
		</div>
   </body>
</html>

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
23
 
.top_border {
	background-image: url('border_top_repeat.png') repeat-x;
	width: 50%;
	height: 15px ;
	border: 2px solid;
}
 
.top_corner_l {
	float: left;
	background-image: url('border_top_left_corner.png');
	width: 16px;
	height: 15px ;
	border: 2px solid blue;
}
 
.top_corner_r {
	float: right;
	background-image: url('border_top_right_corner.png');
	width: 16px;
	height: 15px ;
	border: 2px solid red;
}

Les coins s'affichent correctements.
Par contre, la partie centrale du cadre, qui devrait être en background du div conteneur, ne s'affiche pas...

Quelqu'un voit-il mon erreur?

**vinzzzz** · 01/04/2006, 19h06

Remplacer background-image par background... Background-image ne supportant pas d'autres paramètres qu'une url.

Cadres graphiques

HTML

Discussions similaires

Partager

Partager