Probleme avec un simple margin-top

Bonjour,

Je me retrouve confronter a un probleme etrange.

L'ensemble des pages de mon site vont etre basé sur le meme systeme.

Un div central qui sert a afficher un background et qui contient les div des differents contenue exemple (div homepage ou div inscription)

Mon probleme est que ma div inscription qui se trouve a l'interrieur de ma div centrale ne reagit pas comme je le voudrais a un simple margin top.

Voyez plutot l'exemple
http://fansyl.fr/inscription/inscription_site.php

Pour voir mon code html je vous invite a faire un afficher la source car ma page possede plusieurs systeme d'include.

Voici mon code css corespondant au div enfant et parent

Code:

---

1 2 3 4 5 6 7 8 9 10

#inscription{ width:754px; margin:10px auto; padding:0; clear:both}   #inscription #pourquoi_membre{ border:1px solid red; margin-top:100px;}   #inscription #inscription{ margin-top:10px}   #inscription #code_secu{}   #contenu{ width:798px; background-color:#FF0000; margin:0 auto;}

---

j'espere que mon message ne serra pas trop prise de tete et que vous pourrez m'aider a trouver la solution afin que je puisse avancer sur mon site.

merci par avance

Je sais pas quel est ton problème car tu l'exposes pas directement, mais je vais dire deux choses :

1. Ton corps est bien décalé vers le bas et pour arranger ça j'ai mis le css suivant :
   Code:

   ---

   1 2 3 4 5 6 7 8 9 10 11

   #inscription { clear:both; padding:0pt; width:754px; }#inscription #pourquoi_membre { border:1px solid red; }#inscription { clear:both; padding:0pt; width:754px; }

   ---

2. Mettre deux fois le même id n'est pas correct donc il faut faire un choix et garder un seul #inscription
3. Privilégie les padding quand tu dois jouer avec les marges. Souvent les margin posent des problèmes pour le design
4. Pour ta navigation ce n'est pas correct :
   Code:

   ---

   1 2 3 4 5

   #header p { margin:30px 0pt 0pt; padding:0pt; top:110px; }

   ---

5. Même chose pour l'image de droite. je te propose le code html de la bannière
   Code:

   ---

   1 2 3 4 5

   <div id="header"> <img width="204" height="147" id="swf_accueil" alt="Fichier Flash" src="../images/general/swf.jpg"/><a href="index.php"><img width="192" height="40" class="logo" alt="Logo de Fansyl" src="../images/general/logo.jpg"/></a><img width="382" height="40" class="logo" alt="Phrase d'accroche" src="../images/general/accroche.jpg"/> <p><span class="orange">|</span> <a class="liens_header" href="../inscription/inscription_site.php">Devenir membre du site</a> <span class="orange">|</span> S'inscrire à la Newsletter <span class="orange">|</span> Mot de passe oublier </p> <!-- //////// Fin Bloc Header //////// --> </div>

   ---

   et le css
   Code:

   ---

   1 2 3

   #swf_accueil {commun.css (line 17) float:right; }

   ---

Voilà ça devrait être tout pour le moment :aie:

Citation:

---

Envoyé par orphen

Mon probleme est que ma div inscription qui se trouve a l'interrieur de ma div centrale ne reagit pas comme je le voudrais a un simple margin top.

---

Pourrais-tu décrire un peu mieux ton problème ? Tu t'attends à quoi et il se passe quoi?

L'imagine que c'est la fusion des marges qui te pose problème? Il y a plusieurs manière de contourner le problème. Soit jouer avec un padding ou border (genre remplacer ton margin-top par un padding-top sur #contenu), soit attribuer à #conenu une propriété qui crèe un nouveau contexte de formatage (par exemple overflow:hidden) ce qui empêchera la fusion.

oui c'etai bien cette "fusion" qui me bloquait.

J'ai utiliser le padding pour resoudre le probleme

Merci pour vos conseils mais il reste certaines logiques web que j'ai du mal a comprendre.

il y a toujours le problème avec de grandes résolution pour header. Et le code que je t'ai donné résout le problème.:roll:

je me suis un peut perdu dans les differents code que tu ma donner en fait.

Mais je vais les regarder de plus pres ce soir et regarder ce que tu a ajouté ou enlevé par rapport au mien.

Je n'es rien ajouté/enlever du côté HTML. J'ai juste déplacé un élément (img).
Côté CSS c'est juste un float que je lui ai donné pour que l'image, quoiqu'il arrive soit toujours à droite et ce même s'il y a redimensionnement.

merci beaucoup j'avais zapper la sortie du flux d'un position absolute