Discussion :

[AsPrO]

Bonjour,
J'ai trouvé une gallerie photo déjà faite qui se trouve dans un bloc div. Mon but est de l'intégrer dans mon CMS (zite) qui contient donc deja une structure avec des div.

Mon problème est lorsque que j'ai mis le code de la gallerie dans le div correspondant au corps de la page (#main), le div de la gallerie(.photo) dépasse le div du corps de la page. Ce que je voudrais c'est que la hauteur du corps de la page s'adapte à la hauteur de la gallerie, pour englober celle ci peu importe la solution.

Merci d'avance

Code Structure du site :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="page">
		<div id="top">...</div>
		<div id="mid">
			<div id="main">
				...
			</div>
                        <div id="side">
				...
			</div>
			<div id="break"></div>
		</div>
		<div id="bot">...</div>
	</div>

Code Css du site :

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
 
#mid {
	width: 900px;
	border-bottom: 1px solid #CCC;
	background-image: url(deco/bg2.png);
	margin:0;
	padding: 0;
}
#main {
	width: 676px;
	float: left;
	margin:0;
	padding: 7px;
	text-align: justify;
	overflow:visible;
}

Code Css gallerie :

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

1
2
3
4
 
.photo {width:635px; text-align:left; position:absolute; margin:0 auto;}
 
.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}

[lefou4]

As-tu essayé d'enlever le position absolute sur .photo ?

[AsPrO]

Non mais je vais aller essayer

[AsPrO]

As-tu essayé d'enlever le position absolute sur .photo ?

Oui j'ai essayé et ca ne va toujours pas

[AsPrO]

Personne n'a une idée ? Je pensais que c'était un problème récurent et que donc quelqu'un avait déjà trouvé la solution ...

[kilou_style]

c'est un peu de t'aider comme ca, mais je pense que tu devrais utilisé firebug et tu essaies de toucher un peu tout...

[AsPrO]

Ok merci, je vais essayer

[lefou4]

.photo est-il bien dans le div #main ?

Le div #main étant en float left, celui-ci sort du container #mid. Pour t'en rendre compte ajoute un border à #mid.

Essaie en mettant un clear:both sur #bot afin d'annuler l'effet flottant.

Ensuite enlève le positionnement absolute de .photo. En effet le positionnement absolu a le même effet que le float : ça sort du container.

Il y a peut-être d'autre chose à voir mais teste déjà cela.

[Macmillenium]

Le div #main étant en float left, celui-ci sort du container #mid. Pour t'en rendre compte ajoute un border à #mid.

Essaie en mettant un clear:both sur #bot afin d'annuler l'effet flottant.

Uniquement sous IE8 et les navigateurs alternatifs.
Sous IE7-, #mid a le Layout (width: 900px;) et englobe ses enfants flottant.

Il faudrait donc conférer un nouveau contexte de formatage :

Code css :

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

1
2
3
4
5
6
7
8
9
10
#main {
	width: 676px;
	float: left;
	margin:0;
	padding: 7px;
	text-align: justify;
	/* overflow:visible; */
        overflow:hidden
}

Au passage, visible est la valeur initiale de overflow et ne confère pas de contexte de formatage.

La suite dans la FAQ CSS http://css.developpez.com/faq/?page=...ment_flottants

positionnement absolu a le même effet que le float : ça sort du container.

Ce que je voudrais c'est que la hauteur du corps de la page s'adapte à la hauteur de la gallerie, pour englober celle ci peu importe la solution.

Un élément en absolue est entièrement retiré du flux normal c'est comme s'il n'existe pas pour les autres éléments, pas comme le float.

Je vois deux solutions :
1. Utiliser un autre type de positionnement pour la galerie ;
2. Utiliser JavaScript pour calculer la hauteur de la galerie et l'affecter au conteneur.

[AsPrO]

Ah super, merci pour vos réponses.
J'essaye tout ça des que je peux