[resolu] Position:relative et flux

Bonjour j'ai une div conteneur

div.objet {
margin:1em 0;
min-height:7em;
position:relative;
width:100%;
}

et a l'interieur une autre div

div.objet div.prix {
position:absolute;
bottom:0;
right:0;
}

Mon probleme c'est que quand je remplis trop ma div "prix", (avec plusieurs retours a la ligne etc) elle dépasse par le dessus ma div conteneur.
J'aimerai que ma div conteneur adapte sa taille en fonction des div contenues, bien qu'elles soient en position:absolute ou float:right.

Merci d'avance
Modifié par Bobby_le_Chat (24 Oct 2009 - 03:01)

Salut,

En raison de la crise mondiale qui fait rage, tous les voyants et diseuses de bonne aventure de ce forum ont été licenciées, ne laissant plus que des développeurs, webdesigners, et autres webmasters ...

En outre, il sera difficile de t'aider sans plus d'information. As tu une page en ligne, solution idéale qui permettrait de constater le problème nous même ? Si ce n'est pas le cas, au minimum l'intégralité du code html et css produit ? Eventuellement des captures d'écran et/ou schémas si nécessaire ? Présentement, impossible de t'aider sans en voir plus.
Modifié par Mikachu (22 Oct 2009 - 16:44)

Au temps pour moi, je pensais qu'exposer un probleme general m'aiderai a résoudre mon probleme particulier, on va proceder de la facon inverse

Mon code :

<div id="centre">
<div class="objet">
<div class="nom"> Objet numero 1 </div>
<div class="img"> </div>
<div class="mise_en_page"> Contenu</div>
<div class="prix"> 152€ HT </br> remise : 10% </br> 152€ HT </br> remise : 10% </br> 152€ HT </br> remise : 10% </br> 175€ TTC </div>
</div>
<div class="objet">
<div class="nom"> Objet numero 2 </div>
<div class="mise_en_page"> Contenu</div>
<div class="img"> </div>
<div class="prix"> 152€ HT </br> remise : 10% </br> 175€ TTC </div>
</div>
</div>

div#centre {
background-color:#FFFFFF;
border:0.1em solid;
left:0;
margin:5px 0 0 200px;
overflow:visible;
padding:5px 10px;
position:absolute;
right:200px;
}
div.objet {
background-color:#6666FF;
border-style:dotted none;
border-width:0.1em;
margin:1em 0;
min-height:7em;
overflow:visible;
position:relative;
width:100%;
}
div.objet div.nom {
background-color:#000000;
color:#FFFFFF;
font-size:1em;
font-weight:bold;
left:2em;
padding:0.1em 0.2em;
position:absolute;
top:-0.8em;
z-index:2;
}
div.objet div.img {
background-color:#FF6666;
height:5em;
left:1.2em;
position:absolute;
top:1.2em;
width:5em;
z-index:1;
}
div.objet div.prix {
background-color:#FF66FF;
bottom:0;
position:absolute;
right:0;
}
div.objet div.mise_en_page {
background-color:#66FFFF;
}

Je repose le probleme : mes div en position absolute au lieu d'agrandir ma div "objet", la dépassent. Je peux cacher ce dépassement par un overflow:hidden, mais ce n'est pas l'effet souhaité. je veux que ma div "objet" (conteneur) adapte sa taille par rapport aux div "contenues" (bien qu'elles soient position:absolute) est-ce possible ? si non quelles alternatives me proposez-vous ?

T'as vraiment pas de page en ligne, parce que tes explications sans voir la page c'est pas évident... ?

Niveau code, sais tu qu'il existe d'autres balises que <div>, dont certaines parfois adaptées pour présenter du contenu ?

Salut, je pense qu'il faut revoir la conception global des blocs, ne peux tu pas utiliser les fameux float?

Sinon par rapport à ton problème, il me semble que le souci c'est que les div en position absolute sortent du flux (donc de leur conteneur global), ils devienent indépendants du conteneur.

En résumé, (et ce même si ton parent est en position relative), si les enfants sont en absolute, ils n'intevienderons pas dans le redimensionnement automatique (ici en hauteur) de la div parente.

J'espère avoir été clair ^^
Modifié par lucas07000 (22 Oct 2009 - 17:54)

