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.
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
-
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
-
Modérateurvoilà la réponse :
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fpeexstudio.fr%2Fstyle.css&profile=css21&usermedium=all&warning=1&lang=fr
donc pas grand chose ...
et les explications :
http://www.w3.org/TR/CSS21/colors.html#propdef-background
bon courage ... -
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> -
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à ??? -
<div id="imageblock"></div>
et
div#imageblock
{
background: url(http://peexstudio.fr/cadrecopyright.png)clear:both;padding:0 0 5px 0
}
mieux non? -
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...
-
up
-
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 -
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
