Sujet Précédent Sujet Suivant

Mon pied de site web est mal placé

Résolu/Fermé
aeonus Messages postés 50 Date d'inscription lundi 23 septembre 2013 Statut Membre Dernière intervention 24 juillet 2014 - 1 oct. 2013 à 19:30
aeonus Messages postés 50 Date d'inscription lundi 23 septembre 2013 Statut Membre Dernière intervention 24 juillet 2014 - 3 oct. 2013 à 21:05
Bonjour ,

Le pied de mon site web est mal placé , mon but est aussi que ce pied descend ou remonte si j'ajoute du contenu ou j'en enlève .

Voici une photo pour mieux comprendre le soucis .

http://nsa34.casimages.com/img/2013/10/01/131001073127665628.jpg

Le code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset="utf-8" />
<title>DAVID POIREE</title>
<link rel="stylesheet" href="themes/default/style.css" type="text/css" />

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="javascript/pngfix.js"></script>
<style type="text/css">
@import url(themes/default/iefix.css);
body{behavior:url(themes/default/csshover.htc);}
</style>
<![endif]-->

</head>

<body>



<div id="pagecomplete">


<div id="surmenu">
</div>

<div id="menu1">

<ul id="menu1">

<li id="current"><a href="index.html"title="accueil">ACCUEIL</a></li>
<li><a href="page1.html"title="magasine">MAGASINE</a></li>
<li><a href="page2.html"title="livre">LIVRE D'OR</a></li>
<li><a href="page3.html"title="Info moi">Infos Sur Moi</a></li>



<li><a href="page4.html"title="liens">LIENS</a></li>

<li><a href="page5.html"title="mention">MENTIONS LEGALES</a></li>
</ul>
</div>

<div id="sousmenu"></div>
<div id="logo"></div>
<!-- Debut Colonne Gauche -->
<div id="gauche">
<div class="col">


<img src="themes/default/images/raie.jpg" width="200" height="130" alt="Raie" />
<h1>Magnétisme</h1>


<li><a href="page5.html" title="infos"><b>Informations</b></a></li><br>
<li><a href="page6.html" title="tarifs"><b>Les Tarifs</b></a></li><br>
<li><a href="page7.html" title="Horaires"><b>Les Horaires</b></a></li><br>
<li><a href="page8.html" title="question"><b>Question Sur Le Magnétisme</b></a></li><br>
<li><a href="page9.html" title="rdv"><b>Prendre Rendez-Vous</b></a></li><br>




<img src="themes/default/images/dauphin.jpg" width="200" height="130" alt="dauphin" />
<h1>Tarologie</h1>
<li><a href="page10.html" title="infos"><b>Informations</b></a></li><br>
<li><a href="page11.html" title="tarifs"><b>Les Tarifs</b></a></li><br>
<li><a href="page12.html" title="question"><b>Question Sur La Tarologie</b></a></li><br>
<li><a href="page13.html" title="tirage"><b>Demande De Tirage</b></a></li><br>
</div>
<div class="foot"></div>
</div>
<div id="centre">
<div class="col">
<!-- Titre -->
<h1>Les mentions légales</h1>



<!-- Sous Titre -->
Conformément à la loi Informatique et Libertés en date du 6 janvier 1978, vous disposez d'un droit d'accès, de rectification, de modification et de suppression concernant les données nominatives vous concernant (nom, prénom, adresse email...).
<br><br>
Vous pouvez exercer ce droit en utilisant le formulaire de contact du site , pour consulter cette loi dans son intégralité voici le lien <a href="https://www.legifrance.gouv.fr/loda/id/LEGITEXT000006068624/2011-04-24/" Target="_blank"title="Loi">sur cette loi .</a>
</br></br>

<br>
DESCRIPTION DE L'ENTREPRISE
</br>
<br>
Inscription au répertoire SIREN : 01/2011
</br>
<br>
Identifiant SIREN : 529 974 545
</br>
<br>
Identifiant SIRET du siège : 529 974 545 00012
</br>
<br>
Catégorie juridique : (Autre)personne physique
</br>
<br>
Activité Principale Exercée (APE) : 8690F - Activités de santé humaine non classées ailleurs
</br>
<br>
Adresse :
</br>
<br>
MONSIEUR DAVID POIREE
</br>
<br>
62142 ALINCTHUN


