Coller le corp au footer

[mauno]

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

[Ernestine]

Salut,

Je ne comprends pas trop ton problème. Si je regarde ta page, je vois plutôt la structure suivante :

Un header en haut

Une zone de contenu au milieu

Un footer en bas

La zone de contenu est elle-même divisée en deux colonnes : la colonne principale et la sidebar à droite.

Cela n'a pas grand chose à voir avec la curieuse description que tu nous en fais. En particulier ton div #corps2 (qui bizarrement se situe sous la colonne flottante à droite).

Je ne comprends pas non plus ce que tu entends par "Je souhaite que le texte écrit au centre dans le "corp" arrive à empiéter sur le header sans empiéter sur le footer." Pourquoi le contenu devrait-il empiéter sur le header ?

Quoiqu'il en soit, tu devras certainement utiliser la technique des colonnes factices : http://www.pompage.net/pompe/colonnesfactices/

(pour que les deux descendent correctement jusqu'au footer)

Modifié 11 Août 2010 par Ernestine

[mauno]

Bonjour,

Alors le site a la structure suivante :

Header

corp (le début de la page, collé au header)

corp2 (la fin de la page, collé au footer)

footer

Voila un schéma qui j'espère expliquera mieux :

----------
| header |  <= Header (avec les menus) collé au corp
----------
 --------
|    T   |  <= corp
|    E   |  <= corp
     X      <= milieu de la page où il n'y a que la couleur du fond
     T      <= milieu de la page où il n'y a que la couleur du fond
|    E   |  <= corp2
|    E   |  <= corp2
 --------
----------
| Footer |  <= footer collé au corp 2
----------



----------
| header |  <= Header (avec les menus) collé au corp
----------
 --------
|    T   |  <= corp
|    E   |  <= corp
     X      <= milieu de la page où il n'y a que la couleur du fond
     T      <= milieu de la page où il n'y a que la couleur du fond
     E      <= milieu de la page où il n'y a que la couleur du fond
     S      <= milieu de la page où il n'y a que la couleur du fond
            <= milieu de la page où il n'y a que la couleur du fond
     L      <= milieu de la page où il n'y a que la couleur du fond
     O      <= milieu de la page où il n'y a que la couleur du fond
|    N   |  <= corp2
|    G   |  <= corp2
 --------
----------
| Footer |  <= footer collé au corp 2
----------

Donc le corp2 dois resté collé au footer. De plus le texte dois pouvoir passer dessus comme pour le corp.

Si il y a un long texte le corp2 se déplace avec le footer (il reste collé) mais la fin du texte est écrite sur le corp2.

Voilà j'espère que les explications on été assez claire cette fois-ci, je reste dispo dans le cas contraire

PS : je vais tout de même aller jeter un coup d'oeil sur le site que tu as donné voir si je trouve mon bonheur

Modifié 11 Août 2010 par mauno