28112 sujets

CSS et mise en forme, CSS3

bonjour, j'ai bien du souci avec la propriété background color. j'ai un div à l'intérieur duquel sont publiés des photos, et pas moyen de donner un couleur de fond à ce div. Enfin si, en fixant la propriété height j'arrive à afficher la couleur de fond sur la hauteur ainsi défini, mais ce n'est pas vraiment souple comme solution de la même façon si je rajoute du texte, le fond s'affiche sur la portion du div occupé par le texte mais pas sur le reste du texte.
je vous donne le code:

div.article-content{
border: 5px solid;
background-color:#666666 ;
}


 
<div class="article-content">
<a href="/images/stories/beton.jpg" rel="rokbox[561 350](lieu)" title="béton :: béton"><img class="album" src="http://localhost:8888/images/stories/beton_thumb.jpg" alt="béton :: béton" /></a> 
<a href="/images/stories/fenetre.jpg" rel="rokbox[561 350](lieu)" title="fenêtre :: une fenêtre"><img class="album" src="http://localhost:8888/images/stories/fenetre_thumb.jpg" alt="fenêtre :: une fenêtre" /></a> 
<a href="/images/stories/fond-beton.jpg" rel="rokbox[561 350](lieu)" title="fond beton :: il pleut"><img class="album" src="http://localhost:8888/images/stories/fond-beton_thumb.jpg" alt="fond beton :: il pleut" /></a> 
<a href="/images/stories/matin.jpg" rel="rokbox[561 350](lieu)" title="un matin :: le soleil"><img class="album" src="http://localhost:8888/images/stories/matin_thumb.jpg" alt="un matin :: le soleil" /></a> 
<a href="/images/stories/ombre.jpg" rel="rokbox[561 350](lieu)" title="une ombre :: une ombre"><img class="album" src="http://localhost:8888/images/stories/ombre_thumb.jpg" alt="une ombre :: une ombre" /></a> 
<a href="/images/stories/petit-dejeuner.jpg" rel="rokbox[561 350](lieu)" title="petit déjeuner :: petit déjeuner"><img class="album" src="http://localhost:8888/images/stories/petit-dejeuner_thumb.jpg" alt="petit déjeuner :: petit déjeuner" /></a> 
</div>

Apparement c'est inhérent aux propriétés de l'élément div. Si ces images étaient dans un tableau, le fond s'appliquerait. mais y a t-il une façon souple de règler le problème sans rajouter de tableau et sans avoir à définir la hauteur de l'élément. et pourquoi le fond s'applique t il au texte mais pas derrière les images?
Modifié par ndoto (22 Sep 2009 - 12:17)
Salut,

Tes images ne seraient pas avec une position flottante ?
Si c'est le cas : Éléments flottants qui dépassent de l'élément parent

Sinon, avec si peu d'éléments, difficile de savoir. On a pas l'intégralité de la feuille de style, et des propriétés ailleurs dans la feuille peuvent influencer ce qui t'intéresse. Et puis dans ces cas là une page en ligne pour constater le problème, c'est mieux ! Smiley cligne
Merci de ta réponse. , j'ai essayé de donner comme indication
float:none;

div#article-content qui contient les images,
ce qui ne donnait rien puis à l'inverse
float: left;
et là j'ai récupèré mon background color. donc je suis content quand au rendu, mais je ne comprend pas pourquoi j'ai besoin de la propriété float pour obtenir l'affichage du fond.
je ne publie pas le fichier css in extenso il est issu d'un template jumla et long comme le bras, mais voici les ancêtres du div article-content qui contiennent des informations de de mise en forme

.clearfix:after {
	clear: both;
	display: block;
	content: ".";
	height: 0;
	visibility: hidden;
}

* html > body .clearfix {
	width: 100%;
	display: block;
}

* html .clearfix {
	height: 1%;
}
#ja-wrapper {
	width: 100%;
	margin: 0;
	background: none;
}
#ja-mainbody{
	float: left;
	width: 80%;
}
#ja-contentwrap {
	min-height: 300px;
	height: auto;
}

est-ce que le fait que le div où je veux afficher le fond se trouve dans un container flottant explique que je doive définir ce div comme flottant pour obtenir l'affichage de la couleur de fond? et pourquoi?
Modifié par ndoto (23 Sep 2009 - 12:10)
y faut lire... Smiley ravi bon toutes les réponses proposés par l'article : Éléments flottants qui dépassent de l'élément parent que me conseillait Mikachu sont toutes effectives.
C'est bien ce cas qui s'applique.Cependant dans mon cas les images ne sont pas définies comme flottantes dans le div. C'est ça que je ne comprend pas. D'autre part lorsque je teste mon conteneur avec l'outil web developpeur et c'est aussi le cas dans l'article de cover prestige, la couleur de fond ne s'applique pas à l'ensemble du div mais le contenu ne dépasse pas pour autant du conteneur.
bon si vous avez des réponses je serais content de comprendre.