Image en pied de page
Marcus
-
bg62 Messages postés 26245 Date d'inscription Statut Modérateur Dernière intervention -
bg62 Messages postés 26245 Date d'inscription Statut Modérateur Dernière intervention -
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.
A voir également:
- Image en pied de page
- Impossible de supprimer une page word - Guide
- Calcul km marche à pied gratuit - Télécharger - Sport
- Image iso - Guide
- Mettre une image en fond sur word sur une seule page - Guide
- Mettre google en page d'accueil - Guide
9 réponses
Quelques petites modifications :
HTML :
CSS :
Après, je ne sais pas la suite de ton code HTML donc je peut pas savoir pour la suite du CSS
Bien cordialement
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
voilà 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 ...
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>
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>
#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à ???
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
<div id="imageblock"></div>
et
div#imageblock
{
background: url(http://peexstudio.fr/cadrecopyright.png)clear:both;padding:0 0 5px 0
}
mieux non?
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...
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
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
http://peexstudio.fr/accueil.html
