[W3C] petit soucis d'alignement d'image..

Version imprimable

bjr.
voilà, je suis en train de paramétrer un livre d'or et j'ai un soucis sur le placement d'une image..

qd la fenêtre de ie ou de mozilla est grande ouverte, l'image est bien placée

http://img66.imageshack.us/img66/1329/im19iv.jpg

mais qd on réduis la fenêtre que c'est sur ie ou mozlla, l'image se décalle vers la droite..

http://img66.imageshack.us/img66/5954/im25mt.jpg

je ne sais pas si c'est par le css que l'on peut régler le problème..

le css de l'image
Code:

1 2 3 4 5 6 7 .mickey { background-image : url(http://perso.wanadoo.fr/bd.petit.format/images/mickey8.gif); background-repeat : no-repeat; width: 140px; height: 200px; position: absolute; top: 3px; left: 710px; }
merci

29/01/2006, 14h01
Linaa

Salut,

C'est parce que tu as mis l'image en position:absolute;
En gros, ton image restera au meme endroit que tu reduises ou non la fenetre du navigateur.

Il faudrait voir (un bout) du code HTML de ta page - la structure globale - ainsi que le CSS.
29/01/2006, 17h45
ilood

Salut,

Comme le dit Linaa, il faudrait que tu fournisses plus d'élèments : code html et css.
A mon avis il faut mettre la class .mickey dans le form, mettre ton form en position relative et adapter la position de .mickey par rapport à celui-ci. (avec un positionnement négatif surement)

merci..
je vauis vous donner un autre exemple ou j'ai le même problème

voilà la page avec la fenêtre entièrement ouverte;

http://img371.imageshack.us/img371/8219/1ouver2qn.jpg

et la page avec la fenêtre réduite;

http://img371.imageshack.us/img371/2421/1fermee0ia.jpg

:arrow: le chien est décallé sur la droite qd la fenêtre est réduite

c'est exactement le problème que je rencontre sur le livre d'or..

code de la page;

le chien je l'ai placé en class=imagechien, et l'image de spirou (l'entête) en class=en_tete..
j'ai essayé d'inverser, de placer les class en id etc mais rien n'y fait..

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>toute la bd</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><LINK 
<meta name="Description" content="spirou, le personnage de toutes les générations créé par robert velter">
<meta name="Keywords" content="spirou,tarzan,rob,vel,robert,velter,fantasio,sheila,akim,rodeo,yuma,kalar,mickey,walt,disney">
<meta name="Revisit-after" content="14 days">
<meta name="Robots" content="all">
 
<link rel="StyleSheet" type="text/css" href="../../bd.css" />
</HEAD>
<BODY>
<DIV class=en_tete></DIV>
<div class=imagechien></div>
<DIV id=menu>
<DIV class=element_menu></DIV>
<DIV class=w3c>
<p align="center"><a onmouseover="return overlib('Accueil du site', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="../../index.html"><b>Accueil</b></a></p>        <p align="center"><a onmouseover="return overlib('Quest ce le petit format.Son histoire', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="../../petitformat/petit_format.html" a &gt;html><b>Le petit format.</b></a></p>        <p align="center"><a onmouseover="return overlib('Le dictionnaire sur le petit format', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="../../mon_dictionnaire/mon_dictionnaire.html" a &gt;html><b>Mon dictionnaire.</b></a></p>        <p align="center"><a onmouseover="return overlib('Toute mes ventes. Pour l\' instant il n\' y a que des albums de disponible.', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="../../mes_ventes/mes_ventes.html" a &gt;html><b>Mes ventes en tout genre.</b></a></p>        <p align="center"><a onmouseover="return overlib('Personnages celèbres qui nous ont fait et qui nous font encore rever:<UL><LI>Walt Disney, son histoire<LI>Burroughs - Tarzan<LI>Marco Nadal - Kalar<LI>Spirou par Rob Vel<LI>Disks - Pim Pam Poum<LI>Le Fantôme</UL>', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="../personnage.html" a &gt;html><b>Personnages c&eacute;l&egrave;bres.</b></a></p>        <p align="center"><a onmouseover="return overlib('Ma deuxième passion, la photo.', CAPTION, 'La ce sont mes photos');" onmouseout="return nd();" href="../../mesphotos/mesphotos.html" a &gt;html><b>Mes Photos.</b></a></p>        <p align="center"><a onmouseover="return overlib('Quelques uns de mes sites préférés', CAPTION, 'Quelques liens à visiter');" onmouseout="return nd();" href="../../mes_liens/mesliens.html" a &gt;html><b>Mes liens favoris.</b></a></p>        <p align="center"><a onmouseover="return overlib('Mes recherches en tout genre', CAPTION, 'Toute mes recherches');" onmouseout="return nd();" href="../../mesrecherches/listerecherche.htm" a &gt;html><b>Mes recherches.</b></a></p>        <p align="center"><a onmouseover="return overlib('Le forum des petites annonces? Passez vos annonces gratuitement. Il suffit de s\'inscrire.', CAPTION, 'Toute la BD en annonces');" onmouseout="return nd();" href="../../forum/forum.html" a &gt;html><b>Recherches et ventes de particulier.</b></a></p>        <p align="center"><a onmouseover="return overlib('Des couvertures de petits formats', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="../../couverturepf/couverturepf.html" a &gt;html><b>Couvertures de petits formats.</b></a></p>        <p align="center"><a onmouseover="return overlib('Des couvertures de livres d\'études, de raretés, d\'albums sur la bd', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="../../couverturesautre/couvertureautre.html" a &gt;target="_blank"><b>Couvertures de livres d'etudes, de raret&eacute; et autres</b></a></p>        <p align="center"><a onmouseover="return overlib('Queslques couvertures de récits complets', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="../../couverture/couverture.html" a &gt;html><b>Couvertures de r&eacute;cits complets.</b></a></p>        <p align="center"><a onmouseover="return overlib('Alors là!', CAPTION, 'qui suis je, je vous laisse le découvrir');" onmouseout="return nd();" href="../../quisuisje/quisuisje.html" a &gt;html><b>Qui suis je?</b></a></p>        <p align="center"><a onmouseover="return overlib('Quelques unes de mes trouvailles', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="../../trouvailles/trouvailles.html" a &gt;html><b>Mes trouvailles</b></a></p>        <p align="center"><a onmouseover="return overlib('Si ce site vous a plu, n\hésitez pas à laisser un petit mot dans mon livre d\'or', CAPTION, 'Mon livre d\'or');" onmouseout="return nd();" href="../../livredor/livredor.html?site=a227042" a &gt;html><b>Mon livre d\'or.</b></a></p>        <p align="center"><a onmouseover="return overlib('Mise à jour du site', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="../../misesajour/miseajour.html"><b>Mise &agrave; jour du site.</b></a></p>        <p align="center"><a onmouseover="return overlib('Adresses utiles', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="../../adresses/adresses_utiles.html"><b>Adresses utiles.</b></a></p>        <p align="center"><a onmouseover="return overlib('Images de fond', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="../../imagedefond/imagedefond.html"><b>Image de fond</b></a></p>        <p align="center"></p></div>
</DIV>
<DIV id=corps>
 
<P class=retrait><SPAN class=gras>ma page sur les bandes dessinées</SPAN> c'est ici</P>
<P>
<HR>
 
<P></P>
<P>
<UL>
  <LI></LI>
</UL>
<P> </P>
</DIV><!***********************************************************************************************************!>
<DIV id=pied_de_page>
hello
<BR></HR></DIV><!***********************************************************************************************************!></BODY></HTML>

le css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
BODY {
	 MARGIN: 20px auto; WIDTH: 757px; HEIGHT: auto
}
#corps {
	BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: black 1px solid; PADDING-LEFT: 5px; BACKGROUND-IMAGE: url(motifcorps2.jpg); MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 5px; MARGIN-LEFT: 120px; BORDER-LEFT: black 1px solid; COLOR: black; PADDING-TOP: 5px; BORDER-BOTTOM: black 1px solid; FONT-FAMILY: "Comic Sans MS", Arial, serif
}
 
.en_tete
{ 
BACKGROUND-IMAGE: url(imagedefond/spirou4.gif); MARGIN-BOTTOM: 10px; WIDTH: 755px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 172px
}
 
 
 
#pied_de_page {
	BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: black 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN-LEFT: 120px; BORDER-LEFT: black 1px solid; COLOR: black; PADDING-TOP: 5px; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #99cccc; TEXT-ALIGN: center
}
.w3c
{ 
background-image: url(index/horizon.jpg); 
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 2px; FLOAT: left;  PADDING-BOTTOM: 1px; BORDER-LEFT: black 1px solid; WIDTH: 104px; PADDING-TOP: 1px; BORDER-BOTTOM: black 1px solid; TEXT-ALIGN: center
} 
.imagechien
{ 
background-image: url(index/image3.gif); 
position: absolute; top: 115px; left: 200px; 
width: 131px; height: 75px; visibility: visible }

si vous pouvez me donner un coup de main
merci

On avait dit un p'tit bout de code :roll:

Tout à l'air fixé, donc ptete qu'en enlevant le auto du margin et mettre en position relative ?
Code:

1 2 3 BODY { MARGIN: 20px; WIDTH: 757px; HEIGHT: auto; }
Code:

1 2 3 4 5 .imagechien { background-image: url(index/image3.gif); position: relative; top: 115px; left: 200px; width: 131px; height: 75px; visibility: visible; }

29/01/2006, 20h48
audax
merci, mais en changeant uniquement le body que tu me donnes
Code:

1 2 3 BODY { MARGIN: 20px; WIDTH: 757px; HEIGHT: auto; }
et en laissant la class image chien comme je l'ai fait
Code:

1 2 3 4 5 .imagechien { background-image: url(index/image3.gif); position: absolute; top: 115px; left: 200px; width: 131px; height: 75px; visibility: visible }
:arrow: ça fonctionnes,
mais dans ce cas, toute la page se fixe sur la gauche et n'est plus centrée.. je l'a voudrais centrée

si je place le code que tu me donnes de imagechien, en position relative

le chien se place sur la position de mon texte en bas..

c'est pas ça.. zut alors..
29/01/2006, 20h54
Phnx

euh si tu met un padding-left sur le div qui prend toute ta page sa pourrait peut etre marcher non ? ( désoler je suis pas super fort en css :oops: )
29/01/2006, 20h59
Linaa

Dans ce cas, essaies d'appliquer un margin auto (même marge) au body et à ta classe (en laissant le position absolute si c'est le resultat attendu).
29/01/2006, 21h49
audax

pas moyen..
le chien se décalle toujours sur la droite qd on réduis la fenêtre

J'ai pas étudié ton code mais je post le code correspondant à l'idée que j'avais énoncé plus haut (positionnement du Mickey)...

html
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <body> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <form action="#" method="post"> <div id="mickey"></div> <label for="nom">Nom : </label><input name="nom" type="text" id="nom"><br> <label for="email">E-mail : </label><input name="email" type="text" id="email"><br> <label for="url">URL : </label><input name="url" type="text" id="url"><br> <label for="ville">Ville : </label><input name="ville" type="text" id="ville"><br> </form> </body>
css
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 form { border: 1px solid #999999; width: 50%; padding: 2em; -moz-border-radius: 10px; /* arrondi du cadre pour Firefox */ position: relative; /* positionnement relatif pour servir de référence au placement de mickey */ } label { float: left; width: 10em; font: 0.8em Arial, Helvetica, sans-serif; } input, label { margin: 5px 0; } #mickey { position: absolute; height: 200px; width: 140px; right: -120px; top: -80px; background: url(http://perso.wanadoo.fr/bd.petit.format/images/mickey8.gif) no-repeat; }
Pour le chien, la méthode est la même. Mettre la classe w3c en relative, placer la div <div class="imagechien"></div> dans le bloc w3c, un soupçon de positionnement absolu, un top de -76px, un left de 0 et ça devrait aller.

Espérons qu'on ai fait avancer le schmilblik... ;)

30/01/2006, 19h43
audax
merci ilood, mais j'en suis encore avec l'image du chien..

j'ai essayé de faire ceci..

l'entête et le chien comme cela..
Code:

1 2 <DIV class=en_tete><P class="chien1"><img src="../../index/image3.gif" ></P> </DIV>
le css

Citation:

.en_tete
{
BACKGROUND-IMAGE: url(imagedefond/spirou4.gif); MARGIN-BOTTOM: 10px; WIDTH: 755px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 172px

}

et le chien
Code:

1 2 3 4 5 .chien1 { TEXT-ALIGN: center; }
alors pour le chien, si je place text-align: center; l'image se situe au centre de l'entête,
je ne vois pas comment lui donner une dimension par rapport à l'entête..

pour la position, il n'y a que text align qui fonctionne, mais je ne peut faire que droute centre et gauche, mais pas en bas de l'entête, l'image du chien se situe que dans l'entête mais en haut..

voir l'image
http://img224.imageshack.us/img224/3452/imchien3id.jpg

et là par contre, qd je réduis la fenêtre, le chien reste bien au centre..
mais je voudrais bien le placer sur le bas de l'entête et vers la gauche..
30/01/2006, 23h12
Linaa

Et en rajoutant à ta classe, une position par rapport au haut de la div (top) et à la gauche (left), et en mettant en position relative ?
31/01/2006, 21h37
audax
excellent.. ça fonctionne mais seulement sur mozilla..
pas sur ie..

sur ie, c'est l'entête qui se décalle sur la droite qd on réduis la fenêtre..
par contre le chien, lui, il ne bouge plus.. il reste bien en place..

je l'ai placé comme cela..
Code:

1 2 3 4 5 .en_tete { BACKGROUND-IMAGE: url(imagedefond/spirou4.gif); MARGIN-BOTTOM: 10px; WIDTH: 755px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 172px; position: relative; top: 3px; left: 0px; }
Code:

1 2 3 4 .chien1 { position: relative; top: 93px; left: 180px; }

ça y est ça fonctionne...
sur ie et mozilla..
je l'ai fait comme cela d'après l'idée de Linaa

dans le html (j'ai mis le chien en div class cette fois ci)

Code:

<DIV class=en_tete><div class=chien1></div></div>

et dans le css, à chaque élément.. une position relative en top et left à 0px, et une dimension que j'indique juste au chien..
et ça fonctionne.. c'est peut-être du bricolage mais bon,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
 
BODY {
	 MARGIN: 20px auto; WIDTH: 757px; HEIGHT: auto
}
 
#corps 
{
	BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: black 1px solid; PADDING-LEFT: 5px; BACKGROUND-IMAGE: url(motifcorps2.jpg); MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 5px; MARGIN-LEFT: 120px; BORDER-LEFT: black 1px solid; COLOR: black; PADDING-TOP: 5px; BORDER-BOTTOM: black 1px solid; FONT-FAMILY: "Comic Sans MS", Arial, serif;
 
position: relative;   top: 0px; left: 0px; 
	}
 
.en_tete
{ 
BACKGROUND-IMAGE: url(imagedefond/spirou4.gif); MARGIN-BOTTOM: 10px; WIDTH: 755px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 172px;
 
position: relative;   top: 0px; left: 0px;
 
}
 
 
 
#pied_de_page {
	BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: black 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN-LEFT: 120px; BORDER-LEFT: black 1px solid; COLOR: black; PADDING-TOP: 5px; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #99cccc; TEXT-ALIGN: center;
position: relative;   top: 0px; left: 0px;
 
	}
.cadretexte
{ 
background-image: url(index/horizon.jpg); 
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 2px; FLOAT: left;  PADDING-BOTTOM: 1px; BORDER-LEFT: black 1px solid; WIDTH: 104px; PADDING-TOP: 1px; BORDER-BOTTOM: black 1px solid; TEXT-ALIGN: center;
 
position: relative;   top: 0px; left: 0px; 
 
} 
 
 
.chien1
{
background-image: url(index/image3.gif); 
position: relative;   top: 30px; left: 150px; 
width: 131px; height: 75px; visibility: visible
 
}