Problème marge du pied de page

  • Auteur de la discussion Auteur de la discussion 7804j
  • Date de début Date de début
WRInaute discret
Bonjour,

J'ai un petit problème concernant le pied de page de mon site http://www.petitsjobs.ch.
Si vous regarder le pied de page actuel, vous constaterez qu'il n'a qu'une marge à gauche et pas à droite. J'ai pourtant bien mis la propriété margin: 0 20px 0 20px; (raison pour laquelle il y en a un à gauche).

J'ai tout essayé mais je ne me l'expliquer pas.

Vous pouvez trouver la source HTML facilement, mais le CSS étant compressé, je vous le donne. La div contenant le pied de page est .footer :
Code:
.barre_membres /* La barre du haut pour les membres et la connexion */
{
	min-width:500px; /* Largeur minimum qu'elle doit avoir pour être affichée complétement. Différent du reste de la page pour que le menu soit le plus proche possible du côté gauche */
}


.haut
{	
	min-width:1100px;
	background-color:#333333;
	border-radius: 30px 30px 0px 0px;
      -O-border-radius: 30px 30px 0px 0px;
      -moz-border-radius: 30px 30px 0px 0px;
      -webkit-border-radius: 30px 30px 0px 0px;
	  -khtml-border-radius: 30px 30px 0px 0px;
	  behavior: url(/app/PIE/PIE.htc); 
}

/*Corps */
.corps
{
	min-width:1100px; /* Largeur minimale de la page pour être sûr que tout s'affiche en entier */
	margin:20px 20px 0px 20px;
	background-color:white;
	min-height: 100%;
	position:relative;
	border-radius: 30px 30px 0px 0px;
      -O-border-radius: 30px 30px 0px 0px;
      -moz-border-radius: 30px 30px 0px 0px;
      -webkit-border-radius: 30px 30px 0px 0px;
	  -khtml-border-radius: 30px 30px 0px 0px;
	  behavior: url(/app/PIE/PIE.htc); 
}


/* Menu de Gauche */
.MenuGauche
{
	position:absolute;
	float:left;
	width:170px;
	height:100%;
	text-align:center;
	background-image: url(/images/background-menu.png); /*Dégradé allant de couleur du menu haut à couleur du pied de page */
	background-repeat: repeat-x;
	background-color:#CBCBCB;/* Couleur du dernier pixel du dégradé */
	z-index: 10;
}


.contenu
{
	margin-left:180px;
	position:relative;
	min-height: 100%;
	padding:20px;
}


.ombre img
{
	-moz-box-shadow: 1px 1px 12px #555; /* On met une ombre sur toutes les images, à condition qu'elles soient dans le div "ombre" et on arrondit les bords */
	-webkit-box-shadow: 1px 1px 12px #555; 
	      border-radius: 10px;
      -O-border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
	  -khtml-border-radius: 10px;
	  behavior: url(/app/PIE/PIE.htc); 
}

/*Affichage des "Etapes de création d'annonces" pour les membres connectés */
.etapesdiv
{
	background-image:url(/images/steps.png);
	background-repeat:no-repeat;
	height:40px;
	margin-bottom:5px;
	margin-left:5px;
}
.etapesdiv:hover
{
	background-image:url(/images/steps2.png);
}
.etapesspan
{
	position:relative; 
	top:10px; 
	color:black;
}

/* Pied de page */
.footer
{
	min-width:1100px; /* Largeur minimale de la page pour être sûr que tout s'affiche en entier */
	background-image: url(/images/footer.png);
	height:135px;
	width:100%;
	margin: 0 20px 0 20px;
	text-align: center;
}


a
{
    text-decoration:none;
}
a:visited
{
    color:blue;
}
a:hover
{
    color: #d27b3a;
}
a:active
{
	color: #d27b3a;
	text-shadow : 1px 1px 5px #d27b3a;
}


html, body
{
	height: 100%;
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	margin: 0px; 	/* On enlève les marges, sinon ça fait du blanc entre l'image de fond et le bord */
	background-image: url(/images/background-image.png); /*Dégradé de fond */
	background-repeat: repeat-x;
	background-color: #5599bb; /*Si la page est trop grande, on affiche une couleur de fond pour pas gâcher le dégradé (la couleur est la même que le dernier px du dégradé */
	background-attachment: fixed;
}



img
{
	border:0px;
}
		
