Background qui ne s'applique pas à sur l'ensemble de ma div

[NyTrO]

Bonjour à tous

J'essaye d'incorporer mon forum à mon design principal mais je suis obliger d'utiliser une structuration différentes des autres pages. J'ai un petit problème avec mon background et comme une image explique plus souvent un problème d'une meilleure façon qu'un long texte, je vous en propose une ^^

Comme vous le voyez, le background de ma partie central ne suit pas la partie du menu (gauche) alors que j'appplique ce background à une div regroupant le menu et la partie centrale.

Voyez le code

<div id="corps">                
        
                <div id="menu">
                        <?php include('pages/menu.php'); ?>
                </div>    
                                        
    <div id="corps_forum">
            <div id="element_forum">
                <?php require($template_path.'contents.tpl'); ?>
             </div>
        </div>
        
</div>
        
<div id="pied_de_page">
        <?php include ('pages/footer.php'); ?>
</div>

Ainsi que le Css qui s'y rattache :

#corps {
        background-image:url(menucorps.jpg);
        background-repeat:repeat-y;
        width:1024px;
        margin-top:-5px !important;
        font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
        filter: alpha(opacity=90);
        -moz-opacity: .9;
        -khtml-opacity: .9;
}
                
#menu {
        width:160px;
        float:left;
        padding:10px;
        text-align:center;
        color:#333333;
        vertical-align:top;
}
        
.element_menu {
margin-left:5px;
background-color:#fafafa;
width:150px;
border:1px solid black;
padding-bottom:5px;
margin-bottom:15px;
}

#corps_forum {
        width:841px;
        margin-left:183px;
        vertical-align:top;
}

#element_forum {
        margin-left:10px;
        margin-right:10px;
}
        
#pied_de_page {
        background-image:url(footer.jpg);
        background-repeat:no-repeat;
        width:1024px;
        font-size:10px;
        height:20px;
        padding-top:16px;
        margin-right:10px;
        color:#CCCCCC;
        text-align:right;
        clear:both;
        filter: alpha(opacity=90);
        -moz-opacity: .9;
        -khtml-opacity: .9;
}

Le problème survient si la partie centrale a moins de contenu à afficher que le menu. Sinon il n'y a aucuns problèmes.

De plus, ce problème n'existe pas sur le reste de mon site. La seule chose qui diffère est la constitution en tableau (qui affiche mon design convenablement)

<div id="menucorps">
                <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                                <td id="menu"><!--c'est le menu de gauche-->
                        <?php include('pages/menu.php'); ?>
                        
                        </td>

                                <td valign="top" id="corps"><!--le corps du texte-->

                  </td>
                             
                        </tr>
                
                        <tr>
                                <td id="footer" colspan="2"><?php include ('pages/footer.php'); ?></td>
                        </tr>
                </table>
        </div>

#menucorps {
        background-image:url(menucorps.jpg);
        width:1024px;
        font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
        }
        
        
#menu {
        width:171px;
        float:left;
        padding:10px;
        text-align:center;
        vertical-align:top;
        color:#333333;

        }
        
.element_menu {
margin-left:5px;
background-color:#fafafa;
width:150px;
border:1px solid black;
padding-bottom:5px;
margin-bottom:15px;}
        
#corps {
        width:833px;
        margin-left:0px;
        padding-right:10px;
        color:#333333;
        text-align:center;
        }
        
        
#footer {
        background-image:url(footer.jpg);
        width:1024px;
        padding-right:15px;
        font-size:10px;
        height:34px !important;
        height:22px;
        padding-top:12px;
        color:#CCCCCC;
        text-align:center;
        }

Les 2 codes CSS sont quasiments identiques si ce n'est le nom des classes.

S'il manque des infos ou si quelque chose n'est pas assez clair, n'hésitez pas ^^ En tous cas je remerci déjà celui qui trouvera qu'est ce qui bug.

 

[e-kiwi]

sans lire le totalité, je dirai que ecla vient de ton float:left. en dessous de ton menu, rajoute une balise (n importe, genre <hr/> pour tester) en style='clear:left'

 

[NyTrO]

Lol je comprends plus rien

J'ai appliqué ce que tu m'as dis, et ça à en partie résolu mon problème. Je supprime le nouveau code et maintenant ça fonctionne, sans rien toucher d'autre.
A moins que ça ne marche que chez moi :?

Pourriez vous me dire si par exemple sur cette page : http://www.internet-facile.info/forum/forum-tg19,espace-occaz.html, le bug est présent ou si le background s'affiche jusqu'au footer ?

Merci encore

 

[nickargall]

lorsque tu déclares un "float:left" ou "float:right", tu sors du flux de la page et les autres éléments ne tiennent plus compte des dimensions des éléments déclarés ainsi.

Je fais mon malin, je l'ai appris ya pas longtemps

Sinon tu risques d'avoir des soucis de droits d'auteur avec ton background. A moins que tu n'aie une licence officielle avec la petite boite qui détient les droits de l'homme araignée ...

 

[NyTrO]

Sinon tu risques d'avoir des soucis de droits d'auteur avec ton background. A moins que tu n'aie une licence officielle avec la petite boite qui détient les droits de l'homme araignée ...

Je l'ai prise sur hebus, mais je ne compte pas l'utiliser de façon permanente j'essaye de changer selon les evènements vidéoludiques.

Mais si je n'ai vraiment pas le droit de l'utiliser de cette façon je la supprimerais :wink:

Sinon as-tu rencontré le bug sur la page mentionnée ?

 

[nickargall]

je pense pas avoir vu de bugs ...