Création site html "image qui se balade"
Résolu
toros62
Messages postés
9
Date d'inscription
Statut
Membre
Dernière intervention
-
toros62 Messages postés 9 Date d'inscription Statut Membre Dernière intervention -
toros62 Messages postés 9 Date d'inscription Statut Membre Dernière intervention -
Bonjour, je débute en création de site web de type html.
Mon problème étant que quand je regard ma page final du site je vois mon image qui bouge en fonction du rétrécissement ou l'agrandissement de ma page.
j'ai utilisé la position: absolute; pour mettre mon image a un endroit précis particulièrement en haut a droite en dessous de la bannière.
( mon image et mise directement dans le css
aider moi svp merci d'avance de votre aide.
j ai procéder comme ce-ci: (fichier) css
#icone
{
float: right;
width: 260px;
height: 177px;
background-image: url("electricite.png");
position: absolute;
top: 20%;
right: 10%;
}
toros62
Mon problème étant que quand je regard ma page final du site je vois mon image qui bouge en fonction du rétrécissement ou l'agrandissement de ma page.
j'ai utilisé la position: absolute; pour mettre mon image a un endroit précis particulièrement en haut a droite en dessous de la bannière.
( mon image et mise directement dans le css
aider moi svp merci d'avance de votre aide.
j ai procéder comme ce-ci: (fichier) css
#icone
{
float: right;
width: 260px;
height: 177px;
background-image: url("electricite.png");
position: absolute;
top: 20%;
right: 10%;
}
toros62
A voir également:
- Création site html "image qui se balade"
- Création site web - Guide
- Site qui remplace coco - Accueil - Réseaux sociaux
- Remplaçant de Coco : quelles solutions pour tchater gratuitement en ligne ? - Accueil - Réseaux sociaux
- Site de telechargement - Accueil - Outils
- Site pour vendre des objets d'occasion - Guide
14 réponses
salut,
alors si j'enlève top et right l'image ce met au point de départ en haut a gauche et la elle ne bouge plus ds la page mais le pb c que j aimerai la mettre ou je veut.
alors si j'enlève top et right l'image ce met au point de départ en haut a gauche et la elle ne bouge plus ds la page mais le pb c que j aimerai la mettre ou je veut.
Je te conseil de faire comme ça :
Tu créer un div a l'endroit de ta page ou tu veux que ton image apparaissent et tu lui ajoute la class .icone
Pour le CSS tu enlève bien :
Ton site est en design fixe ou extensible ?
Tu créer un div a l'endroit de ta page ou tu veux que ton image apparaissent et tu lui ajoute la class .icone
Pour le CSS tu enlève bien :
top: 20%; right: 10%;
Ton site est en design fixe ou extensible ?
design fixe j ai pas encore appris l'extensible, mais le problème c que si je fais comme tu dit je ne pourrais plus bougé l'image a moin qui y a une astuce pour le mettre ou on veut dans le html ? "je début"c pas évident a ts retenir^^
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
tu peut m'expliquer en détaille comment tu ferais ca serai sympa a moin que ta un genre tuto a me conseillé a part le site du zero ( je l ai déja vu) merci pr ton aide
Si j'ai bien compris tu veux positionner ton image juste en dessous de ton header ?
peux tu m'envoyer un petit bout de code ?
peux tu m'envoyer un petit bout de code ?
oui
ca te va si je te passe le lien de ma page internet :https://www.venez.fr/error.fr.html?id=1&uri=http%3A%2F%2Ftoros62.jesuisopen.fr%2F
ca te va si je te passe le lien de ma page internet :https://www.venez.fr/error.fr.html?id=1&uri=http%3A%2F%2Ftoros62.jesuisopen.fr%2F
ok merci on ma deja dit aussi que ma frame était mal foutue mais c koi exactement la frame c est les symbole
encore merci pr ton aide
encore merci pr ton aide
ba si en faite mon hébergeur c'est lycos et j' ai changer mon nom de domaine en cliquant sur le lien tu arrive sur la page normalement moi ça marche j ai déjà testé sur plusieurs pc je te passe mon code html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>ANDRIEUX ELECTRICITE !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Designe" href="designe.css" />
</head>
<body>
<div id="en_tete">
<p><strong>EN CONSTRUCTION</strong></p>
</div>
<div id="topad">
<div id="icone"> </div>
</div>
<div id="menu">
<div class="element_menu">
<h3>Les services proposées</h3>
<ul> <li><a href="alarme.html">Alarme</a></li>
<li><a href="dépannage.html">Dépannage</a></li>
<li><a href="video.html">Vidéo</a></li>
<li><a href="automatisme">Automatisme</a></li>
<li><a href="électricité_générale">Electricite générale</a></li>
</ul>
</div>
</div>
<div id="corps">
<h2 class="titre1">Coordonnée de l'entreprise</h2>
<p class="textprinc">
<strong>Adresse:</strong>
<br />214 rue de Calais
<br />62370 Saint-Folquin
<br />
<br /><strong>N°Tél:</strong> 06-32-99-13-04</span>
<br />
<br /><strong>Adresse email:</strong>
<a href="mailto:Andrieux-jerome@orange.fr">Andrieux-jerome@orange.fr</a>
</p>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="pied_de_page">
<p>Copyright ToRos 2009, tous droits réservés</p>
</div>
</body>
</html> <textarea style="display :none">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>ANDRIEUX ELECTRICITE !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Designe" href="designe.css" />
</head>
<body>
<div id="en_tete">
<p><strong>EN CONSTRUCTION</strong></p>
</div>
<div id="topad">
<div id="icone"> </div>
</div>
<div id="menu">
<div class="element_menu">
<h3>Les services proposées</h3>
<ul> <li><a href="alarme.html">Alarme</a></li>
<li><a href="dépannage.html">Dépannage</a></li>
<li><a href="video.html">Vidéo</a></li>
<li><a href="automatisme">Automatisme</a></li>
<li><a href="électricité_générale">Electricite générale</a></li>
</ul>
</div>
</div>
<div id="corps">
<h2 class="titre1">Coordonnée de l'entreprise</h2>
<p class="textprinc">
<strong>Adresse:</strong>
<br />214 rue de Calais
<br />62370 Saint-Folquin
<br />
<br /><strong>N°Tél:</strong> 06-32-99-13-04</span>
<br />
<br /><strong>Adresse email:</strong>
<a href="mailto:Andrieux-jerome@orange.fr">Andrieux-jerome@orange.fr</a>
</p>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="pied_de_page">
<p>Copyright ToRos 2009, tous droits réservés</p>
</div>
</body>
</html> <textarea style="display :none">
Ok je vois, pour le moment la petite maison est en haut a droite juste en dessous du header, c'est pas e que tu voulais faire ?
oui j ai réussi a régler le pb on m a dit de mettre un parent (topad) au conteneur d'icone et de modifié mon fichier css comme ce ci par contre je pe pas le descendre ou monté mon image avec cette méthode tu serai toi ?
#topad
{
position: relative;
}
#icone
{
width: 260px;
height: 177px;
background-image: url("electricite.png");
position: absolute;
right: -3%;
}
#topad
{
position: relative;
}
#icone
{
width: 260px;
height: 177px;
background-image: url("electricite.png");
position: absolute;
right: -3%;
}