</br>
Identifiant SIRET du siège : 529 974 545 00012
</br>
<br>
Catégorie juridique : (Autre)personne physique
</br>
<br>
Activité Principale Exercée (APE) : 8690F - Activités de santé humaine non classées ailleurs
</br>
<br>
Adresse :
</br>
<br>
MONSIEUR DAVID POIREE
</br>
<br>
62142 ALINCTHUN


</br>
</div>
<div class="foot"></div>
</div>
<!-- Fin Colonne centre -->
</a>



<!-- <div style="width: 50px; height: 50px; background-color: #050d24; float: left;">050d24</div>
<div style="width: 50px; height: 50px; background-color: #085289; float: left;">085289</div>
<div style="width: 50px; height: 50px; background-color: #0a96ee; float: left;">0a96ee</div>
<div style="width: 50px; height: 50px; background-color: #b2d6ed; float: left;">b2d6ed</div>
<div style="width: 50px; height: 50px; background-color: #004000; float: left;">004000</div>
<div style="width: 50px; height: 50px; background-color: #008000; float: left;">008000</div>
<div style="width: 50px; height: 50px; background-color: #00bf00; float: left;">00bf00</div>
<div style="width: 50px; height: 50px; background-color: #00ff00; float: left;">00ff00</div> -->

</div>
<div class="foot"></div>
</div>
<section id="slideshow">
<div class="container">
<div class="c_slider"></div>
<div class="slider">
<figure>
<img src="themes/default/images/galerie_01_th.jpg" alt="" width="309" height="260" />

</figure><!--
--><figure>
<img src="themes/default/images/galerie_03_th.jpg" width="309" height="260" />

</figure><!--
--><figure>
<img src="themes/default/images/galerie_04_th.jpg" alt="" width="309" height="260" />

</figure><!--
--><figure>
<img src="themes/default/images/galerie_05_th.jpg" alt="" width="309" height="260" />

</figure>
</div>
</div>
<span id="timeline"></span>
</section>
<div id="clearfooter"></div>
</div>
<!-- Fin du Conteneur de la Page -->
<!-- Fin du Conteneur de la Page -->

<!-- Début Footer -->
<
<div id="footer">
<div id="footer_content">
<!-- Extrait de la Faq de Kitgrafik : http://support.kitgrafik.com/ -->
<!-- Puis-je retirer le copyright en bas des kits ? -->
<!-- Vous n'avez pas le droit de retirer le nom du graphiste de votre kit comme indiqué dans les conditions générales -->
<!-- d'utilisation que vous avez acceptée en achetant le kit. -->
<!-- Par contre, vous pouvez, si vous le desirez retirer la mention "pour KitGrafik". -->

<!-- Attention le contenu doit impérativement tenir sur une seule ligne ! -->
Copyright © 2011 <a href="#" title="David ">David Magnétiseur</a> - Tous droits réservés - Article L.112-2 du Code la Propriété Intellectuelle - Design <a href="http://www.e-boz.fr" title="Boz">Boz</a> pour <a href="https://www.kitgrafik.com/" title="Relookez votre site avec Kitgrafik.com">Kitgrafik.com</a>
</p>

</div>
</div>
<!-- Fin Footer -->
</div>
</body>
</html>


Le code css :

@charset "iso-8859-1";
@-moz-keyframes ;
@-webkit-keyframes;
/* */
/* Mise forme générale */
/* */


html {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
line-height: 13pt;
text-align: center;
color: #ffffff;
background: url("images/background.jpg") repeat-x left top;
background-color: #085289;
padding: 0;
margin: 0;

}
html, body {
text-align: center;
height: 100%;
padding: 0;
margin: 0;
}
/* Conteneur de la Page */
#surmenu {

width:100%;
height:20px;
list-style: none;
padding:0px;
margin:0px;
background-color: #EFD807;

}
ul#menu1{


width:100%;
height:40px;
list-style: none;
padding:0px;
margin:0px;
background-color: #000000;
text-align: center;
}
ul#menu1 li{
display:inline;
text-align: center;

}
ul#menu1 li a{


