Programmation » CSS Absolute/ Relative Position
CSS Absolute/ Relative Position
Publié le 21/08/2006 @ 06:40:10,
Par MololoSalut à tous, je suis un petit nouveau et je m'y connais pas vraiment en informatique. Enfin, ça fait près de 6 mois que je me suis mis à la créatio d'un site.
Mon site est fait à base de Tableaux dont le principal est centré.
Mon problème est le suivant:
Je souhaite utilité un <Div> pour aller placer une image en superposition à un endroit bien précis de ma page...
Alors je peux donner la position par exemple Top 120 et Left 300 mais si je change de résolution, mon image tombe à la mauvaise place sur ma page...
Bref, comment faire?
Merci pour votre aide.
Mon site est fait à base de Tableaux dont le principal est centré.
Mon problème est le suivant:
Je souhaite utilité un <Div> pour aller placer une image en superposition à un endroit bien précis de ma page...
Alors je peux donner la position par exemple Top 120 et Left 300 mais si je change de résolution, mon image tombe à la mauvaise place sur ma page...
Bref, comment faire?
Merci pour votre aide.
CSS Absolute/ Relative Position
Publié le 21/08/2006 @ 07:45:34,
Par MololoRe-
Benh voilà , en jouant un peu j'ai trouvé une petite solution (je ne sais pas si c'est dans la règle de l'art) mais voilà comment j'ai fait pour ceux que ça intéresse...
J'ai placé mon image sous le tableau au-dessus duquel je souhaite faire apparaître mon image. <IMG CLASS="mololo" SRC="image.gif">
Et dans le HEAD :
<style type="text/css">
img.mololo
{
position:relative;
left:475px;
top:-45px
}
</style>
Benh voilà , en jouant un peu j'ai trouvé une petite solution (je ne sais pas si c'est dans la règle de l'art) mais voilà comment j'ai fait pour ceux que ça intéresse...
J'ai placé mon image sous le tableau au-dessus duquel je souhaite faire apparaître mon image. <IMG CLASS="mololo" SRC="image.gif">
Et dans le HEAD :
<style type="text/css">
img.mololo
{
position:relative;
left:475px;
top:-45px
}
</style>
CSS Absolute/ Relative Position
Publié le 21/08/2006 @ 08:04:49,
Par MololoZut, ça marche moyen en fait.
Mon image se met efectivement correctement là où je souhaitais mais du coup, le reste de mon contenu est décallé vers le bas et j'ai un gros blanc à l'endroit où j'ai inséré le code dans le body.
Help~~
Mon image se met efectivement correctement là où je souhaitais mais du coup, le reste de mon contenu est décallé vers le bas et j'ai un gros blanc à l'endroit où j'ai inséré le code dans le body.
Help~~
CSS Absolute/ Relative Position
Publié le 21/08/2006 @ 09:11:16,
Par rfrLa position relative n'est qu'un déplacement dans le flow normal de positionnement des éléments. C'est donc normal que les autres éléments soient déplacés. Ton ami est donc le positionnement absolute.
To die is a time consuming activity, it often takes a lifetime (but some are faster than others ... though)
CSS Absolute/ Relative Position
Publié le 21/08/2006 @ 09:30:55,
Par MololoMerci rfr, mais avec l'absolu, ça pose problème car mes tableaux sont centrés. --> Problèmes si mes utilisateurs n'ont pas tous la même config écran que moi.
Mon prob est que j'ai commencé mon site sans connaître les CSS et que si j'abandonne les tableaux maintenant... C'est trop de boulot.
Mon prob est que j'ai commencé mon site sans connaître les CSS et que si j'abandonne les tableaux maintenant... C'est trop de boulot.
CSS Absolute/ Relative Position
Publié le 21/08/2006 @ 09:37:03,
Par rfrregarde aussi du coté du paramètre "flow", peut-être trouvera tu ton bonheur. Tu n'as pas un screenshot de ce que tu voudrais et de ce que tu obtiens pour le moment?
To die is a time consuming activity, it often takes a lifetime (but some are faster than others ... though)
CSS Absolute/ Relative Position
Publié le 21/08/2006 @ 09:50:05,
Par MololoOuille, ce coup-ci, ça a l'air de marcher...
<style type="text/css">
<!--
#pos{
position:relative;
}
#pos div{
position:absolute;
top:-450px;
left:245px;
width:45px;
height:34px;
}
body div#Head ul#ChannelMenuItems li#pos a span{
color:#F30;
}
-->
</style>
<div id="pos"><div><a href="http://www.mololo.com"><img src="mololo.gif" width="45" height="34" alt="info"/></a></div></div>
Incroyable, non?
<style type="text/css">
<!--
#pos{
position:relative;
}
#pos div{
position:absolute;
top:-450px;
left:245px;
width:45px;
height:34px;
}
body div#Head ul#ChannelMenuItems li#pos a span{
color:#F30;
}
-->
</style>
<div id="pos"><div><a href="http://www.mololo.com"><img src="mololo.gif" width="45" height="34" alt="info"/></a></div></div>
Incroyable, non?