C'est présisément le probleme, oui.
J'ai essayé avec les float, j'ai eu les problemes suivants :
Si un block est trop grand, ca met le suivant a la ligne. Je pourrais fixer la taille de ces div, et appliquer des marging : sauf que je ne connais pas la taille de la div de droite, qui augmente ou diminue selon son contenu.
second probleme: avec un float:right, ma div de doite ne sera pas aligné en BAS a droite, mais juste a droite.

Je pense que cumuler align:right et position:relative résoudrait mes problemes, mais ceux deux arguments assemblés semblent provoquer des bugs ... C'est le cas ?

Hum a mon avis tu t'y prend très mal...
Tu dois utiliser les float ici .. pas des position à gogo

par exemple:

div#centre { 
background-color:#FFFFFF; 
border:0.1em solid; 
left:0; 
margin:5px 0 0 200px; 
overflow:visible; 
padding:5px 10px; 
position:absolute; 
right:200px; 
} 
div.objet { 
background-color:#6666FF; 
border-style:dotted none; 
border-width:0.1em; 
margin:1em 0; 
min-height:7em; 
overflow:visible; 
width:100%; 
} 
div.objet div.nom { 
background-color:#000000; 
color:#FFFFFF; 
font-size:1em; 
font-weight:bold; 
left:2em; 
padding:0.1em 0.2em; 
position:relative; 
top:-0.8em; 
} 
div.objet div#content{ 
} 
div.objet div#content div.img { 
background-color:#FF6666; 
float:left ;
width:20% ;
height:100px; 
} 
div.objet  div#content div.mise_en_page { 
background-color:#66FFFF; 
float:left;
width:80%; 
} 

div.objet div.prix { 
background-color:#FF3333;
margin-left:90%;
} 
.clear{
clear:both;
}

<html> 
<head> 
<link href="CSS/style3.css" type="text/css" rel="stylesheet"/> 
</head> 
<body> 
<div id="centre">  
<div class="objet">  
    <div class="nom"> Objet numero 1 </div>  
    <div id="content">
        <div class="img"> </div>  
        <div class="mise_en_page"> Contenu</div> 
    </div> 
    <div class="clear"></div>
    <div class="prix"> 152€ HT </br> remise : 10% </br> 152€ HT </br> remise : 10% </br> 152€ HT </br> remise : 10% </br> 175€ TTC </div>  
</div>  
<div class="objet">  
    <div class="nom"> Objet numero 2 </div> 
    <div id="content">
        <div class="img"> </div>  
        <div class="mise_en_page"> Contenu</div> 
    </div> 
    <div class="clear"></div>
    <div class="prix"> 152€ HT </br> remise : 10% </br> 175€ TTC </div>  
</div>  
</div>  
</body> 
</html>

A noter que si tu veux faire remonter le prix en fonction de la taille du contenu et non de l'image alors il te faut plustot que faire juste un div content il te faut faire un div left et un div right tout deux en float et dans le gauche tu met juste l'image dans le droit le contenu suivi du prix..

Et voila tu as ce que tu voulais il me semble ...
Les positions ne sont la que quand elles sont vraiment utile.
Ici tu en abuse ainsi que du z-index non nécessaire. Vu que tes élements sont déjà dans le bon ordre. N'oublis pas d'utiliser les padding et margin; le tout associer à du float et tu peux déjà faire bcp sans te servir de position.
Modifié par casp (22 Oct 2009 - 19:11)

Pense à te faire un shéma en papier de ton site avant tout.
Chaque div un rectangle.
Tu pars d'un grand rectangle ton body, et tu subdivise petit a petit.
Sinon tu risque d'oublier un div conteneur et tes float vont partir en sucette effectivement en cas de contenu trop grand.

Merci pour vos réponses, j'obtiens ce que je veux, enfin, presque

avec

<div id="conteneur">
<div id="contenu1">
« Or donc il advint que la Comtesse, qui se baigna dans le sang revigorant d’une centaine de vierges, fut enterrée vive. Son château, [...] témoins muets de l’inhumanité des créatures humaines. »
</div>
<ul id="contenu2">
<li> Diablo 2 </li>
<li> Acte I  </li>
<li> La Tour Oubliée </li>
</ul>
<hr style="clear: both;"/>
</div>

#conteneur {
background-color:#6666FF;
width:50%;
}
#contenu1{
background-color:#FF6666;
float:left;
}
#contenu2 {
background-color:#66FFFF;
float:right;
text-align:right;
}

J'aimerai que le contenu1 retourne a la ligne une fois au contact du contenu2, sans avoir a définir une taille pour ces deux contenus. (qu'ils soient modulables, et non statiques).
merci