text-align:center;
width:100%;
height: 50px;
line-height:50px;
font-family: mael;
font-size: 22px;
font-weight: 700;
color: #00CCCB;
text-decoration: none;
outline: none;
padding:20px 20px 0 20px;
}
ul#menu1 li a:hover , ul#menu1 li#current a{
color: #EFD807;

}
#logo {
width: 990px;
height: 360px;
background: url("images/logo.jpg") no-repeat left top;
/* top/bottom right/left */
margin: 0 auto;
}
/* Hack pour IE */
* html #container {
height: 100%;
}
/* Colonne Gauche */

#gauche {

list-style: none;
position:absolute;
top:100px;
right:1560px;
width: 220px;
font-size: 10pt;
text-align: left;
float: left;
display: inline;
/* top right bottom left */
margin: 0 18px 0 0;
background: url("images/gauche_bg.jpg") repeat-y left top;
}
#gauche .col {

list-style: none;
width: 200px;
min-height: 180px;
height: auto !important;
height: 180px;
float: left;
display: inline;
background: url("images/gauche.jpg") no-repeat left top;
/* top right bottom left */
padding: 15px 10px 0 10px;
}
/* Hack pour IE */
* html #gauche .col {
width: 220px;
}
#gauche .foot {

list-style: none;
width: 220px;
height: 19px;
float: left;
background: url("images/gauche_foot.jpg") no-repeat left top;
}
#gauche h1 {
height: 20px;
font-family: Mael, Helvetica, sans-serif;
font-size: 11pt;
font-weight: bold;
text-align: center;
color:#EFD807;
background-color: transparent;
/* top/bottom left/right */
margin: 5px 0;
background: url("images/ico_h1_g.gif") no-repeat left bottom;
clear: both;
}
#centre {

list-style: none;
position:absolute;
top:450px;
right:435px;
width: 1000px;
font-size: 10pt;
text-align: left;
float: left;
display: inline;
/* top right bottom left */
margin: 0 18px 0 0;
background: url("images/droite_bg.jpg") repeat-y left top;
}
#centre .col {
width: 1000px;
min-height: 180px;
height: auto !important;
height: 180px;
float: left;
background: url("images/droite.jpg") no-repeat left top;
/* top right bottom left */
padding: 1px 10px 0 10px;
}
/* Hack pour IE */
* html #droite .col {
width: 1000px;
}
#centre .foot {
width: 1000px;
height: 19px;
float: left;
background: url("images/droite_foot.jpg") no-repeat left top;
}

#slideshow {
position: relative;
top:-310px;
right:-1520px;
width: 309px;
height: 260px;
float: left;
margin: 0 auto 2em;
border: 1px solid #ddd;
background: #FFF;
/* CSS3 effects */
background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
border-radius: 2px 2px 2px 2px;
box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}

/* avanced box-shadow
* tutorial @
* https://www.creativejuiz.fr/blog/tutoriels/ombre-avancees-avec-css3-et-box-shadow
*/
#slideshow:before,
#slideshow:after {
position: absolute;
bottom:16px;
z-index: -10;
width: 50%;
height: 20px;
content: " ";
background: rgba(0,0,0,0.1);
border-radius: 50%;
box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
}
#slideshow:before {
left:0;
transform: rotate(-4deg);
}
#slideshow:after {
right:0;
transform: rotate(4deg);
}





/* gestion des dimensions et débordement du conteneur */
#slideshow .container {
position:relative;
width: 309px;
height: 260px;
overflow: hidden;
}
/* on prévoit un petit espace gris pour la timeline */
#slideshow .container:after {
position:absolute;
bottom: 0; left:0;
content: " ";
width: 100%;
height: 1px;
background: #999;
}
/*
le conteneur des slides
en largeur il fait 100% x le nombre de slides
*/
#slideshow .slider {
position: absolute;
left:0; top:0;
width: 400%;
height: 310px;
}
/* annulation des marges sur figure */
#slideshow figure {
position:relative;
display:inline-block;
padding:0; margin:0;
}