/* Les textes d'aide */		
.aide {
margin-bottom:20px;
font:normal 11px verdana,tahoma,arial;
color: #347ab1;
      border:1px solid #d3d3d3;
      border-radius: 15px;
      -O-border-radius: 15px;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
	  -khtml-border-radius: 15px;
	  behavior: url(/app/PIE/PIE.htc); 
      padding-left:85px;
	  padding-top: 25px;
	  padding-bottom:25px;
      background: url(/images/aide.png) 15px 50% no-repeat;

}	
fieldset, textarea
{
      border-radius: 10px;
      -O-border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
	  -khtml-border-radius: 10px;
	  behavior: url(/app/PIE/PIE.htc); 
	  margin-rigth:20px;
	  background-color: white;
}	
textarea
{
	width:100%;
}
fieldset
{
	  padding:20px;
}
input
{
      border-radius: 5px;
      -O-border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
	  -khtml-border-radius: 5px;
	  behavior: url(/app/PIE/PIE.htc); 
	  background-color: white;
}
select
{
		border-radius: 5px 0px 0px 5px;
      -O-border-radius: 5px 0px 0px 5px;
      -moz-border-radius: 5px 0px 0px 5px;
      -webkit-border-radius: 5px 0px 0px 5px;
	  -khtml-border-radius: 5px 0px 0px 5px;
	  behavior: url(/app/PIE/PIE.htc); 
	  background-color: white;
}	
label {
	min-width:150px;
	display:block;
	float:left;
}
/* Menu horizontal moo.rd */
#kwicks {
position: relative;
background-image:url(/images/menu_horizontal/kwick.gif);
background-position:top right;
background-repeat:no-repeat;
background-attachment:scroll;
height:100px;
float:left;
padding-right:10px;
margin-left:45px;
}
#kwicks .kwick {
float: left;
display: block;
width: 130px;
height: 100px;
margin:0px;
}

#wdownload { background-image:url(/images/menu_horizontal/download4.gif); }
#wdocs {background-image:url(/images/menu_horizontal/docs_4.gif); }
#wforum {background-image:url(/images/menu_horizontal/forum4.gif); }
#wexamples {background-image:url(/images/menu_horizontal/examples_.gif); }
.menu {
	height:130px;
margin-top: -110px;
margin-left: 200px;
}
/* Fin menu horizontal */




/* Design TableGear (tableaux dynamiques) */
div.description
{
color: #fff;
padding: 5px;
}


h5#TGSubheader
{
letter-spacing: 0.145em;
font-family: "Lucida Sans Unicode";
}

h5#HTSubheader
{
letter-spacing: -0.01em;
font-family: "Lucida Sans Unicode";
}

h5#TogetherSubheader
{
letter-spacing: 0.1em;
}

p.block
{
width: 32em;
margin: 0 0 0.5em 0;
}



div.box
{
margin: 0 20px 0 190px;
padding: 20px;
background: #fff;
border: 1px solid #ccc;
}


table
{
font-size: 0.9em;
width: 100%;
}

tr.odd
{
background-color: #eaeaea;
}

table th.title
{
text-align: center;
}




td.editable
{
width: 200px;
height: 40px;
}

th.sortable
{
cursor: pointer;
}

td.description
{
font-size: 0.8em;
color: #999;
}

td select
{
width: 150px;
}

td.deleteColumn
{
width: 16px;
}

td.highlite
{
color: red;
}

div.textTop
{
font-size: 0.9em;
font-weight: bold;
color: #d81;
margin-top: 10px;
margin-left: 25px;
}

label.delete
{
cursor: pointer;
padding: 3px 0px 0px 0px;
display: block;
}

tr.loading {
  color: #dddddd;
  background-color: #f6f6f6;
}

td.loading
{
  background: url('../images/icons/loading.gif') no-repeat 4px center;
  padding-left: 30px;
  color: #aaaaaa;
  width: 170px;
}

.editable span
{
display: none;
}

.hotText span,.hotSubmit span
{
color: #0046bf;
border-bottom: 1px dotted #0046bf;
}


ul
{
margin: 1em 0;
padding: 0;
list-style-type: none;
}


.pagination {
  margin: 1em 0;
  color: #888888;
  width: 350px;
  margin: 0 auto;
}

.pagination a {
  color: #6666ff;
}

.pagination .prev 
{
  float: left;
}

.pagination .next
{
  float: right;
}

