Probleme CSS facile

Bonjour,
Je suis un bidouilleur du net depuis longtemps mais le css n'a jamais été ma tasse de thé.

J'ai créer un plugin Wordpress qui est fonctionnel (oui j'adore la fonctionnalité) malheureusement un peu d'esthétique lui ferai un peu de bien.

Le problème :
J'ai le footer wordpress qui est en "bottom : 0;" normal et cela est valable pour ceux qui ont wordpress.

Malheureusement il s'affiche en plein milieu de mon plugin
Je déjà rencontrer ce type de problème il faut que je mette un hauteur à mes DIv pour que cela descende le bottom de la page mais malheuresement tout mes efforts et test avec la touche F12 n'ont aboutit à rien.

Quelqu'un qui maitrise le css va me dire mais c'est facile c'est ça , et il va me faire rager de soulagement. J'ai hâte de le publier mon plugin

Screen :
http://img11.hostingpics.net/pics/340827fixcssplz.png

Pour me contacter et faire un teamviewer :
Teamspeak 3: host: server.team-nostress.com pass : masterofmaster
Email / Skype : ndjbouman@gmail.com

Cordialement

Architecture balise :

<div class="wrap"> ==> inchangeable css wordpress
   <div class="icon32"> </div>
       <h2>TITRE </h2>
            ------------- DEPART PLUGIN --------------------
            <div id="menu-poules-admin">
                <ul id="onglets-poules-admin">
                    <li class="active">
                    <li></li> ....
                 <div class="post-container">
                      <form name="Poules"....>
                           <div id="form-top> 2 INPUT et une table </div>
                           <div id="conteneur">
                                <div id=div1>table</div>
                                <div id=div2> <div class="cadre">plusieur div</div> </div>
                            </div>
                        <div class="clear"></div>
                        <div class="clear"></div>
                        <a>link creative common</a>
                       </form>
                  </div>
                   <p class="submit">INPUT</p>
                 </ul>
            </div>
         --------------------- FIN PLUGIN -------------------------
</div> (CLOSE WRAP by wordpress)

Fichier CSS :

#onglets-poules-admin
{
font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
    list-style-type : none;
    padding-bottom : 24px; /* à modifier suivant la taille de la police ET de la hauteur de l'onglet dans #onglets li */
    border-bottom : 1px solid #9EA0A1;
    margin-left : 0;
}

#onglets-poules-admin li
{
  float : left;
  height : 21px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */
  background-color: #F4F9FD;
  margin : 2px 2px 0 2px !important;  /* Pour les navigateurs autre que IE */
  margin : 1px 2px 0 2px;  /* Pour IE  */
  border : 1px solid #9EA0A1;
}

#onglets-poules-admin li.active
{
  border-bottom: 1px solid #fff;
  background-color: #fff;
}

#onglets-poules-admin a
{
  display : block;
  color : #666;
  text-decoration : none;
  padding : 4px;
}

#onglets-poules-admin a:hover
{
  background : #fff;
}

#menu-poules-admin
{
  border-bottom : 1px solid #9EA0A1;
  padding-bottom : 25px;
}
#onglets-poules-admin
{
        position : absolute;
        border : 1px solid transparent;
        padding : 0;
        list-style-type : none;
        left : 1%;
        margin-top : 0;
        width : 1000px;
}

#form-top{
 padding-top : 10px;
}



 #conteneur {
       width: 100%;
       margin: 0 auto;
	   padding-top: 30px;
   }
   #div1{
	   float: left;
	   width: auto;
       height: auto;
	   padding: 10px;
	   margin: 0 auto;
   }
   #div2{
       float: left;
       width: 430px;
       height: auto;
	   margin: 0 auto;
   }
    #divtour{
       float: left;
       width: auto;
       height: auto;
   }
    #divtour2{
       float: right;
       width: auto;
       height: auto;
   }
   .clear{
       clear: both;
   }

