28173 sujets

CSS et mise en forme, CSS3

Un bloc parent s'adaptant à la hauteur d'un bloc fils absolute

Bonjour,

J'aimerai savoir s'il existe une solution pour qu'un bloc parent n'ayant pas de hauteur spécifié puisse s'adapter à la hauteur d'un bloc fils placé dans ce bloc parent en position "absolute" :


<html>
	<head>
		<style type="text/css">
		div#parent {
			width:500px;
			margin-left:100px;
			position:relative;
			border:1px solid #000;
		}
		p#fils{
			position:absolute;
			width:400px;
			left:50%; 
			top:50%;	
			margin-left:-200px;
		}
		</style>
	</head>
	
	<body>

		<!-- code html !-->
		<div id="parent">
			<p id="fils">
			"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
			"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
			"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
			</p>
		</div>
		
	</body>

</html>



merci Smiley biggrin Smiley biggrin Smiley biggrin
Modifié par erehcab (12 Apr 2007 - 10:51)
erehcab a écrit :
J'aimerai savoir s'il existe une solution pour qu'un bloc parent n'ayant pas de hauteur spécifié puisse s'adapter à la hauteur d'un bloc fils placé dans ce bloc parent en position "absolute"

Non.

Ne pas utiliser le positionnement absolu pour le bloc enfant. Sauf besoin très spécifique, il ne devrait pas être bien difficile de s'en passer.


PS : ta page a un Doctype ? Si non, il faut travailler la question.
Les DTD HTML4.01 et XHTML1.0 : comment choisir ?
Ok merci Florent, cette page servait juste d'exemple pour illustrer ma question d'ou l'oubli du doctype Smiley confused

Je revien sur ma question, dans le cas très spécifique ou je ne peux pas me passer de ce type de mise en page comment gérer au mieu ce problème ?
Modifié par erehcab (12 Apr 2007 - 11:30)
erehcab a écrit :
Je revien sur ma question, dans le cas très spécifique ou je ne peux pas me passer de ce type de mise en page comment gérer au mieu ce problème ?

À quoi correspond « ce type de mise en page » ? Qu'est-ce que tu veux réaliser, visuellement ? Une petite image pour y voir plus clair ?

Quelque chose me dit que si tu montres ce que tu veux faire on pourra probablement te proposer une manière de le faire sans positionnement absolu (qui devrait être réservé à des petits éléments et de manière très ponctuelle/ciblée/maitrisée).
Une question : rassures-moi, tu n'as tout de même pas utilisé le positionnement absolu (artillerie lourde du positionnement CSS, à utiliser en dernier recours) dans le seul but de centrer horizontalement un bloc de 400px dans un bloc de 500px ?

Parce que s'il ne s'agit que de ça, il y a tout de même mille fois plus simple :
div#parent {
	width:500px;
}
p#fils {
	margin: 0 50px;
}

Modifié par Florent V. (12 Apr 2007 - 11:40)
Non je voulais juste faire des essai sur le positionnement absolu mais c'est vrai qu'il y a largement moyen de faire autres choses.
En faite je me disais qu'etant donné qu'il y a des possibilités de le centrer dans son conteneur parent (avec les marges négatives) il y aurai peut être une possibilité de faire ça .....

Mais je vais abandonner !!!!!! Smiley biggrin Smiley biggrin Smiley biggrin

En tous cas merci de m'avoir renseigné ! Smiley langue
Modifié par erehcab (12 Apr 2007 - 11:47)
Sujet clos
Aller à