.pagination .pages
{
  text-align: center;
}

.primary_key,
td.edit,
th.edit,
td.delete input {
  display: none;
}

td.delete {
  cursor: pointer;
}


Merci d'avance,

7804j
 
WRInaute impliqué
Mort de rire...

- Un site à 2 colonne avec entête et pied est plus de 20 erreurs...
- Un site vide, en construction avec de l'adsense...
- Un site en construction accessible à tout le monde...

Je sais pas pourquoi, mais j'ai de plus en plus envie de créer un annuaire spécifique au site fait à truelle par des inconscients.
Il serait rempli en moins de deux...
 
WRInaute discret
Dolph, je te remercie de ta réponse très aimable qui m'a beaucoup aidée.

Est-ce que la syntaxe est vraiment tout ce qui compte pour toi ?!? Voilà, j'ai tout corrigé et tu peux maintenant le passer au validateur : 0 error, 0 warning.
Oui, bien sûr, ça m'a aidé : j'ai juste rajouté plein de balises <p> inutiles, transformé des div en span, rajouté quelques alt, etc. Enfin bref, le problème du pied de page est toujours là et le validateur avait pas l'air d'avoir envie de le corriger lui-même.
Je te signalerai au passage que même la page d'accueil de google a 38 erreurs au W3C !!!

Concernant l'adsense qui se trouve sur la page, il est là tout simplement car il est important de le placer dès le début de la construction afin de mieux pouvoir visualiser le rendu final.

Oui, le site est public bien qu'il soit en construction, mais je peux te garantir que personne n'y tombe par hasard car il n'est pas référencé sur google. Les seules personnes qui y vont le font car je le leur ai donné le lien... J'ai vérifié sur google analytics.




bproductiv, merci de m'avoir signalé cet aspect, je n'y avait pas pensé. J'ai donc mis min-width:1024px;
Je pense que ceux qui ont une résolution plus basse pourront utiliser la barre de défilement :)


Voilà, si quelqu'un avait une idée pour le pied de page, merci d'avance, et désolé de m'être énervé mais cette réaction m'a vraiment énervé. Je suis justement là pour améliorer le site AVANT de le rendre public et je ne m'étais pas encore occupé de la correction du W3C...
 
WRInaute discret
Salutations...
bproductiv, merci de m'avoir signalé cet aspect, je n'y avait pas pensé. J'ai donc mis min-width:1024px;
Je pense que ceux qui ont une résolution plus basse pourront utiliser la barre de défilement :)
Perso, j'aurais mis 980px... parce qu'il faut compter sur l'environnement comme l'ascenceur à droite
Et si tu pense que des utilisateurs de 1024x768 (30% chez moi des utilisateurs) scrolleront horizontalement
tu te fourres le doigt dans l'oeil...
cordialement
S.
 
WRInaute discret
Euh oui, c'est vrai que c'est logique ^^'

Bon par contre, faudra que je fasse attention parce que mon site est quand même très large :/
 
WRInaute impliqué
7804j a dit:
Dolph, je te remercie de ta réponse très aimable qui m'a beaucoup aidée.
Y a pas de quoi...

7804j a dit:
Est-ce que la syntaxe est vraiment tout ce qui compte pour toi ?!?
Non, c'est un critère cité paris d'autre... Toi t'as des difficulté de lectur semble t-il. ;-)

7804j a dit:
Oui, bien sûr, ça m'a aidé : j'ai juste rajouté plein de balises <p> inutiles
Y a pas de balises inutile, sauf quand on code avec les pieds.

7804j a dit:
Je te signalerai au passage que même la page d'accueil de google a 38 erreurs au W3C !!!
Il met aussi toutes ses pages en Disallow, va y fonce, fait tout pareil...

7804j a dit:
Concernant l'adsense qui se trouve sur la page, il est là tout simplement car il est important de le placer dès le début de la construction afin de mieux pouvoir visualiser le rendu final.
Bah non. Tu met le cadre, on pire, tu rempli avec une image pour faire style si t'arrive pas à imaginer.
Mais la réglementation adsense est clair... On ne met pas de bandeau sur une page vide ou en construction.

7804j a dit:
je peux te garantir que personne n'y tombe par hasard car il n'est pas référencé sur google
Je peux t'assurer que si tu ne bloque pas les bots, ça va pas durer...

