height en auto

Version imprimable

height en auto

Bonjour,

je souhaiterais qu'une div s'agrandissent en hauteur automatiquement, cependant cela ne fonctionne pas.
Voici le code

CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 #expo { position :relative; padding: 0px 0px 0 0px; border: 5px solid #FFFFFF; height : auto ; } #expo .bloctxt { position : absolute; top : 0px; display: block; border: 1px solid #FFFFFF; height : auto ; } #expo .blocphoto { position : absolute; left : 40%; width: 300px; top : 0px; display: block; border: 1px solid #FFFFFF; height : auto ; }
le code HTML
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div id="expo"> <p class="bloctitre"> <h1>titre</h1> <p>texte</p> </p> <p class="blocphoto"> <img src="photosexpo/image1.jpg"> <img src="photosexpo/image2.jpg"> <img src="photosexpo/image3.jpg"> </p> </div>
La taille du Div se fait suivant Bloctitre mais NON blocphoto alors que bloc photo est plus grande en hauteur...

Est ce que vous avez une explication à mon probleme ?
merci beaucoup
Cordialement

25/08/2009, 16h04
cssman

Normal, un élément déclaré en absolute sort du flux. Ton cadre ne peut donc pas s'agrandir.

Par ailleurs, un p ne peut pas contenir d'autres éléments de type block. Donc l'imbrication p h1... pas bon du tout.
25/08/2009, 16h25
kilian

Oui ok mais je ne sais pas comment faire,

en faite ce que je souhaite :

un cadre , dans ce carde, à gauche il y aura le titre en dessous du texte et à droite 3 photos en ligne...

mais je ne connais pas la bonne syntaxe à utiliser...

Merci beaucoup

Un truc comme ça ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<div id="expo">
 
 <div class="bloctxt">
   <h1>titre</h1>
   <p>texte</p>
  </div>
 
 <div class="blocphoto"> 
   <p>
    <img src="photosexpo/image1.jpg">
    <img src="photosexpo/image2.jpg">
    <img src="photosexpo/image3.jpg">
  </p>
 </div>
 
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
#expo {
 padding:0;
}
 
#expo .bloctxt
{
 float:left;
 width:39%;
}
 
#expo .blocphoto
{
 margin-left : 40%;
 width: 300px;
}

Bonjour,

Pour commencer http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

Ensuite :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 #expo { /* position :relative; padding: 0px 0px 0 0px; */ border: 5px solid #FFFFFF; /* height : auto ; */ overflow:hidden; width:750px; } #expo .bloctitre { /* position : absolute; top : 0px; display: block; */ border: 1px solid #FFFFFF; /* height : auto ; */ float:left; width:400px; } #expo .blocphoto { /* position : absolute; left : 40%; */ width: 300px; float:right; /* top : 0px; display: block; */ border: 1px solid #FFFFFF; /* height : auto ; */ }
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div id="expo"> <div class="bloctitre"> <h1>titre</h1> <p>texte</p> </div> <p class="blocphoto"> <img src="photosexpo/image1.jpg"> <img src="photosexpo/image2.jpg"> <img src="photosexpo/image3.jpg"> </p> </div>
Tout ce qui est en commentaire est inutile.
Préfère le positionnement flottant, le positionnement absolue n'est pas pertinent ici (retire l'élément du flux normal comme le signale cssman)

Avec le overflow:hidden (contexte de formatage* pour les navigateurs modernes) + width:750px; ou une déclaration neutre comme zoom:1 si tu ne veux pas fixer la largeur (haslayout* pour IE7- et plus précisément IE6 dans ce cas de figure), le parent #expo peut s'adapter à la taille de ses enfants flottants.

(*) Tu as pas mal de mots clés, je t'invite à orienter tes recherches :)

25/08/2009, 21h23
kilian

Merci les gars, je vois bien que je melange tout que je rajoute des choses inutiles etc...
Je vais tout de suite tester vos conseils
Je vous tiens informé
A plus
Merci
25/08/2009, 21h45
kilian

J'ai par conséquent pris exemple sur vos propositions.

Cependant voila ce que j'obtiens :

http://www.pizza-memo.com/share/csk.png

Je souhaiterais que les images commencent au même niveau que le Titre en Bleu, je veux dire à la même hauteur...

Je veux essayer de me mettre au CSS pour remplacer mes tableaux ( table ) mais c'est moins evident hihi...

Sinon Macmillenium, tu proposes :

...
<div class="bloctitre">
...

...
<p class="blocphoto">
...
...

Pourquoi pas un Div non plus pour "blocphoto" ?

Merci pour vos informations
A bientot
26/08/2009, 09h59
Macmillenium

As-tu essayé mon code ?
Je pense que tu n'as pas flotté .bloctitre

Citation:

Envoyé par kilian

Pourquoi pas un Div non plus pour "blocphoto" ?

Humm ... pour contenir des images, les deux peuvent avoir la même valeur sémantique ;)
26/08/2009, 10h11
kilian

Merci mec je regarde
26/08/2009, 10h21
kilian

Pleins d'excuses, j'ai effectivement mal lu le "bloctitre", je souhaite te et vous remercier pour votre aide....
:ccool:
A bientot