Bonjour, j'ai tenté de chercher plusieurs solutions à mon problème, en vain.
Je me tourne maintenant ici pour demander un peu d'aide.
En fait, je créé un site et je m'occupe actuellement du design.
Le site est constitué d'un "header", d'un "corp" (partie qui se situe juste en dessous du header), d'un "corp2" et d'un "footer".
Je souhaite que le texte écrit au centre dans le "corp" arrive à empiéter sur le header sans empiéter sur le footer. Cependant j'ai des problèmes : En effet le footer ne bouge pas avec le corp2 je dois donc tout faire manuellement.
Voici le site -http://en.oblivion.free.fr/
J'ai demandé de l'aide sur plusieurs sites d'aide mais aucune solution n'a été trouvées. En effet avec le CSS que j'ai actuellement, il faut que je modifie les marges manuellement pour chaque page, donc autant dire que ça deviens le "bordel".
J'ai essayé diverses solutions mais là je sèche totalement...
De plus, j'ai un menu sur le header, Et quand la curseur passe sur un bouton, il change de couleur. Mon problème c'est les marges, je n'arrive pas à les mettre en face. J'ai essayé de modifier mais ça deviens n'importe quoi parce que ça se décale de plus en plus.
Et dernier problème, concernant un include du menu qui se trouve sur le header et sur le footer, j'ai des problèmes de caractères, il y a des ? pour tout les caractères spéciaux alors que la page est en charset=utf-8. Si je met en ISO, c'est toute la page qui prend les ? à la place des caractères spéciaux, je pense donc qu'il s'agit d'un problème de CSS mais je bloque totalement ...
Voici mon CSS
body { background: #fef5e4; font: normal 80% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: black; margin: 0; padding: 0 0 0 0; text-align: center; } #site { margin:0 auto; width: 1000px; } /* ------------------------------------ */ /* Header */ /* ------------------------------------ */ #header { position: relative; width: 1000px; height: 181px; background: url(images/header.jpg) left top no-repeat; margin: 0 auto; } #barre-infos { height: 23px; width: 267px; background: url(images/barre-infos.jpg) left top no-repeat; color: #bfbfbf; float: right; padding: 2px 12px 0 60px; text-align: left; font-size: 0.9em; } #barre-infos p { margin: 0; padding: 0; } #barre-infos a { color: #bfbfbf; } #menuh { position: absolute; top: 134px; left: 2px; text-align: left; } #menuh ul li { float: left; margin-right: 0px; list-style: none; width: 110px; text-align: center; margin-right: 11px; } #menuh li a { color: #FFF; padding: 0 0 0 0px; } #menuh li a:hover { font-weight: bold; } /*Menu horizontal*/ #menu {margin-left:1px; padding-top: 1px; height:0px; text-align: left;} #menu ul {padding : 1px; list-style : none;text-align : center; font-size: 7pt; margin-left:24px;} #menu a {display : block; height:30px; width:100px; color: #FFF;text-decoration : none;line-height: 30px; font-weight: bold; margin-right: 12.5px;} #menu li {float : left; margin-top: 130px; padding-right: 0px; margin-left: 11px; } #menu a:hover {background: url(images/menu_hover.png);width: 111px; margin-right:1px;} /* ------------------------------------ */ /* Content */ /* ------------------------------------ */ #megacontent { background: url(images/corp.jpg) top center no-repeat; min-height: 600px; text-align: left; margin: 0 auto; padding-top: 0px; } #content { position:relative; width:1000px; text-align: left; z-index:2; } #content2 { position:relative; background: url(images/corp2.png) bottom center no-repeat; width: 1000px; height: 1400px; margin: 0 auto; z-index: 1; } #left { float: left; width: 703px; } #left-p { padding: 0px 20px 0 41px; } h2 { margin: 1.6em 0 1.1em 0; font-weight: bold; font-size: 1.5em; color: #79a004; } #right { float: left; width: 297px; } #right-p { padding-left: 19px; } #right h3 { margin: 1.6em 0 1.1em 0; font-weight: bold; font-size: 1.3em; color: #79a004; } .rss { height: 70px; width: 258px; background: url(images/right-rss.jpg) left top no-repeat; margin: 10px 0 10px 0; } .rss p { font-weight: bold; color: #e55300; margin: 0; padding: 20px 60px 0 18px; } .rubrique-content { margin-right: 20px; margin-left: 20px; } /* ------------------------------------ */ .rubrique-top { height: 12px; background: url(images/rubrique-top.jpg) no-repeat; } .rubrique { background: url(images/rubrique-bg.jpg) repeat-y; } .rubrique-bottom { height: 12px; background: url(images/rubrique-bottom.jpg) no-repeat; } /* ------------------------------------ */ .rubrique-top1 { height: 12px; background: url(images/rubrique-top1.png) no-repeat; } .rubrique1 { background: url(images/rubrique-bg1.png) repeat-y; } .rubrique-bottom1 { height: 12px; background: url(images/rubrique-bottom1.png) no-repeat; } /* ------------------------------------ */ .rubrique2 { background: url(images/rubrique-bg2.png) repeat-y; } .rubrique-bottom2 { height: 12px; background: url(images/rubrique-bottom2.png) no-repeat; } /* ------------------------------------ */ .rubrique ul { margin: 0px; padding: 0; } .rubrique li { list-style: none; color: #836b61; margin-bottom: 5px; } .rubrique li a { color: #836b61; } /* ------------------------------------ */ /* Footer */ /* ------------------------------------ */ #footer { background: url(images/footer.png) left top no-repeat; height:168px; margin-top:0px ; padding-top: 0px; z-index:3; } #footer-inner { margin:0 auto; width: 1000px; padding: 15px 0 0 62px; color: #FFF; text-align: left; } #footer-left { float: left; width: 400px; padding-right: 25px; margin-left: 120px; padding-top: 3px; } #footer-left a { color: #FFF; } #w3c { padding-right : 20px; margin-top: 87px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; } #w3c ul { padding: 30px; } #w3c ul li { float: left; list-style: url(images/valide.jpg); margin: 14px 45px 0 0; } #w3c li a { color: #f0d5b3; font-weight: bold; } #footer-right { float: left; width: 265px; padding-right: 15px; padding-top: 0px; margin-left: 100px; } #footer-right ul { list-style: none; padding: 0px; } #footer-right li { width: 225px; height: 22px; background: url(images/footer-li-bg.png) no-repeat; margin-bottom: 3px; } #footer-right li a { padding: 3px 0 0 9px; color: #FFF; } #footer h3 { margin: 0 0 0.8em 0; font-weight: bold; font-size: 1.3em; color: #FFF; } /* ------------------------------------ */ a { color: #5b6811; text-decoration: none; } .clear { width: 807px; height: 0px; margin: 0 auto; font-size: 1px; clear: both; }
Voila j'espère que vous pourrez m'aider ici. Merci d'avance