7804j a dit:
cette réaction m'a vraiment énervée.
C'était fait pour, la preuve, t'as déjà corriger les erruer de validation.
7804j a dit:
Je suis justement là pour améliorer le site AVANT de le rendre public
Bah non, vu que tu nous file le lien et que tu l'affiche sur le web, il est déjà public...


Donc, pour résumer, avant de venir nous voir...
Tu code à la truelle, tu ne respectes pas le règlement adsense, tu ne sécurise pas ton site lors de son développement...
Et c'est toi qui gueule...
Normal...

Tiens, j'suis sympa : http://www.alsacreations.com/static/gabarits/liste.html ca aura au moins le mérite de régler ton problème de footer.
 
WRInaute discret
Ok, à mon tour alors de citer.

Dolph a dit:
7804j a dit:
Est-ce que la syntaxe est vraiment tout ce qui compte pour toi ?!?
Non, c'est un critère cité paris d'autre... Toi t'as des difficulté de lectur semble t-il. ;-)
Oui, il y en avait 3, effectivement, mais il me semblait être le plus important. De plus, c'était une hyperbole.
Toi par contre, il me semble que tu as des difficultés d'orthographe.

Dolph a dit:
7804j a dit:
Oui, bien sûr, ça m'a aidé : j'ai juste rajouté plein de balises <p> inutiles
Y a pas de balises inutile, sauf quand on code avec les pieds.
Certes, rien n'est inutile. Il est toujours utile d'avoir une pierre de 500 kg sur sois, au cas où, cependant les désagréments causés par cet objet sont supérieurs aux apports positifs.[/quote]

Dolph a dit:
7804j a dit:
Je te signalerai au passage que même la page d'accueil de google a 38 erreurs au W3C !!!
Il met aussi toutes ses pages en Disallow, va y fonce, fait tout pareil...
Je ne souhaite pas nécessairement discuter de pourquoi la plupart des grands sites ont au moins quelques erreurs ainsi que de savoir s'ils ont raison mais juste mentionner que quand tu me dis "Un site à 2 colonne avec entête et pied est plus de 20 erreurs...", il ne me semblait pas que tu aies vraiment cherché à savoir si les erreurs méritaient d'être corrigées. Soit dit en passant, oui, cela le méritait mais ne passait pas devant dans ma liste des éléments à faire.

Dolph a dit:
7804j a dit:
Concernant l'adsense qui se trouve sur la page, il est là tout simplement car il est important de le placer dès le début de la construction afin de mieux pouvoir visualiser le rendu final.
Bah non. Tu met le cadre, on pire, tu rempli avec une image pour faire style si t'arrive pas à imaginer.
Mais la réglementation adsense est clair... On ne met pas de bandeau sur une page vide ou en construction.
Ok, je ne me rappelais pas de cette partie du règlement d'adsense que je n'ai pas la chance d'avoir appris par coeur. Merci du renseignement.

Dolph a dit:
7804j a dit:
je peux te garantir que personne n'y tombe par hasard car il n'est pas référencé sur google
Je peux t'assurer que si tu ne bloque pas les bots, ça va pas durer...
Eh bien ça dure pourtant depuis 4 mois.
Mais tu as raison, j'ai créé un fichier robots.txt pour interdire son référencement au cas où.

Dolph a dit:
7804j a dit:
cette réaction m'a vraiment énervée.
C'était fait pour, la preuve, t'as déjà corriger les erruer de validation.
Oui, grâce à toi je l'ai fait hier au lieu de le faire deux semaines plus tard. Tu as juste changé l'ordre de mes prévisions.

Dolph a dit:
7804j a dit:
Je suis justement là pour améliorer le site AVANT de le rendre public
Bah non, vu que tu nous file le lien et que tu l'affiche sur le web, il est déjà public...
On dirait que tu n'es pas capable d'interpréter correctement les divers sens qu'un unique mot peut avoir. Selon moi, le site est accessible, certes, je donne le lien, certes, mais uniquement en précisant bien à chaque fois qu'il est en développement. Ainsi, personne n'y va encore dans le but de l'utiliser.

