Position d'une image sur une page web
jer03
-
jer03 -
jer03 -
Bonjour,
je souhaite positionner une image sur une page web mais cela ne marche pas , on voit juste l'emplacement mais pas l'image .
voici se que j'ai fait :
HTML :
<img class="Logo" src="C:\Users\jérôme\Desktop\visite\images\voiture.jpg" width="295" height="178" />
feuille de styles:
.Logo
{
position: absolute;
top: 10px;
left: 10px;
}
pourquoi cela ne marche pas ?
vous pouvez m'expliquer?
je souhaite positionner une image sur une page web mais cela ne marche pas , on voit juste l'emplacement mais pas l'image .
voici se que j'ai fait :
HTML :
<img class="Logo" src="C:\Users\jérôme\Desktop\visite\images\voiture.jpg" width="295" height="178" />
feuille de styles:
.Logo
{
position: absolute;
top: 10px;
left: 10px;
}
pourquoi cela ne marche pas ?
vous pouvez m'expliquer?
A voir également:
- Position d'une image sur une page web
- Comment supprimer une page sur word - Guide
- Imprimer excel sur une page - Guide
- Web office - Guide
- Capturer une page web complète - Guide
- Créer une page web - Guide
6 réponses
L'image existe-t-elle? Ton image est C:\Users\jérôme\Desktop\visite\images\voiture.jpg.
Une fois sur un serveur distant (chez ton hebergeur), il ne peut plus y accéder, vu que le fichier n'existe pas sur le serveur. Il vaut mieux mettre un chemin relatif : tu met ton image dans le même repertoire que le fichier html et tu ecris :
<img class="Logo" src="voiture.jpg" width="295" height="178" />
et ça marchera en local comme à distance.
Une fois sur un serveur distant (chez ton hebergeur), il ne peut plus y accéder, vu que le fichier n'existe pas sur le serveur. Il vaut mieux mettre un chemin relatif : tu met ton image dans le même repertoire que le fichier html et tu ecris :
<img class="Logo" src="voiture.jpg" width="295" height="178" />
et ça marchera en local comme à distance.
j'ai bien essayer de mettre l'image entre <div> mais cela ne change rien,
je n'arrive toujours pas a déplacer mon image sur la page web ..
je n'arrive toujours pas a déplacer mon image sur la page web ..
voici se que j'ai fait :
html :
<div class="Logo"><img class="Logo" src="voiture.jpg" width="95" height="78" /> </div>
styles.css :
.Logo
{
position: absolute;
top: 100px;
left: 500px;
}
html :
<div class="Logo"><img class="Logo" src="voiture.jpg" width="95" height="78" /> </div>
styles.css :
.Logo
{
position: absolute;
top: 100px;
left: 500px;
}
Le "div" et l'image "img" ne peuvent pas être de la même classe, car ce sont deux objets différent. J'ai fait un petit code, vite fait .. A toi de jouer sur les dimensions et positions.
Le CSS:
La page html:
Le CSS:
Body
{ width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: blue;
}
.Principal{ position: relative;
width: 700px;/*500px;*/
height: 500px;
padding-top: 5em;/*100px;*/
padding-left: 5em;/*500px;*/
padding-right: 5em;
padding-bottom: 5em;
background-color: red;
}
.Logo{ position: absolute;
width: 12em;/*500px;*/
top: 1em;/*100px;*/
left: 5em;/*500px;*/
background-color: green;
}
.image{ margin-left: auto;
margin-right: auto;
width: 300px;/*95px;*/
height: 225px;/*78px;*/
}
La page html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title>Position d'une image sur une page web</title>
<meta http-equiv="Content-Language" content="fr" />
<meta name="description" content="Bonjour, je souhaite positionner une image sur une page web mais cela ne marche pas , on voit juste l'emplacement mais pas l'image . voici se que j'ai fait : HTML : <img class="Logo"..." />
<meta name="HandheldFriendly" content="True" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body id="" class="">
<div class="Principal">
<div class="Logo">
<!--<img class="Logo" src="voiture.jpg" width="95" height="78" />-->
<!--<<img class="Logo" src="voiture.jpg" width="95px" height="78px" />-->
<img class="image" src="voiture.jpg" />
</div>
</div>
</body>
</html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question