Image en pied de page

Bonjour,
Je ne parviens pas à mettre une simple image en pied de page.

Voici la partie du code css concerné:

#en_tete
{
width:100%;
height:351px;
background-image:url("http://peexstudio.fr/aa.jpg");
background-repeat:repeat-x;
padding-top:94px
}
#pied {background: url(images/pied2.jpg)clear:both;padding:0 0 5px 0}
#imageblock {
padding: 0px;
bottom: 0px;
position: relative;
}

Et la partie html concernée:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>
...
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
</head>
<body>
<div id="imageblock"><img src="http://peexstudio.fr/cadrecopyright.png" ></div>
</center>

</body>
</html>

===>> http://peexstudio.fr/accueil.html pour vous rendre compte de la situation actuelle.
Configuration: Windows Vista
Firefox 3.5.4

9 réponses

  1. Quelques petites modifications :

    HTML :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
    <title>ta page</title>
    <link rel="stylesheet" media="screen" type="text/css" title="design" href="style.css" />
    </head>
    <body>
    <div id="imageblock"><img src="http://peexstudio.fr/cadrecopyright.png" /></div>
    </body>
    </html>


    CSS :

    div#imageblock 
    {
    padding: 0px;
    bottom: 0px;
    position: relative;
    } 


    Après, je ne sais pas la suite de ton code HTML donc je peut pas savoir pour la suite du CSS

    Bien cordialement
    1. J'ai fais se que tu m'a dit et sa ne fonctionne pas.

      CSS:

      #en_tete
      {
      width:100%;
      height:351px;
      background-image:url("http://peexstudio.fr/aa.jpg");
      background-repeat:repeat-x;
      padding-top:94px
      }
      #pied {background: url(images/pied2.jpg)clear:both;padding:0 0 5px 0}

      div#imageblock
      padding: 0px;
      bottom: 0px;
      position: relative;
      }
      body
      {
      background-color: black;
      }
      #skyline {
      width: 893px;
      height: 79px;
      background: url(http://peexstudio.fr/barre_menu.png);
      padding: 0;
      position: relative;
      }
      #skyline li {padding: 0; list-style: none; position: absolute; top: 0;}

      #skyline li, #skyline a {height: 79px; display: block; }
      #panel1b {left: 0; width: 131px;}
      #panel2b {left: 131px; width: 201px;}
      #panel3b {left: 332px; width: 145px;}
      #panel4b {left: 477px; width: 195px;}
      #panel5b {left: 674px; width: 220px;}

      #panel1b a:hover {
      background: transparent url(http://peexstudio.fr/barre_menu_hover.png) 0 0px no-repeat;
      }
      #panel2b a:hover {
      background: transparent url(http://peexstudio.fr/barre_menu_hover.png) -131px 0px no-repeat;
      }
      #panel3b a:hover {
      background: transparent url(http://peexstudio.fr/barre_menu_hover.png) -332px 0px no-repeat;
      }
      #panel4b a:hover {
      background: transparent url(http://peexstudio.fr/barre_menu_hover.png) -477px 0px no-repeat;
      }
      #panel5b a:hover {
      background: transparent url(http://peexstudio.fr/barre_menu_hover.png) -674px 0px no-repeat;
      }

      HTML:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
      <head>
      <title>Peexstudio | A new glance in the graphic work</title>
      <link rel="shortcut icon" type="image/x-icon" href="http://peexstudio.fr/favicon.ico" />
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <meta name="description" content="Réalisation de travaux divers et variés dans le domaine de la communication graphique." />
      <meta name="keywords" content="design, peexstudio, pinto, gobelins, graphique" />
      <link rel="stylesheet" media="screen" type="text/css" title="design" href="style.css" />
      </head>
      <body>
      <center><div id="en_tete">
      <ul id="skyline">
      <li id="panel1b"><a href="#"></a></li>
      <li id="panel2b"><a href="#"></a></li>
      <li id="panel3b"><a href="#"></a></li>
      <li id="panel4b"><a href="#"></a></li>
      <li id="panel5b"><a href="5"></a></li>
      </ul>
      </div>
      <div id="imageblock"><img src="http://peexstudio.fr/cadrecopyright.png" /></div>
      </body>
      1. Modérateur
        #pied {background: url(images/pied2.jpg)clear:both;padding:0 0 5px 0} 

        et
        <div id="imageblock"><img src="http://peexstudio.fr/cadrecopyright.png" /></div> 

        y a pas comme une erreur là ???
        1. <div id="imageblock"></div>

          et

          div#imageblock
          {
          background: url(http://peexstudio.fr/cadrecopyright.png)clear:both;padding:0 0 5px 0
          }

          mieux non?
          1. En tout cas sa ne marche pas, je suis novice hein, j'ai ptetre l'air d'être absurde mais bon quand on débute...
            1. si le code que tu montres est celui de ton css... il y a beaucoup d'erreur !

              Lorsque tu déclares une règle tu dois impérativement "ouvrir" et "fermer" tes accolades ("{ }") et systématiquement mettre un ";" (point virgule) à la fin d'un propriété !

              Ex.:
              body {
              margin:0; padding:0; background:url(image.png) 0 0 no-repeat; text-align:center;
              }

              Ensuite pour ton "pied de page" essaye quelque chose comme ceci :
              html:
              <div id="footer"><img src="tonimage.png" alt="" /></div>

              css:
              body { width:100%; height:100%; }
              #footer { margin-bottom:0;position:relative; }

              Si ça ne marche toujours pas, vérifie bien qu'il y ait du contenu dans ta page car il se peut que ton footer ne fasse que s'adapter à ce qui le précède ! Si tu ne veux pas ça tu devras passer dans ton css sa position (emplacement) et gérer son adaptation au contenu avec des marges par exemple...

              Bon travail ! :D
              1. Merci j'ai fais des test avec des textes de substitution et l'image semble se placer par rapport à cela en pied de page comme je le voulais, il ne reste plus qu'a y insérer un texte "copyright" qui fasse la même chose et qui se retrouve toujours au dessus de limage en pied de page.

                http://peexstudio.fr/accueil.html
                1. Modérateur
                  pas de liens en 'signature' dans le post !
                  tu as ton espace membre pour ça ... merci !