Dolph a dit:
Donc, pour résumer, avant de venir nous voir...
Tu code à la truelle, tu ne respectes pas le règlement adsense, tu ne sécurise pas ton site lors de son développement...
Et c'est toi qui gueule...
Normal...
Puis-je savoir de quelle sécurité tu parles ?
Non, je ne code pas à la truelle mais je ne suis pas un professionnel. Je n'ai jamais eu aucun cours et je fais de mon mieux pour m'améliorer. Le site ne va pas être "mis en ligne" pour utilisation tant que je n'aurai pas corrigé tous les bugs.
Je suis désolé si tu ne t'en rend pas compte, mais ton premier message était tout aussi agressif et j'aurais bien aimé éviter cette discussion.


Dolph a dit:
Tiens, j'suis sympa : http://www.alsacreations.com/static/gabarits/liste.html ca aura au moins le mérite de régler ton problème de footer.

C'est bon, j'en ai dépassé l'étape des Gabarits.


Enfin bref, je ne sais pas ce que donnera la suite de cette discussion mais j'espère que nous pourrons éviter d'augmenter le "ton", si on peut dire ainsi.
 
WRInaute accro
7804j a dit:
Ok, à mon tour alors de citer.
Chic on va jouer...

7804j a dit:
il ne me semblait pas que tu aies vraiment cherché à savoir si les erreurs méritaient d'être corrigées. Soit dit en passant, oui, cela le méritait mais ne passait pas devant dans ma liste des éléments à faire.
C'est moi qui t'ai cité cet élément en premier, et c'est parce que d'expérience, quand on a des problèmes de présentation, la première chose est de nettoyer le code, ce qui évite les problèmes de base.

7804j a dit:
Ok, je ne me rappelais pas de cette partie du règlement d'adsense que je n'ai pas la chance d'avoir appris par coeur. Merci du renseignement.
Etant donné l'indulgence des gens de Google quand aux clics "frauduleux" (c'est à dire venant de pages ne respectant pas le règlement) je te conseille de t'y replonger dare dare et de supprimer REELLEMENT ton encart pub

7804j a dit:
Je n'ai jamais eu aucun cours et je fais de mon mieux pour m'améliorer.
La validation régulière est une bonne façon de ne pas perdre de temps

7804j a dit:
Je suis désolé si tu ne t'en rend pas compte, mais ton premier message était tout aussi agressif et j'aurais bien aimé éviter cette discussion.
C'est pas faux, le meilleur moyen d'éviter la discussion est cependant de ne pas y rentrer.

Bon cela dit j'imagine que le problème est résolu ? ou pas ? Si "pas", ça serait bien de mettre une image en montrant ce que tu voulais avoir comme résultat.
 
WRInaute discret
Oui, j'ai fini par trouver d'où venait l'erreur (bien que je ne comprenne pas pourquoi la première solution ne fonctionnait pas).

En fait, pour mon pied de page, j'avais utilisé un margin right et left ce qui n'a pas rétréci le pied de page mais juste agrandi la page. J'ai donc utilisé un padding sur body à la place.

Sinon, Marie-aude, oui, comme je l'ai dit précédemment j'allais de toute façon corriger mes erreurs mais c'est une chose à laquelle je n'accordais pas beaucoup d'importance en vue du système hyper strict du w3c et que cela n'avais pas directement d'influence sur le problème en cours. Enfin bon, tu as raison, mieux vaut avoir un code clair avant de s'attaquer aux problèmes :)

Ok, je m'attaque tout de suite au problème d'adsense qui est effectivement très peu indulgent.
 
WRInaute accro
En css le margin s'ajoute à la largeur de l'élément. Si tu avais une largeur fixe, tu aurais dû la définir à 960px (pour avoir un total marges incluses de 1000)
L'autre solution est la propriété margin:auto

Et sérieusement, le w3C cela a BEAUCOUP d'impact sur la présentation (notamment parce que chaque navigateur interprête les erreurs à sa façon)
 
WRInaute accro
tu peux aussi ajouter adtest a on et laisser tes adsense ...
mais ca va faire venir mediapartner qui va refiler l info a son pote googlebot qui va indexer tes pages ...
 
WRInaute discret
Bon dolph, c'est bon, on peut arrêter ce sujet, merci.

Concernant adsense, Zecat, je vais juste mettre un tableau à la place en attendant, mais merci de ta proposition :)

Sinon, pour la marge sur le pied de page, Marie-Aude, mon problème vient (ou plutôt venait) justement du fait que je n'avais pas un corps fixe avec une valeur en pixel mais qui avait un width:100% ce qui m'empêchait l'utilisation du margin auto ^^'
 
Discussions similaires
Haut