Placer une image "relative" par rapport
MoonlitSunset
Messages postés
22
Statut
Membre
-
Dalida Messages postés 7114 Statut Contributeur -
Dalida Messages postés 7114 Statut Contributeur -
Bonjour,
Bonsoir, j'aimerais éparpiller plusieurs images sur ma page, à différents endroits. Seulement, je ne sais pas comment faire. J'ai essayé avec position:absolute mais ça la place par rapport au coin de la page.
Voici mon second essai (avec position:relative) :
HTML
<div id ="corps">
<div class="graduation"><img src="http://blabla.fr/blabla/graduation.png"/></div>
</div>
CSS
#corps{position:relative}
.graduation{position:relative;
left:200px;
top:200px;}
Ca marche correctement mais mon menu, qui normalement est au-dessus du corps, se retrouve en-dessous.
Dessin : http://nsa06.casimages.com/img/2009/03/24/090324020150603577.png
Les images que je veux placer seront uniquement dans le corps, aucune n'en sortira. Pouvez-vous me dire comment faire pour placer mes images dans le corps de manière à ce que, quand j'agrandis ou réduis la page, elles restent exactement au même endroit ?
Merci d'avance.
Bonsoir, j'aimerais éparpiller plusieurs images sur ma page, à différents endroits. Seulement, je ne sais pas comment faire. J'ai essayé avec position:absolute mais ça la place par rapport au coin de la page.
Voici mon second essai (avec position:relative) :
HTML
<div id ="corps">
<div class="graduation"><img src="http://blabla.fr/blabla/graduation.png"/></div>
</div>
CSS
#corps{position:relative}
.graduation{position:relative;
left:200px;
top:200px;}
Ca marche correctement mais mon menu, qui normalement est au-dessus du corps, se retrouve en-dessous.
Dessin : http://nsa06.casimages.com/img/2009/03/24/090324020150603577.png
Les images que je veux placer seront uniquement dans le corps, aucune n'en sortira. Pouvez-vous me dire comment faire pour placer mes images dans le corps de manière à ce que, quand j'agrandis ou réduis la page, elles restent exactement au même endroit ?
Merci d'avance.
A voir également:
- Placer une image "relative" par rapport
- Placer des points sur une carte - Guide
- Légender une image - Guide
- Recherche par image - Guide
- Image iso - Guide
- Plan rapport de stage - Guide
7 réponses
salut,
mon menu, qui normalement est au-dessus du corps, se retrouve en-dessous
la position relative place l'élément au premier plan et je ne suis pas sûr que ce soit corrigible.
Pouvez-vous me dire comment faire pour placer mes images dans le corps de manière à ce que, quand j'agrandis ou réduis la page, elles restent exactement au même endroit ?
oui on peut te dire mais il faudrait le contexte.
tout dépend de ton code et de ce que tu veux obtenir.
en gros il faut positionner les éléments par rapport à <body> et positionnement <body> fixement dans la page.
mais c'est des paroles en l'air !
mon menu, qui normalement est au-dessus du corps, se retrouve en-dessous
la position relative place l'élément au premier plan et je ne suis pas sûr que ce soit corrigible.
Pouvez-vous me dire comment faire pour placer mes images dans le corps de manière à ce que, quand j'agrandis ou réduis la page, elles restent exactement au même endroit ?
oui on peut te dire mais il faudrait le contexte.
tout dépend de ton code et de ce que tu veux obtenir.
en gros il faut positionner les éléments par rapport à <body> et positionnement <body> fixement dans la page.
mais c'est des paroles en l'air !
Bonsoir et merci de votre réponse. J'ai tenté d'utiliser la propriété z-index (une solution qu'on m'avait proposée) mais je ne m'en sors toujours pas.
Code CSS :
Le code HTML :
Le problème : je peux placer mes images, mais si je mets "top=0px", elle ne sera pas placée sur le bord du corps mais plus bas.
Dessin : http://nsa06.casimages.com/img/2009/03/30/090330124423674069.png
Je ne sais plus quoi faire...
Merci de votre aide.
Code CSS :
body{
width:1000px;
margin:auto;}
#en_tete{width:1000px;
height:150px;
border-left:solid 3px;
border-left-color:rgb(110,131,203);
border-right:solid 3px;
border-right-color:rgb(197,108,120);
margin-top:5px;}
#corps{position:relative;
z-index:2;
width:auto;
margin-top:0px;
margin-bottom:0px;
margin-left:19px;
padding-left:130px;
padding-right:145px;
padding-top:10px;
padding-bottom:10px;}
.graduation{position:relative;
z-index:6;
left:200px;
top:150px;}
.groupe{position:relative;
z-index:6;
left:20px;
top:10px;}
#pied_de_page {
width:1000px;
height:25px;
padding-top:5px;
margin-top:0px;
margin-bottom:5px;}
#menu {position:relative;
z-index:4;
float:left;
width:150px;
border : none;
padding-top : 15px;}
Le code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><title></title>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="/style.css" />
</head>
<body>
<div id="en_tete"> </div>
<div id="menu"><?php
include 'http://efelcenter.fr/menu/menu.htm';
?></div>
<div id ="corps">
<P style="text-align:center"><img src="/simple_image.jpg" 'width=280, height=220'/></a></p>
<div class="graduation"><img src="/graduation.png"/></div></a>
<img class="groupe" src="/groupe_off.png"/>
</div>
<div id="pied_de_page"></div>
</body>
Le problème : je peux placer mes images, mais si je mets "top=0px", elle ne sera pas placée sur le bord du corps mais plus bas.
Dessin : http://nsa06.casimages.com/img/2009/03/30/090330124423674069.png
Je ne sais plus quoi faire...
Merci de votre aide.
salut,
ça ira plus vite avec la version en ligne.
c'est le site d'apprentissage de langues ?
si oui, quelle page exactement pose problème ?
parce que pour moi la page d'accueil est ok.
ça ira plus vite avec la version en ligne.
c'est le site d'apprentissage de langues ?
si oui, quelle page exactement pose problème ?
parce que pour moi la page d'accueil est ok.
D'accord, alors voici la page sur laquelle je fais mes essais : http://www.efelcenter.fr/motdujour/methode.php
Merci d'avance.
Merci d'avance.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
en fait c'est logique mais je ne sais pas si je vais réussir à t'expliquer.
quand le navigateur affiche ta page :
• il dessine la boite du <h3> (avec dimensions, marges, espacements)
• puis il dessine la boite du 1er <div> (avec dimensions, marges, espacements) en dessous de <h3> et ensuite il déplace ce <div> en fonction des paramètres que tu lui donnes : à 150 px plus en bas, à 200 px plus à gauche.
• puis il dessine la boite du 2me <div> en dessous du 1er <div> tel qu'il a été dessiné à sa place originale (donc comme si le 1er <div> n'avait pas été déplacé). ensuite il déplace le 2me <div> avec tes paramètres : 0 px depuis le haut (mais le haut correspond au bas de <h3> + la hauteur du 1er <div>) et 400 px à gauche.
donc tu te retrouves avec un 2me <div> plus bas que tu ne pensais (la différence correspondant à la hauteur de <h3> + la hauteur du 1er <div>).
pour remédier à ça :
• mets les deux images dans le même <div>, donne une hauteur fixe à ce <div> (à priori la hauteur de la plus grande image) ;
• fais flotter à gauche la première image, elle se placera en haut à gauche du <div> ;
• ajoute des marges en haut et à gauche de la première image pour la placer où tu veux, idem pour la deuxième en ne modifiant que la marge gauche ;
• ajoute des marges en haut et bas du <div> pour le distancier du <h3> et du texte en dessous.
ce n'est pas garanti du premier coup mais avec quelques essais tu devrais t'en sortir.
-;o)
quand le navigateur affiche ta page :
• il dessine la boite du <h3> (avec dimensions, marges, espacements)
• puis il dessine la boite du 1er <div> (avec dimensions, marges, espacements) en dessous de <h3> et ensuite il déplace ce <div> en fonction des paramètres que tu lui donnes : à 150 px plus en bas, à 200 px plus à gauche.
• puis il dessine la boite du 2me <div> en dessous du 1er <div> tel qu'il a été dessiné à sa place originale (donc comme si le 1er <div> n'avait pas été déplacé). ensuite il déplace le 2me <div> avec tes paramètres : 0 px depuis le haut (mais le haut correspond au bas de <h3> + la hauteur du 1er <div>) et 400 px à gauche.
donc tu te retrouves avec un 2me <div> plus bas que tu ne pensais (la différence correspondant à la hauteur de <h3> + la hauteur du 1er <div>).
pour remédier à ça :
• mets les deux images dans le même <div>, donne une hauteur fixe à ce <div> (à priori la hauteur de la plus grande image) ;
• fais flotter à gauche la première image, elle se placera en haut à gauche du <div> ;
• ajoute des marges en haut et à gauche de la première image pour la placer où tu veux, idem pour la deuxième en ne modifiant que la marge gauche ;
• ajoute des marges en haut et bas du <div> pour le distancier du <h3> et du texte en dessous.
ce n'est pas garanti du premier coup mais avec quelques essais tu devrais t'en sortir.
-;o)
J'ai essayé tes conseils mais c'est toujours pareil, j'ai toujours cet espace entre mon image et le haut du corps...
dans ton style modifie :
et ajoute une classe à l'autre image avec comme style :
mais ne mets rien d'autre !
sous FF les deux images sont centrées horizontalement par rapport à la page et la petite image est centrée verticalement par rapport à la grande, à toi de modifier.
en passant, tu peux remplacer tes classes par des identifiants, ça leur donnera plus de poids, ça fait jamais de mal !
-;o)
/* ligne 75 */
.graduation {
margin:40px 0 60px 0; /* espace entre titre et images / entre images et texte */
}
/* ligne 83 */
.groupe {
display:block;
padding:0 0 0 120px; /* espace entre les deux images */
}
et ajoute une classe à l'autre image avec comme style :
.autre-image {
float:left;
margin:60px 0 0 200px; /* position haute et gauche de la petite image */
}
mais ne mets rien d'autre !
sous FF les deux images sont centrées horizontalement par rapport à la page et la petite image est centrée verticalement par rapport à la grande, à toi de modifier.
en passant, tu peux remplacer tes classes par des identifiants, ça leur donnera plus de poids, ça fait jamais de mal !
-;o)