#slideshow figcaption {
position:absolute;
left:0; right:0; bottom: 5px;
padding: 20px;
margin:0;
border-top: 1px solid rgb(225,225,225);
text-align:center;
letter-spacing: 0.05em;
word-spacing: 0.05em;
font-family: Georgia, Times, serif;
background: #fff;
background: rgba(255,255,255,0.7);
color: #555;
text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}
@keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
#slideshow .slider {
/* ... avec la propriété animation */
animation: slider 32s infinite;
}
/* Footer */
/* Footer */
#footer {
width: 100%;
height: 163px;
font-size: 7pt;
background-color: black;
color: #DDD;
text-align: center;
background: url("images/footer_bg.jpg") repeat-x left top;
/* top right bottom left */
margin: -163px auto 0 auto;
}
#footer div {
width: 990px;
height: 163px;
/* top/bottom right/left */
margin: 0 auto;
background: url("images/footer.jpg") no-repeat left top;
}
#footer_content {
width: 990px;
height: 20px;
position: relative;
top: 143px;
left: 0;
margin: 5px auto;
text-align: center;
}
/* Magic position fixed footer */
#clearfooter {
height: 163px;
clear: both;
}
/* Bloc Flottant Aligné à Droite */
.bloc_droite {
width: 250px;
border-left: 1px dotted #b2d6ed;
border-bottom: 1px dotted #b2d6ed;
background: url("images/bloc_droite_bg.jpg") no-repeat left bottom;
float: right;
margin-left: 10px;
padding-left: 10px;
}
/* Bloc présentation site */
.site {
min-height: 110px;
height: auto !important;
height: 110px;
border-bottom: 1px dotted white;
margin-bottom: 10px;
clear: both;
}

#centre h1 {
height: 20px;
font-family: Mael, Helvetica, sans-serif;
font-size: 16pt;
font-weight: bold;
text-align: center;
color:#EFD807;
background-color: transparent;
/* top/bottom left/right */
margin: 5px 0;

clear: both;
}
h2 {
font-size: 11pt;
text-align: left;
color: #00ff00;
background-color: transparent;
/* top/bottom left/right */
margin: 5px 0;
}
/* Sous Titres */
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
text-align: left;
color: white;
background-color: transparent;
/* top/bottom left/right */
margin: 5px 0;
}
/* */
/* Liens */
/* */

a:link, a:visited {
color: #ffffff;
text-decoration: none;
background-color: transparent;
outline: none;
}
a:active, a:hover {
color: white;
background-color: transparent;
text-decoration: none;
outline: none;
}
.bord {
border: 2px solid white;
}
/* Alignement flottant à gauche */
.left {
/* top right bottom left */
margin: 0 10px 0 0;
float: left;
}
/* Alignement flottant à droite */
.right {
/* top right bottom left */
margin: 0 0 5px 10px;
float: right;
}
/* Alignement centré */
.center {
text-align: center;
}
.end{
clear: both;
}
small {
font-size: 7pt;
}
/* Listes */
ul {
padding: 0;
/* top right bottom left */
margin: 5px 0 15px 0;
}
li {
color=:"#ffffff";
text-decoration:none;
list-style-position: inside;
list-style-type: circle;
}
p {
/* top/bottom left/right */
margin: 5px auto;
}

/* */
/* Formulaires */
/* */

form {
/* top right bottom left */
margin: 0;
}
form p {
/* top/bottom left/right */
margin: 5px 0;
}
fieldset {
text-align: center;
width: 60%;
border: 1px solid white;
float: left;
margin: 5px 0;
}
legend {
font-weight: bold;
color: white;
background-color: #085289;
border: 1px solid white;
/* top/bottom left/right */
padding: 1px 5px;
}

/* */
/* Table des Services */
/* */

table {
width: 350px;
color: white;
background-color: #085289;
border-collapse: collapse;
}
th {
width: 350px;
text-align: left;
text-indent: 5px;
font-size: 10pt;
color: inherit;
background-color: #050d24;
}
td {
width: 295px;
font-family: Arial;
font-size: 8pt;
text-align: left;
text-indent: 10px;
padding: 3px;
color: inherit;
background-color: #085289;
}
.prix {
width: 55px;
text-align: right;
padding-right: 3px;
}

