[Résolu] Disparition de l'image de fond avec inline

Bonjour à tous, j'ai une petite question, j'ai utilisé trois blocs <div> auxquels j'ai appliqué une image de fond chacun.

Jusque là pas de problèmes les trois blocs s'affichent bien une fois que j'ai spécifié les dimensions. Je vais donc pour les mettre sur la même ligne avec la propriété display: inline; et là surprise, les trois blocs disparaissent. Ma question est donc la suivante :

Est il possible d'appliquer une image de fond à trois blocs div en ligne ?


Voilà le code

<div id="header">
	<div id="image_gauche">
	</div>
	<div id="image_centre">
	</div>
	<div id="image_droite">
	</div>
</div>

Et le css :

#image_gauche

{

width: 16px;
height: 25px;
background-image: url(./inc/images/head-left.gif);
background-position: top left;
background-repeat: no-repeat;

}

#image_centre

{

background-image: url(./inc/images/head-center.gif);
background-position: top left;
background-repeat: repeat-x;
width: 160px;
height: 25px;

}

#image_droite

{

background-image: url(./inc/images/head-right.gif);
background-position: top left;
background-repeat: no-repeat;
width: 16px;
height: 25px;

}

Merci à vous !!!!
Modifié par Artusamak (23 Feb 2006 - 15:40)

Bonjour,
En fait en passant le display tes div à inline, les propriété de taille ne sont plus appliquées car elles ne s'appliquent qu'aux éléments de type block.
Tu dois doter tes div de la proriété float:left.

Tu dois donc ajouter

#image_gauche, #image_centre, #image_droite {float:left} 

Modifié par Hermann (23 Feb 2006 - 13:21)

Bonjour Artusamak,
En effet, car la propriété display : inline ne place pas les éléments les uns à côté des autres. Elle transforme les éléments en bloc (div, hn, p...) en éléments en ligne (comme les liens, span etc...). On ne peut pas appliquer de dimensions (hauteur et largeur) à des éléments en ligne et comme tes divs sont vides, leur dimension est égale à 0. En rajoutant du texte, tu verrais que tes div s'adaptent au texte.

Voici un article d'Openweb sur les Boîtes bloc, boîtes en ligne et propriété display.

[EDIT : grillé par Hermann...]
Modifié par Jihel (23 Feb 2006 - 13:21)

Merci messieurs !