Position d'une image sur une page web

Fermé

jer03 - 2 déc. 2012 à 14:48
jer03 - 3 déc. 2012 à 19:14

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?

A voir également:

Position d'une image sur une page web
Supprimer une page word - Guide
Traduire une page web - Guide
Web office - Guide
Faire une capture d'écran d'une page web entière - Guide
Imprimer tableau excel sur une page - Guide

6 réponses

Réponse 1 / 6

roptat Messages postés 276 Date d'inscription samedi 20 octobre 2012 Statut Membre Dernière intervention 26 juillet 2013 77
2 déc. 2012 à 14:52

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.

Réponse 2 / 6

jer03
2 déc. 2012 à 15:33

ok ca marche avec le chemin relatif.
par contre je n'arrive tjr pas a la positionner sut la page ?

j'ai mis ca en page de styles:

.Logo
{
position: absolute;
top: 10px;
left: 10px;
}

pourquoi je n'arrive pas a la positionner ?

Heliotte Messages postés 1491 Date d'inscription vendredi 26 octobre 2012 Statut Membre Dernière intervention 28 janvier 2013 92
2 déc. 2012 à 15:50

Bonjour jer03,
C'est la "div" dans laquelle tu affiche ton image qui doit être en "absolute" je crois.
Donc, dans ton code, tu ajoutes une

"<div class="Logo">", ton image et "</div>"

Réponse 3 / 6

jer03
3 déc. 2012 à 13:12

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

Réponse 4 / 6

jer03
3 déc. 2012 à 13:22

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;
}

Heliotte Messages postés 1491 Date d'inscription vendredi 26 octobre 2012 Statut Membre Dernière intervention 28 janvier 2013 92
3 déc. 2012 à 14:45

Qu'est-ce que tu veux .. avoir l'image TOUJOURS présente sur ta page Web, même si l'utilisateur "scroll" la page ?

Heliotte Messages postés 1491 Date d'inscription vendredi 26 octobre 2012 Statut Membre Dernière intervention 28 janvier 2013 92
3 déc. 2012 à 15:09

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:

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&apos;emplacement mais pas l&apos;image . voici se que j&apos;ai fait : HTML : <img class=&quot;Logo&quot;..." />
		<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

Réponse 5 / 6

jer03
3 déc. 2012 à 15:42

Merci pour se code mais je pense qu'il est trop complexe.
en faite je bosse en local pour le moment je veux juste savoir comment on fait pour faire déplacer une image sur une page web?
pour le moment j'arrive a mettre a la bonne dimension mon image mais je n'arrive pas à la déplacer.

Heliotte Messages postés 1491 Date d'inscription vendredi 26 octobre 2012 Statut Membre Dernière intervention 28 janvier 2013 92
3 déc. 2012 à 17:32

Et tu trouves ce code trop compliqué ? Il ne te faut pas grand chose.
J'abandonne ce fil de discussion.
Bonne continuation.

Réponse 6 / 6

jer03
3 déc. 2012 à 18:41

c'est bon j'ai trouvé voici le code a mettre pour positionnet une image :

<BODY>
<SPAN style="position: absolute; top: 50px; left: 10px;width: 95px; height: 61px">
<IMG SRC="voiture.jpg" >
</SPAN>

Heliotte Messages postés 1491 Date d'inscription vendredi 26 octobre 2012 Statut Membre Dernière intervention 28 janvier 2013 92
3 déc. 2012 à 18:44

C'est parfait.
Félicitation et bonne continuation.

jer03
3 déc. 2012 à 19:14

Merci pour tous ;)