Discussion :

[orphen]

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 :

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

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

[Kerod]

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 :

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

   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 :

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

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

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

   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 :

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

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

Voilà ça devrait être tout pour le moment

[Candygirl]

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.

[orphen]

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.

[Kerod]

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.

[orphen]

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.

[Kerod]

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.

[orphen]

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