Problème marge du pied de page

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par 7804j, 9 Mai 2011.

  1. 7804j
    7804j WRInaute discret
    Inscrit:
    20 Avril 2011
    Messages:
    167
    J'aime reçus:
    0
    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
     
  2. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 950
    J'aime reçus:
    275
  3. bproductiv
    bproductiv WRInaute accro
    Inscrit:
    27 Décembre 2004
    Messages:
    3 670
    J'aime reçus:
    0
    min-width:1100px; ?? Rien que ça !! Tu zappes les écrans 17" c'est volontaire ?
     
  4. Dolph
    Dolph WRInaute impliqué
    Inscrit:
    1 Mars 2011
    Messages:
    551
    J'aime reçus:
    0
    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...
     
  5. 7804j
    7804j WRInaute discret
    Inscrit:
    20 Avril 2011
    Messages:
    167
    J'aime reçus:
    0
    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...
     
  6. Shunkawakan
    Shunkawakan WRInaute discret
    Inscrit:
    22 Mars 2009
    Messages:
    143
    J'aime reçus:
    0
    Salutations...
    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.
     
  7. 7804j
    7804j WRInaute discret
    Inscrit:
    20 Avril 2011
    Messages:
    167
    J'aime reçus:
    0
    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 :/
     
  8. Dolph
    Dolph WRInaute impliqué
    Inscrit:
    1 Mars 2011
    Messages:
    551
    J'aime reçus:
    0
    Y a pas de quoi...

    Non, c'est un critère cité paris d'autre... Toi t'as des difficulté de lectur semble t-il. ;-)

    Y a pas de balises inutile, sauf quand on code avec les pieds.

    Il met aussi toutes ses pages en Disallow, va y fonce, fait tout pareil...

    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.

    Je peux t'assurer que si tu ne bloque pas les bots, ça va pas durer...

    C'était fait pour, la preuve, t'as déjà corriger les erruer de validation.
    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.
     
  9. 7804j
    7804j WRInaute discret
    Inscrit:
    20 Avril 2011
    Messages:
    167
    J'aime reçus:
    0
    Ok, à mon tour alors de citer.

    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.

    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]

    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.

    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.

    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ù.

    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.

    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.

    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.


    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.
     
  10. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 950
    J'aime reçus:
    275
    Chic on va jouer...

    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.

    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

    La validation régulière est une bonne façon de ne pas perdre de temps

    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.
     
  11. 7804j
    7804j WRInaute discret
    Inscrit:
    20 Avril 2011
    Messages:
    167
    J'aime reçus:
    0
    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.
     
  12. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 950
    J'aime reçus:
    275
    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)
     
  13. Zecat
    Zecat WRInaute accro
    Inscrit:
    1 Mars 2005
    Messages:
    9 119
    J'aime reçus:
    1
    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 ...
     
  14. 7804j
    7804j WRInaute discret
    Inscrit:
    20 Avril 2011
    Messages:
    167
    J'aime reçus:
    0
    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 ^^'
     
Chargement...
Similar Threads - Problème marge pied Forum Date
WordPress Un problème de marge Développement d'un site Web ou d'une appli mobile 5 Février 2020
problème marge droite body 100% / Ipad et Iphone Développement d'un site Web ou d'une appli mobile 7 Août 2013
Problème de marge Développement d'un site Web ou d'une appli mobile 21 Mars 2011
probleme de marge de page - Resolu Développement d'un site Web ou d'une appli mobile 5 Août 2010
Problème de marge sous IE6 Développement d'un site Web ou d'une appli mobile 30 Mars 2009
Probleme avec une marge inutile dans mon iframe Développement d'un site Web ou d'une appli mobile 8 Juin 2008
Problème de marge négative en basse résolution Développement d'un site Web ou d'une appli mobile 24 Avril 2006
[CSS] problème de marge dans liste Développement d'un site Web ou d'une appli mobile 28 Octobre 2005
Problème de duppication de la balise meta descritpion Débuter en référencement Jeudi à 17:11
Problème stats analytics Google Analytics Jeudi à 13:37
Problèmes Données structurées Crawl et indexation Google, sitemaps Dimanche à 09:07
problème avec mon site Demandes d'avis et de conseils sur vos sites 28 Novembre 2022
Probleme tag sur Google tag manager Demandes d'avis et de conseils sur vos sites 24 Novembre 2022
Probleme Tag sur Google Tag Manager Google Analytics 18 Novembre 2022
Gros problème sur la profondeur de mes pages Problèmes de référencement spécifiques à vos sites 30 Septembre 2022
Problème de htaccess chez Ionos URL Rewriting et .htaccess 12 Septembre 2022
Problème sur jquery avec fonction asynchrone Développement d'un site Web ou d'une appli mobile 6 Septembre 2022
Problème de crawl et d'indexation Crawl et indexation Google, sitemaps 1 Septembre 2022
WordPress Problème affichage style avec Elementor (titre, bordures, separateur) Administration d'un site Web 8 Août 2022
Problème d'indexation de backlinks Débuter en référencement 24 Juillet 2022