Bonjour à tous!
J'ai presque terminé mon site, mais j'ai encore un petit souci dont je n'arrive pas à me dépatouiller....j'ai un souci avec mon footer, qui se décale sur la gauche et ne reste pas centré sur la page suivant la taille de l'écran.
Pourtant mes autres éléments, (page, menu, header) restent centrés....je donne ma langue au chat je ne vois pas ou est le problème. Je vous donne mes codes html puis css:
Je vous remercie d'avance si quelqu'un peut trouver une solution, ça m'enlèverait une sérieuse épine du pied!
J'ai presque terminé mon site, mais j'ai encore un petit souci dont je n'arrive pas à me dépatouiller....j'ai un souci avec mon footer, qui se décale sur la gauche et ne reste pas centré sur la page suivant la taille de l'écran.
Pourtant mes autres éléments, (page, menu, header) restent centrés....je donne ma langue au chat je ne vois pas ou est le problème. Je vous donne mes codes html puis css:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<title>Zelt 3</title>
</head>
<body>
<div id="header">
<!-- Le header de la page WEB -->
<p>
<a href="page_accueil.html"><img src="images/header.jpg" alt="Page d'accueil" title="cliquez ici pour aller à la page d'accueil" /></a>
</p>
</div> <!-- header -->
<div id="menu">
<!-- Le menu du site WEB -->
<ul id="menu_horizontal">
<li><a href="accueil.html">Accueil</a></li>
<li><a href="missions.html">Missions</a></li>
<li><a href="travauxencours.html">Travaux en cours</a></li>
<li><a href="references.html">Références</a></li>
</ul>
</div> <!-- menu -->
<div class="page">
<div class="partenaires">
<h1>Partenaires</h1>
<p>La Zelt résulte d'un partenariat entre divers acteurs intervenants dans le domaine des déplacements :<br/> <br/> </p>
<p>Voici les différentes branches du Ministère de l'Ecologie, de l'Energie, du Développement durable et de l'Aménagement du Territoire dont nous dépendons :<br/> <br/></p>
<p><img src="partenaires/gouvernement.jpg" alt="gouvernement" title="logo gouvernemental" /><br/></p>
<ul id="partenaire">
<li><a href="http://www.developpement-durable.gouv.fr/">Le ministère</a> </li>
<li><a href="http://www.securiteroutiere.equipement.gouv.fr/">La sécurité routière</a></li>
<li><a href="http://www.transports.equipement.gouv.fr/">Les transports</a></li>
<li><a href=" http://www.enroute.sud-ouest.developpement-durable.gouv.fr/">La Direction interdépartementale des routes</a></li>
<li><a href=" http://www.cete-sud-ouest.equipement.gouv.fr/">Le Centre d'Etudes Techniques du Sud-Ouest</a></li>
</ul>
<br/> <br/></p>
<p> <img src="partenaires/certu.jpg" alt="Certu logo" title=""/>
<a href="http://www.certu.fr/">Le Centre d'études sur les réseaux, les transports, l'urbanisme et les constructions publiques</a>
<br/> <br/></p>
<p> <img src="partenaires/mtoulouse.jpg" alt="Mairie de Toulouse logo" title=""/>
<a href=" http://www.toulouse.fr/web/guest/accueil/">La mairie de Toulouse</a>
<br/> <br/> </p>
<p> <img src="partenaires/crmp.png" alt="Région Midi-Pyrénées logo" title=""/>
<a href="http://www.midipyrenees.fr/">La Région Midi Pyrénées</a>
<br/> <br/> </p>
<p>
<img src="partenaires/tisseo.jpg" alt="TISSEO logo" title=""/>
<a href="http://www.tisseo.fr/">Le Syndicat Mixte des transports collectifs de l'agglomération Toulousaine (TISSEO)</a>
<br/> <br/> </p>
<p> <img src="partenaires/inrets.jpg" alt="Inrets logo" title=""/>
<a href="http://www.inrets.fr/">L'Institut National de Recherche sur les Transports et la Sécurité (INRETS)</a>
<br/> <br/> </p>
<p> <img src="partenaires/aitf.jpg" alt="Inrets logo" title=""/>
<a href="http://www.aitf.asso.fr/">L'association des Ingénieurs Territoriaux de France (AITF)</a>
<br/> <br/> </p>
<p> <img src="partenaires/setra.png" alt="setra logo" title=""/>
<a href="http://www.setra.equipement.gouv.fr/">Le service d'étude sur les transports, les routes et leurs aménagements (SETRA)</a>
<br/> <br/> </p>
</div>
</div>
<div id="footer">
<a id="contacts" href="contacts.html"> Contactez-nous</a>
<a id="partenaires" href="partenaires.html">Partenaires</a>
</div>
</body>
</html>* { margin:0; padding:0; }
body { background:#fff url(images/background_repeat.jpg); font:12px/1.5 Arial, Helvetica, sans-serif; color:#000; text-align:center; height:100%;}
img { border:0; vertical-align:top; }
/* Headings */
h1{color: #76ADB0; padding-top:20px;padding-bottom:40px;}
h2{}
h3{}
h4{}
/* Forms */
form { display:inline; }
fieldset { border:0; }
legend { display:none;}
/* Content */
/**menu horizontal**/
#menu{ background: url(images/menu.jpg) no-repeat;
display: block;
font-size:1.4em;
width: 1177px;
height:49px;
margin-left: auto;
margin-right: auto;
}
#menu, #menu ul {
list-style: none;
}
#menu a ,#menu a:hover{
border:none;
display: block;
text-decoration: none;
}
#menu li {
margin-left: 125px;
float: left;
list-style:none;
width:auto;
}
#menu a,#menu a:visited {
color:#fff;
display:block;
font-weight:bold;
padding:11px 12px;
}
#menu a:hover, #menu a:active {
color: #A7D2DF;
text-decoration:none;
clear: both;
}
/**code de la page d'accueil, mise en place de l'image de fond et texte**/
.accueil{
background:url(images/pageaccueil.jpg);
width: 1173px;
height:1040px;
margin-left: auto;
margin-right: auto;
padding-right:4px;
}
.texteaccueil{
width: 630px;
float:right;
padding-left: 50px;
margin-right: 120px;
margin-top: 30px;
text-align:justify;}
/**code d'une page type, mise en place de l'image de fond**/
.page{
background: url(images/page.jpg)no-repeat;
width: 1172px;
margin-left: auto;
margin-right: auto;
padding-right:4px;
display:block;
clear:both;
}
#pdf{
text-decoration:none;
font-size:1.2em;
color: #0D8BDF}
#pdf:hover ,#pdf:visited{
color: #95C32C;
}
/**Mise en place des differentes formes de texte sur les pages**/
.textemissions{
background:#fff;
width: 929px;
min-height:919px;
margin-right: 50px;
margin-left:123px;
text-align:justify;
}
.textemissions img{
float: left;
margin-right: 20px;
margin-bottom:20px;}
.partenaires{
background:#fff;
width: 859px;
min-height:919px;
padding-left: 100px;
margin-right: 50px;
margin-left:113px;
text-align:justify;
}
.partenaires a{
text-decoration:none;
padding-left:40px;
color: #4D785A ;
}
.partenaires ul{
padding-left:120px;
list-style-type:none;}
.partenaires img{
width:125px;
}
/**Footer, menu footer**/
#footer{
background:url(images/footer.jpg);
width: 960px;
margin-left: auto;
margin-right: auto;
height: 128px;
display:block;
}
#footer a#contacts{
padding-top:40px;
margin-left:75px;
width:50px;
text-decoration: none;
display: block;
color: #5696bd;
font-size:1.4em;
padding-left:140px;
}
#footer a#partenaires{
width:50px;
margin-left:75px;
text-decoration: none;
display: block;
color: #5696bd;
font-size:1.4em;
padding-left:140px;}Je vous remercie d'avance si quelqu'un peut trouver une solution, ça m'enlèverait une sérieuse épine du pied!