Discussion :

[kilian]

Bonjour,

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

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

[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

[cssman]

Un truc comme ça ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[Macmillenium]

Bonjour,

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

Ensuite :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[kilian]

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

Cependant voila ce que j'obtiens :



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