28172 sujets

CSS et mise en forme, CSS3

Hauteur d'un parent ajustable au contenu de l'enfant.

Bonjour !

En gros, l'objectif c'est de faire un slideshow avec les animations CSS3. Pour ce faire, mes slides sont en position absolute. Cependant j'aimerais que la hauteur de mon slideshow variable. ( en fonction des différents formats d'image à mettre dans le slideshow éventuellement )

Donc voici un exemple simplifié de mon problème où mon <ul> devrait avoir la hauteur de son contenu afin que mon footer soit positionné naturellement correctement. Si je mets un height à mon <ul> ça règle le problème mais je veux justement éviter d'avoir un height; est-ce possible ?


<!DOCTYPE html>
<html>
<head>
<title>Slideshow</title>
<style>
	html, body, ul, li { padding:0; margin:0;}
	ul { position:relative; background:blue; }
	ul li { position:absolute; left:0; top:0; width:100px; height:100px; background:green; }
</style>
</head>

<body>
<ul>
    <li>
    	slide a
    </li>
    <li>
    	slide b
    </li>
    <li>
    	slide c
    </li>
</ul>
<div id="footer">footer</div>

</body>
</html>


Merci
Salut,

Un élément parent prendra toujours par défaut la hauteur des éléments enfants qu'il contient, pour peux que ceux-ci se situent toujours dans le flux. En ayant tes enfants en positions absolue, ils ne sont donc pas pris en compte dans la hauteur du parent, ce qui te pose problème.

La solution sera donc de supprimer le positionnement absolu pour les enfants.
Au fait pourquoi estime-tu qu'il est nécessaire ?
Salut,

En fait, je crois pouvoir avoir un meilleur contrôle sur les différentes transitions que j'avais en tête avec des positions absolutes. C'est sur que si c'est impossible, sans javascript, d'avoir mon <ul> de la même hauteur que son contenu, je vais devoir me raviser hehe.

Merci
Sujet clos
Aller à