Création site html "image qui se balade" [Résolu/Fermé]

Signaler
Messages postés
9
Date d'inscription
vendredi 12 juin 2009
Statut
Membre
Dernière intervention
14 juin 2009
-
Messages postés
9
Date d'inscription
vendredi 12 juin 2009
Statut
Membre
Dernière intervention
14 juin 2009
-
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

14 réponses


Salut,

Si tu enlève :

top: 20%;
right: 10%; 


ça donne quoi ?
Messages postés
9
Date d'inscription
vendredi 12 juin 2009
Statut
Membre
Dernière intervention
14 juin 2009

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.

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 :
top: 20%;
right: 10%; 


Ton site est en design fixe ou extensible ?

Messages postés
9
Date d'inscription
vendredi 12 juin 2009
Statut
Membre
Dernière intervention
14 juin 2009

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

Si tu pourra la bouger en CSS, tu fera un padding-left:80% par exemple
Messages postés
9
Date d'inscription
vendredi 12 juin 2009
Statut
Membre
Dernière intervention
14 juin 2009

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 ?

Messages postés
9
Date d'inscription
vendredi 12 juin 2009
Statut
Membre
Dernière intervention
14 juin 2009

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

Je regarde ça vers 21H30 ;)
Messages postés
9
Date d'inscription
vendredi 12 juin 2009
Statut
Membre
Dernière intervention
14 juin 2009

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

Euh je ne comprend pas trop la ton site, il n'y a rien ? je vois que lycos ...
Messages postés
9
Date d'inscription
vendredi 12 juin 2009
Statut
Membre
Dernière intervention
14 juin 2009

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

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 ?
Messages postés
9
Date d'inscription
vendredi 12 juin 2009
Statut
Membre
Dernière intervention
14 juin 2009

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