positionnement de div

[Gizmil]

Salut,

Voilà, je suis confronté à un souci majeur ! lol J'ai une div qui me pose problème et j'essaye de comprendre pourquoi !! Une fois, c'est les enfants qui sortent de leurs parents, une fois, c'est quelque chose qui ressemble à une fusion de marges... Donc j'essaye diverses astuces pour m'adapter et éviter le bug de positionnement mais au final, je n'y arrive jamais ! Je crois donc qu'il faudrait régler le problème à sa source. Le souci pour ma part, c'est que ça fait 2 jours que je m'y essaye et je n'ai toujours pas compris... alors, là, je sature !!

Au départ, j'essaye de faire ça :

http://www.casimages.com/img.php?i=1...0741409974.jpg

Mais à l'arrivée, j'obtiens ça :

http://www.casimages.com/img.php?i=1...0820739851.jpg

Bon, à priori, ce serait un problème habituel lié aux flottants. Mais j'ai essayé d'appliquer les conseils proposés dans le lien suivant à propos des bugs concernant les flottants :

http://css.developpez.com/faq/?page=...ment_flottants

et même d'autres atsuces au cas où ça aurait un rapport avec la fusion des marges! Mais résultat : rien !! Il reste à chaque fois quelque chose qui pose problème...

Je crois qu'à ce stade, une vision extérieure me serait d'un grand secours !

Je vous lègue donc directement mes fichiers de bon coeur (voir ci-dessous) ! Ce sera vraiment une grosse épine que vous me retirerez du pied !

http://www.gomyr.com/divers/site_giz...robeme_css.zip

PS : j'ai finalement mis des div pour créer mes marges mais même ça, ça ne marche pas ! Très bizarre, c'est tout le corps du site qui fusionne !

Franchement, merci d'avance si vous avez la patience de consulter ça !

[ornitho13]

Salut,

En fait il y 2 choses à changer, la structure html au niveau de l'id="annonces".
Voici le code pour ta div "contenu", j'ai déplacé "annonces" en dehors d'un de tes block '.mainblock' :

Code html :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
		<div id="contenu">
			<div id="ombre_haut"></div>
			<div class="spacer1"></div>
			<div class="mainblock_top"></div>
			<div class="mainblock">
				<div id="diaporama" Title="Diaporama">
					<a href="http://www.adobe.com/fr/products/flashplayer/" id="getFlashPlayerDiapo" alt="Vous devez avoir installé le lecteur Flash Player pour pouvoir profiter de ce contenu" title="Télécharger Adobe Flash Player"></a>
				</div>
				<script type="text/javascript">
					var introCont = new SWFObject("pages/diaporama.swf", "SWF_Diaporama", 910, 419, 9, "#0b0b0b");
					introCont.write("diaporama");
				</script>
			</div>
			<div class="mainblock_bottom"></div>
			<div class="spacer1"></div>
			<div class="mainblock_top"></div>
			<div class="mainblock">
				<div id="entrepartic">
					<a href="index.php?contenu=entreprises" id="btn_entreprises" alt="ENTREPRISES - Corporate - Packshots" title="Galeries ENTREPRISES - Corporate - Packshots"></a>
					<a href="index.php?contenu=particuliers" id="btn_particuliers"  alt="PARTICULIERS - Mariages - Portraits Studio" title="Galeries PARTICULIERS - Mariages - Portraits Studio"></a>
				</div>
				<div class="mainblock_bottom"></div>
				<div class="spacer1"></div>
 
			</div>
			<div id="annonces">
				<div id="annonce_piece1"></div>
				<div id="annonce_piece2"></div>
				<div id="annonce_piece3"></div>
				<div id="annonce_piece4"></div>
				<a href="" alt="Flux RSS" title="Nous suivre via le Flux RSS" id="annonce_rs1"></a>
				<a href="" alt="Facebook" title="Nous suivre sur Facebook" id="annonce_rs2"></a>
				<a href="" alt="Twitter" title="Nous suivre sur Twitter" id="annonce_rs3"></a>
				<a href="" alt="LinkedIN" title="Nous suivre sur LinkedIN" id="annonce_rs4"></a>
				<div id="annonce_piece5"></div>
				<a href="http://ficj.net/" alt="FICJ" title="Fédération Internationale des Communautés Juives" id="annonce_partenaire1"></a>
				<a href="" id="annonce_partenaire2"></a>
				<div id="annonce_piece6"></div>
				<div id="annonce_piece7"></div>
				<div id="annonce_piece8"></div>
			</div>
			<div class="spacer1"></div>
			<div id="ombre_bas"></div>
		</div>

En plus, il manquait le tag de fermeture de la div "contenu", je l'ai rajouté.

Ensuite, il faut juste changer le CSS pour la class 'mainblock_bottom' en rajoutant un margin-bottom :

Code css :

1
2
3
4
5
6
7
 
.mainblock_bottom {
	width: 944px;
	height: 14px;
	background-image: url(images/mainblock_bottom.png);
	margin: auto auto 10px;
}

j'ai mis 10px mais a priori, il faudra mettre plus si je regarde bien l'image que tu as envoyé (environ 50px)

[Gizmil]

Salut, Ornitho13 ! Avant tout, un grand merci pour ta réponse, ça fait plaisir !!

Je suis sûr que ta méthode fonctionne mais je dois t'avouer que je ne saisi pas toute ta démarche ! Je pense que si tu savais m'expliquer le pourquoi du comment, ça m'aiderait à ne pas rester dans le flou et savoir comment éviter ce genre de problème à l'avenir !

Par exemple, j'ai un peu de mal à comprendre la logique de ceci :

Code :

1
2
3
4
5
6
7
 
<div class="mainblock_top"></div>
<div class="mainblock">
	<div id="entrepartic"></div>
	<div class="mainblock_bottom"></div>
	<div class="spacer1"></div>
</div>

mainblock_top et mainblock_bottom étant les deux extrémités haute et basse du bloc mainblock, n'est-il pas plus logique de donner aux blocs une structure qui suis ce principe ? Qu'est-ce qui t'a poussé à l'écrire comme tu l'as fais ?

En plus, il manquait le tag de fermeture de la div "contenu", je l'ai rajouté.

Oui, une erreur de ma part en faisant un copier-coller pour mettre les fichiers en lien sur le forum !! Je sais de source sûre (moi-même ) pour avoir fait plusieurs batteries de tests qu'à priori le problème ne venait pas de là !

Ensuite, il faut juste changer le CSS pour la class 'mainblock_bottom' en rajoutant un margin-bottom

Pourquoi ce margin ? Pourquoi ne pas en mettre un également sur 'mainblock_top', par exemple ?

Encore merci pour ton aide !

[ornitho13]

oui en effet, j'aurais du déplacer le spacer et le mainblock_bottom afin de suivre ta logique .
Il faut donc mettre ceci:

Code html :

1
2
3
4
5
6
7
 
<div class="mainblock_top"></div>
<div class="mainblock">
	<div id="entrepartic"></div>
</div>
<div class="mainblock_bottom"></div>
<div class="spacer1"></div>

c'est une erreur de ma part .

sinon concernant le margin-bottom, je l'ai mis afin d'obtenir un espace entre tes mainblock. J'aurais pu en effet mettre pour mainblock_bottom et mainblock_top mais cela induit 2 modifications de ta CSS.

Je n'ai mis donc que pour le mainblock_bottom pour ne mettre qu'une seule modification. Après tout dépend de l'utilisation de cette classe dans le reste de tes pages.