Bonjour,

Vraiment pas pratique pour t’aider à déboguer tout ça... ton html est plein de coquilles et il ne reflète pas tout le code présent sur l'image...

Pour une piste, je suspecte que tout (ou grande partie) de tes éléments sont en float ou en absolute et du coup sont sortie du fameux "flux"... Le parent ne prend sa hauteur qu'en fonction de ses enfants qui sont dans le flux donc s'ils sont tous en absolute, le parent fait comme s'ils n'existaient pas et reste tout petit (Et le footer wordpress qui vient naturellement à la suite te donne l'impression de chevaucher le tout).
Pour régler ça soit tu donnes une hauteur fixe à ton conteneur, soit tu t'arranges pour que ton contenu soit dans le flux (donc sans absolute ni float).

Je te conseille d'utiliser un inspecteur de code (Par exemple FireBug le plugin de FF ou Developper Tools natif de Chrome) tu verras en surbrillance la hauteur de tes éléments et ca t'aidera a cibler le problème.

Merci pour ta réponse,

J'utilise déjà firebug avec le bouton F12, j'ai donner une hauteur fixe à mon conteneur (que je vois en couleur grâce à firebug) mais il ne descend pas le footer !! =(

Je suspecte qu'il me manque un div "clear" peut être et que le float ne se ferme pas.

Nouveau screen :
http://img11.hostingpics.net/pics/180612problemecss.png

Voilà.

Si tu veux faire un teamviewer pour regarder.

Bon alors,
Je vais essayer de mettre une des div fils (du plugin) dans le flux.
Mais si je met pas position absolute, je met position relative ? Dans ce cas elle deviendra parent non ?

La div qui englobe tout le plugin est :
<div id="menu-poules-admin">
avec ce css pour l'instant :
#menu-poules-admin
{
border-bottom : 1px solid #9EA0A1;
padding-bottom : 25px;
}

Je tiens au courant.

Bonjour,

D'accord avec _laurent : ça ressemble beaucoup à un problème de dépassement de flottants. Il y a plusieurs méthodes pour arranger ça

Ensuite, le problème ici, c'est qu'il nous faudrait une page en ligne (ce qui n'est évidemment pas possible) ou un exemple (problème isolé et placé sur une page de test) pour pouvoir répondre de façon certaine. Dans tous les cas, c'est probablement du côté des flottants qu'il faut regarder.

Inspire-toi par exemple de la page d'accueil du tableau de bord WordPress, qui utilise plusieurs colonnes et le même pied de page.

Bouman a écrit :
Si tu veux faire un teamviewer pour regarder.

Ça par contre, ce n'est pas vraiment dans les habitudes du forum…

Probleme résolu !

Mon menu en UL utilise des float left !
Et je le ferme après les Div dans le même ordre d'ouverture !

Du coup j'ai fermé mon UL après les LI et avec un clear both.

<div class="wrap"> ==> inchangeable css wordpress
   <div class="icon32"> </div>
       <h2>TITRE </h2>
            ------------- DEPART PLUGIN --------------------
            <div id="menu-poules-admin">
                <ul id="onglets-poules-admin">
                    <li class="active">
                    <li></li> ....
----------------------CORRECTION -----------------------------
                  </ul><br style="clear:both;"/>
----------------------CORRECTION -----------------------------
                 <div class="post-container">
                      <form name="Poules"....>
                           <div id="form-top> 2 INPUT et une table </div>
                           <div id="conteneur">
                                <div id=div1>table</div>
                                <div id=div2> <div class="cadre">plusieur div</div> </div>
                            </div>
                        <div class="clear"></div>
                        <div class="clear"></div>
                        <a>link creative common</a>
                       </form>
                  </div>
                   <p class="submit">INPUT</p>
            </div>
         --------------------- FIN PLUGIN -------------------------
</div> (CLOSE WRAP by wordpress)