/* */
/* Galerie Photo Dhtml */
/* */

#galerie {
text-align: center;
}
#galerie img {
border: 3px solid white;
margin: 10px;
vertical-align: middle;
}
#galerie a {
background-color: transparent;
}
#thumbBox {
position: absolute;
left: 0;
top: 0;
width: auto;
/* top right bottom left */
padding: 5px 10px 0 10px;
text-align: center;
color: black;
background-color: white;
border: 1px solid black;
visibility: hidden;
z-index: 10;
cursor: pointer;
}
#thumbBox #thumbImage {
font-weight: bold;
color: black;
background-color: transparent;
margin-bottom: 5px;
}
#thumbBox #thumbImage img {
border: 1px solid black;
}
#thumbLoading {
position: absolute;
visibility: hidden;
border: 1px solid black;
color: black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}


Merci d'avance .
A voir également:

8 réponses

Réponse 1 / 8
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
2 oct. 2013 à 13:46
je comprends pas très bien ton code html, il y a un </a> qui se balade seul , je ne trouve pas le le doctype html5
0
Réponse 2 / 8
Doctor C Messages postés 627 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 19 février 2016 398
2 oct. 2013 à 17:00
J'avoue que je ne fait pas trop de design Web mais je trouve étrange la ligne suivante dans la description de ton footer:

margin: -163px auto 0 auto;

Si tu met la marge du haut à 0 (au lieu de -163) est-ce que ça améliore la situation?
0
Réponse 3 / 8
aeonus Messages postés 50 Date d'inscription lundi 23 septembre 2013 Statut Membre Dernière intervention 24 juillet 2014
2 oct. 2013 à 18:45
Pour idéal23 j'ai vérifier ces 2 erreurs dans le html et voilà le fichier html à l'air bien là , mais celà ne règle pas le soucis .
Merci tout de même .
0
Réponse 4 / 8
aeonus Messages postés 50 Date d'inscription lundi 23 septembre 2013 Statut Membre Dernière intervention 24 juillet 2014
2 oct. 2013 à 18:48
salut doctor c

j'ai essayer mais cela ne règle pas le soucis , merci tout de même .
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
3 oct. 2013 à 10:05
tu as essayé clear: both; pour le footer?
0
Réponse 6 / 8
aeonus Messages postés 50 Date d'inscription lundi 23 septembre 2013 Statut Membre Dernière intervention 24 juillet 2014
3 oct. 2013 à 11:15
salut ideal , oui j'ai essayer.
J'essaie ausside mon côté de cherché sur le google une solution depuis hier , mais tout ce que j'ai essayer n'a pas réussi :(
0
Réponse 7 / 8
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
3 oct. 2013 à 11:40
Salut,

Il y a en effet beaucoup d'erreurs dans ton code html qui peuvent donc chambouler ta mise en page. Par exemple sur le code de ton premier post il y a 3 doctype au début de ton fichier html, ce n'est pas correct.
Si tu souhaites profiter de html5, remplace le début de ton fichier html par ceci : 

<!DOCTYPE html>
<html>
<!-- ...suite de ton code html... -->

Pour corriger les erreurs de ta page, tu peux utiliser le validateur w3c à cette adresse : http://validator.w3.org/

Pour finir je remarque que tu utilises beaucoup la position absolute dans ton css, ce qui n'est pas utile pour un certains nombre d'élément de ta page.
Par exemple pour ton div contenant les mentions légales (<div id="centre">), essaye d'enlever la position absolute et utilise les marges pour le centrer : 

#centre {
    position: relative;
    width: 1000px;
    margin: 0 auto;
    // enlève également les propriétés float: left; et display: inline;
}
En faisant ça ton footer apparait bien en dessous du cadre des mentions légales.

Bonne journée
0
Réponse 8 / 8
aeonus Messages postés 50 Date d'inscription lundi 23 septembre 2013 Statut Membre Dernière intervention 24 juillet 2014
3 oct. 2013 à 21:05
Merci pitet
0

Discussions similaires

Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
JulieVdr -

7 réponses
C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses
Que veut dire " in da place " ?
westcoastDJ -
fyu -

9 réponses