28115 sujets

CSS et mise en forme, CSS3

Un <div> sais t-il s'adapter automatiquement sa hauteur?

Bonjour,

Je revois actuellement mon site et je ne parviens pas à ce que le div id="contenu" s'adapte automatiquement en hauteur à son contenu. voir code ci-dessous.


<div id="divprin">

	<div id="header">
	</div>

	<div id="menu">
	</div>

	<div id="contenu">
		<div id="index-1">
		</div>
		<div id="index-2">
		</div>
		<div id="index-3">
		</div>
		<div id="index-4">
		</div>
	</div>

	<div id="footer">
			<div id="pied-index">
			</div>
	</div>

</div>


Merci d'avance

Pika28
Modifié par pika28 (31 Dec 2009 - 10:02)
Laurie-Anne a écrit :
Bonjour,

Sans le code CSS associé, ça va être dur de te répondre...


et voila le css, trop complet, j'ai remis le lien dans le premier post
AspiGeek a écrit :
Hello,

Essaye de mettre la règle css suivante...

#contenu{ overflow:hidden;}


ca ne change rien
Oui je viens de trouver ton erreur avec le css...

C'est ton positionnement relative qui pose problème car il ne sort pas du flux...

Si tu supprimes ton positionnement relative de tes #index-1, 2, 3 et 4 tu retrouveras l'emplacement réel des éléments et comprendra d'où vient l'espace Smiley cligne

Préfère utiliser le float:left si tu veux empiler tes blocs les un a côté des autres, tout en leur fixant une largeur...
Modifié par AspiGeek (19 Nov 2009 - 20:33)
AspiGeek a écrit :
Oui je viens de trouver ton erreur avec le css...

C'est ton positionnement relative qui pose problème car il ne sort pas du flux...

Si tu supprimes ton positionnement relative de tes #index-1, 2, 3 et 4 tu retrouveras l'emplacement réel des éléments et comprendra d'où vient l'espace Smiley cligne

Préfère utiliser le float:left si tu veux empiler tes blocs les un a côté des autres, tout en leur fixant une largeur...


Effectivement, si je retire le relative, il m'affiche ceci avec les float:left et la hauteur


#index-1 { float:left; width:368px; height:200px}
#index-2 { float:left; width:500px; height:200px}
#index-3 { float:left; width:620px; height:200px}
#index-4 { float:left; width:250px; height:200px}

http://img134.imageshack.us/img134/2919/moi1l.th.jpg


et sans la hauteur de défini :

#index-1 { float:left; width:368px; }
#index-2 { float:left; width:500px; }
#index-3 { float:left; width:620px; }
#index-4 { float:left; width:250px; }

http://img22.imageshack.us/img22/2091/moi2oh.th.jpg
Non non il ne faut pas prendre au mot tout ce que je te dis, s'il te reste des espaces c'est que tu as du mettre d'autres blocs en relative.

Je t'ai indiqué d'où venait l'erreur et la piste à explorer avec les float:left car il est très très rare d'utiliser le positionnement en relative.

Pour ma part uniquement pour placer en absolute un bloc enfant par rapport bloc parent.

Si jamais tes connaissances en css ne sont pas suffisantes place les en absolute alors, c'est un peu extreme mais ça sera plus facile pour toi. Smiley smile
AspiGeek a écrit :
Non non il ne faut pas prendre au mot tout ce que je te dis, s'il te reste des espaces c'est que tu as du mettre d'autres blocs en relative.

Je t'ai indiqué d'où venait l'erreur et la piste à explorer avec les float:left car il est très très rare d'utiliser le positionnement en relative.

Pour ma part uniquement pour placer en absolute un bloc enfant par rapport bloc parent.

Si jamais tes connaissances en css ne sont pas suffisantes place les en absolute alors, c'est un peu extreme mais ça sera plus facile pour toi. Smiley smile


Salut AspiGeek,

Désolé pour le doublons, j'avais pas fait gaff. Je voulais surtout séparer les sujet pour rendre tout ceci plus clair. Je viens de voir ton site, il est classe, et j'aime beaucoup le slidecreator. J'ai pas fait gaff si il était libre de droit, mais si oui, je vais certainement m'en servir pour renplacer ma galerie CSS qui ne fonctionne pas bien avec IE6 et IE7...

L'ensemble de mon site est en absolute pour le moment et c'est justement pour apprendre toujours plus que je revois mon positionnement.

Je voudrait comprendre comment marche les loat, relative et clear, etc...
déjà lu plusieurs fois ces tutos Smiley murf et ceux de openWeb également

- Voila ou j'en suis... J'ai utilisé pour finir le padding pour placer les blocs à l'intérieur du bloc contenu.
Est ce la bonne façon de faire?

- J'ai toujours une interprétation différente dans IE6/IE7, dans IE8 et autres.... Comment ça se fait? Je précise que j'ai testé avec * { margin:0 ; padding:0 } en début de css et ça n'a rien changé.
Une idée ?
Modifié par pika28 (31 Dec 2009 - 10:02)
Bonjour,

Alors dans les problèmes:

1. Tu as du position:relative; top:0; left:0 un peu partout, ce qui ne sert strictement à rien la plupart du temps. Le positionnement par défaut, c'est le positionnement statique (position:static). Il n'y a que deux raisons pour utiliser le positionnement relatif: soit tu souhaites décaler visuellement l'élément par rapport à sa position normale (donc tu n'utilises pas top:0;left:0...), soit tu cherches à utiliser cet élément comme référent pour le positionnement absolu de ses enfants et descendants.

Solutions: réviser le positionnement statique, le positionnement absolu, et le positionnement absolu. Notamment, s'assurer que l'on maitrise bien le positionnement absolu par rapport à un ancêtre positionné. Cf. les tutos d'Openweb que tu as déjà lus. Smiley cligne

2. Tu ne gères pas le dépassement des flottants. Sur ta page de test, le contenu flottant de div#contenu risque de dépasser de ce conteneur et de perturber le positionnement des éléments qui suivent. Le problème ne se pose pas car tu as un autre élément dans le même conteneur, qui n'est pas flottant et fait à peu près la même hauteur. Ce n'est pas une solution satisfaisante. Il FAUT gérer le dépassement des flottants. Cf. le overflow:hidden proposé précédemment.

Solutions: faire des recherches sur le dépassement des flottants, et les moyens de le contrer. En général j'opte plutôt pour un contexte de formatage via un overflow:hidden, mais il y a d'autres solutions (le fameux <div style="clear:both"></div> en fin de conteneur...).
Merci beaucoup pour les réponses, on te citer justement sur un autre post qui commence à faire doublon...

Florent V. a écrit :
Le problème ne se pose pas car tu as un autre élément dans le même conteneur, qui n'est pas flottant et fait à peu près la même hauteur.

J'ai justement mis la même hauteur pour éviter un dépassement que je ne savais pas gérer... lol
Sujet clos
Aller à