28220 sujets

CSS et mise en forme, CSS3

[résolu] Mise en forme du footer (probleme)

Bonjour à tous,

Je vous présente mon probleme : mon designer ne sait pas coder en xhtml et a découpé mon design ; mais il l'a mis en forme avec des tableaux.
Voulant faire un design en xhtml et css, j'ai commencé le codage.
Tout allait bien jusqu'au footer ou je suis perdu :
La montre en bas a droite devrait se placer plus haut mais impossible !

Screenshot du design : http://img273.imageshack.us/img273/231/sanstitre218ek.jpg


Source de la page : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="bond3_xhtml.css" rel="stylesheet" type="text/css" />


</head>

<body id="haut"><!-- ANCRE //-->


<!-- ___________***************************DEBUT GLOBAL *************************** -->
<div id="global">

<!-- ______________________________- HEADER + MENU HORIZONTAL ____________-->
<div id="header">
<object  type="application/x-shockwave-flash"  data="images/header.swf" width="800" height="135"><param name="movie" value="images/header.swf" /><param name="quality" value="high" /></object>
</div>
<div id="menu_h"></div>
<div id="menu_h2"></div>

<!-- ___________****************** DEBUT GLOBAL CENTRE *****************______//-->
<div id="global_centre">

<!-- ____________________________________MENU GAUCHE __________________//-->

<div id="menu_g">
<div class="r1"></div>
<div class="fond_menug">Bla bla bla bla <br />fffff <br />ggggg</div>
<div class="r2"></div>
<div class="fond_menug">Bla bla bla bla <br />fffff <br />ggggg</div>
<div class="r3"></div>
<div class="fond_menug">Bla bla bla bla <br />fffff <br /> rebla et encore bla bla<br />ggggg</div>
<div class="r4"></div>
<div class="fond_menug">Bla bla bla bla <br />fffff <br />ggggg</div>


</div>

<!-- ____________________________________-CENTRE ______________________________//-->

<div id="centre">
<div id="centrer"></div>
<div id="centrer2">
ggggggggggggggggggggggggggg<br />ggggggggggggggggggggggggggg<br />ggggggggggggggggggggggggggg<br />ggggggggggggggggggggggggggg<br />ggggggggggggggggggggggggggg<br />ggggggggggggggggggggggggggg<br />ggggggggggggggggggggggggggg<br />
ggggggggggggggggggggggggggg<br />ggggggggggggggggggggggggggg<br />ggggggggggggggggggggggggggg<br />
ggggggggggggggggggggggggggg<br />ggggggggggggggggggggggggggg<br />ggggggggggggggggggggggggggg<br />ggggggggggggggggggggggggggg<br />
ggggggggggggggggggggggggggggggggggggggg
</div>
<div id="centre_bas"></div>
</div>

<!-- __________________******************** FIN GLOBAL CENTRE *********************** //-->

</div>

<!-- ________________________SILHOUETTE GAUCHE ________________________//-->
<div id="deco"></div>

<!-- __________________BAS MENU GAUCHE ________________________//-->

<div id="bas_menug"></div>


<!-- ________________________FOOTER ________________________//-->

<div id="footer">

<a href="#" ><img src="images/signature.jpg" width="214" height="27" alt="" class="signature" /></a></div>
<div id="footer3"></div>
<div id="footer2"><a href="#haut"><img src="images/fleche.jpg" width="65" height="41"  alt="" /></a>
</div>

<!-- *********************___________*****************FIN GLOBAL********************************* //-->

</div>


</body>
</html>



Style css : 

body
 {
	font-family : Verdana, Arial, Helvetica, sans-serif;
	margin : 0;
	padding : 0;
	background-image: url(images/bg.jpg);
	background-repeat: repeat;
	background-attachment: fixed;
        font-size: 10px;
        width: 801px;
        margin: auto;
} 


#header {
         width: 100%; height: 135px;
        }


#global 
       {
width: 100%;  background-image: url(images/fond.jpg); background-repeat: repeat-y;
}

#global_centre {width: 100%;  background-image: url(images/fond.jpg); background-repeat: repeat-y;}



#menu_h { width: 100%; height: 26px; background-image: url(images/fondmenuhorizontal.jpg); background-repeat: no-repeat; margin: 0px; } /* menu horizontal */
#menu_h2 {width: 100%; height: 15px; background-image: url(images/sousheader.jpg); background-repeat: no-repeat; margin: 0px; } /* fond en dessous du menu horizontal */



#menu_g {width: 214px; float: left; margin:0px; background-image: url(images/fond.jpg); background-repeat: repeat-y; } /* menu gauche */

/* r signifie rubrique */

.r1 {width: 214px; height: 38px; background-image: url(images/r1.jpg); background-repeat: no-repeat; }
.fond_menug {width: 214px; margin: 2px; margin-left: 20px;}
.r2 { width: 214px; height: 38px; background-image: url(images/r2.jpg); background-repeat: no-repeat; }
.r3 {width: 214px; height: 38px; background-image: url(images/r3.jpg); background-repeat: no-repeat; }
.r4 {width: 214px; height: 38px; background-image: url(images/r4.jpg); background-repeat: no-repeat; }

#bas_menug {float: left; width: 214px; height: 14px; background-image: url(images/basmenu.jpg); background-repeat: no-repeat; } /* bas du menu gauche */


#centrer { margin: 0px;  width: 521px; height: 27px;  background-image: url(images/rcentrale.jpg); background-repeat: no-repeat; } /* titre rubrique centrale */
#centre { margin: 0px; margin-left: 215px; width: 521px;  background-image: url(images/fondrcentrale.jpg); background-repeat: repeat-y;  } /* partie centrale */
#centre_bas { margin: 0px; margin-top: 20px;  width: 521px; height: 23px;  background-image: url(images/basrcentrale.jpg); background-repeat: repeat-y;  } /* bas de la partie centrale */
#centrer2 { padding: 5px; width: 521px;  background-image: url(images/fondrcentrale.jpg); background-repeat: repeat-y;  } /* partie ou on ecrit */


#deco {margin-left: 736px; width: 65px; height: 141px; background-image: url(images/deco.jpg); background-repeat: no-repeat; } /* silhouette gauche */
#footer { float: left; width: 735px; height: 41px; background-image: url(images/bas2.jpg); background-repeat: repeat-x; } /* footer */
#footer img {border: 0px; } /* image du footer */

#footer2 { margin-left: 736px; width: 65px; height: 41px; } /* partie droite du footer */
#footer2 img {border: 0px; } /* image du footer = montre */
#footer3 {margin-left: 214px; width: 521px; height: 14px; background-image: url(images/bas1.jpg); background-repeat: no-repeat; } /* ombre au dessus du footer */


Merci à tous pour votre aide Smiley smile
Modifié par Biglittle (24 Jul 2005 - 22:25)
Plop,

Un petit exemple en ligne nous permettrait de faire quelques tests, mais je pense qu'un padding bottom bien ajusté dans ton #footer2 devrait résoudre le souci.
Oui en fait c'est assez le foutoir dans tout ça Smiley langue

Pour éviter de toucher à tout, positionne ton footer2 en relative et rajoute un margin-top négatif du genre : 

#footer2 {
ton code css
position: relative ;
margin-top: -15px ;
}


Ca fait un peu rustine mais sinon va falloir changer du html.
Pas de souci, par contre histoire de faire les chose proprement jusqu'au bout, tu pourrais en plus éditer ton premier msg et rajouter le tag [résolu] comme l'explique ce point de la faq ^^
Sujet clos
Aller à