28212 sujets

CSS et mise en forme, CSS3

Taille d'un div en fonction de l'image qu'il contient ?

Bonjour,

Question basique ? (j'ai bien lu la faq avant mais sans succès ...)

J'ai un conteneur (div) dont je ne veux pas préciser la taille ... celle-ci devant être déduite de l'image qui
se trouve à l'intérieur et de la taille du padding (fixée)
Quand je place ce conteneur (tout simplement dans <body> </body> par exemple), il agrandit le padding
pour occuper toute la largeur de la fenêtre ...

Comment puis-je faire pour que le padding fixé soit respectée ? (en conséquence de quoi, j'imagine que c'est la marge qui serait agrandie
parce qu'il faut bien occuper l'espace)

(je précise que je ne veux pas "styliser" le img mais le div ...

Je joins un extrait du code ...

merci pour vos conseils !



--- essai.html ---

<html>
<link rel="stylesheet" type="text/css" href="essai.css">
 
<body id="global">

<div class="cadre">
<img src="im19.jpg">
</div>

</body>
</html>


--- essai.css ---


 .cadre {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color:grey;
  border: solid lightgray;
    }

Modifié par noronha (28 Nov 2005 - 15:05)
Hello,

il faut bien distinguer le contenu et le conteneur, et à quel élément s'applique le padding.
Ici tu veux ce padding autour de ton image. Il faut donc le placer ainsi :
#conteneur{
	float:left;
	background-color:grey;
	border: solid 1px #aaa;
	margin:auto;
}	
#conteneur img{
	padding:40px;
}
<div id="conteneur"> 
      <img src="images/img.gif" />
</div>

Modifié par yyoupla (28 Nov 2005 - 15:18)
Bonjour,

Ce comportement est normal. Pour qu'un élément bloc calcule sa largeur en fonction de celle de son contenu, il faut le placer par exemple en flottant.

Mais la solution la plus simple est cependant de styler directement l'image avec padding, background et bordure.

(Au fait : ce n'est pas "grey" mais gray. Et lightgray n'étant pas un nom de couleur valide CSS2.1, il ne sera pas compris par tous les navigateurs. Utiliser plutôt la forme #d3d3d3)
yyoupla : que le padding soit appliqué à l'image ou à son conteneur est indifférent, et il sera pris en compte dans les deux cas. C'est l'ajout du float qui modifie le calcul de largeur comme souhaité Smiley cligne
Merci à vous deux pour vos réponses.
Effectivement, un float résoud le problème ...
Sauf que je dois mettre float: left ou float: right alors que je souhaiterais
faire float: middle qui n'existe pas ....
Du coup, je peux bien cadrer en stylant le div (je ne veux pas styler l'image
car l'idée est - à terme - de faire une cascade de div pour encadrer)
mais l'image n'est plus centrée ....

merci encore de votre patience ...
Laurent Denis a écrit :
Pour qu'un élément bloc calcule sa largeur en fonction de celle de son contenu, il faut le placer par exemple en flottant.

Je vais mettre ça dans ma signature Smiley biggol
La formulation est très limpide vue comme ça. Clair, net et précis.

PS : y a pas moyen de mettre de telles formules en rotation, en haut de forum, sous la bannière ? Smiley murf

@noronha : voir les tutoriels et la faq pour savoir comment centrer des éléments.
Modifié par globy (28 Nov 2005 - 15:39)
humm.. tu veux centrer quoi finalement ? l'image dans le div (qui alors a quelle largeur ?) ? ou le div dans son conteneur ?
Euh ... je veux que le div float (puisque je dois le préciser ainsi pour que mon image contenue soit correctement encadrée) soit au milieu de son conteneur
ce qui me parait contradictoire avec le fait de devoir mettre right ou left ...
J'ai comme l'impression de ne pas avoir bien compris ce qu'est un float ...
Je vais me risquer à une autre solution (vu mes idées claires aujourd'hui, je ne garantis pas... à voir le check de Laurent)
Si ton padding+bordure sert seulement à "encadrer" l'image, pourquoi ne pas lui appliquer directement ?
#conteneur{
	text-align:center;
}
#conteneur img{
	background-color:#efefef;
	border: solid 1px #aaa;
	padding:40px;
}
<div id="conteneur"> 
      <img src="images/img.gif" />
</div>
yyoupla, oui ce que tu proposes marche mais si je veux rajouter un autre
niveau d'encadrement, je suis bien obligé de passer par les div et non
pas de styler les img comme tu le proposes ....
Sujet clos
Aller à