[CSS] Déplacement d'une image...

Version imprimable

11/05/2006, 08h46
S~C

[CSS] Déplacement d'une image...
Salut à tous,

Voilà que je codes un site avec deux CSS différents, l'un pour Firefox et l'autre pour IE...

Voici le site en question : http://www.xi-tech.info/mise_en_page/index.php

Avant tout, petit précision, le design n'est pas complet !

Bref, entrons sans attendre le sujet vif :mrgreen:

Testez sous Internet Explorer et remarquez "inscripition" se place à "gauche" du zone identification... Alors qu'il est censé d'être collé avec son voisin nommé "mur-droite", comparez avec Firefox vous comprendrez mieux... Chez Firefox, l'inscripition est à l'endroit d'où il devrait être !

Dans le css, j'ai codé à cette façon pour Internet Explorer :
Code:

1 2 3 4 5 6 7 8 .inscripition { width: 112px; height: 31px; margin-right: -200px; background-image: url(images/inscripition.png); float: right; }
Normalement chez Firefox, cela se règle avec margin-right, mais chez Internet Explorer, il y a un petit souci...

Merci de vos parts !
11/05/2006, 09h03
Swoög

Salut !

essaie d'ajouter un display : block à ton image ;)

ou de jouer sur le padding-right ^^
11/05/2006, 09h06
S~C

Cela ne marche pas avec padding parce qu'il fait "repeter" l'image...

Quant à display: block; je ne le connais pas et j'ai essayé d'ajouter, il ne s'est rien passé !
11/05/2006, 09h10
Swoög

si padding fait répétter l'image, décale le padding-left d'autant... ;)

heu sinon, tu as quelque chose qui pourrait faire que ton div est décalé ?
essaie d'ajouter un peu de margin-top pour le faire descendre un peu et éventuellement passer une autre image en float...

Ou encore de jouer sur le margin-left (m'étonnerais...)
essaie d'ajouter position : relative (ça le motive sur IE des fois)
11/05/2006, 09h23
if_zen

et background-repeat: no-repeat; ?
12/05/2006, 05h09
S~C

J'ai essayé et cela ne marche pas...

J'aimerais bien vous préciser que l'inscripition peut déplacer jusqu'à un moment et il est resté bloqué, je ne peux pas lui déplacer encore "à droite"...

Je pense que ce serait bien s'il y a des volontaires qui voudraient bien regarder mon index.php avec css_ie.css, je suis presque sur que vous pourrez trouver ce qui ne va pas...
12/05/2006, 08h23
Swoög

ça ressemble beaucoup à ce pourquoi je te conseillais le margin-top...
essaie de voir s'il n'y a pas de problème de ce côté, au pire essaie de jouer avec left et right
12/05/2006, 18h41
bavibavi
Hummm j'ai essayé de sauver ta page en local mais c pas gagné lol.

essaye ca :
Code:

1 2 <div style="clear:both;"></div> <div class="inscripition"></div>
13/05/2006, 01h04
S~C

Swoög, je ne maitrise pas trop bien les margin-top, left etc...
Je risque de faire une grosse connerie... :?:oops:

bavibavi, c'est pas mal, cependant, j'ai ajouté clear: both; uniquement dans la css d'IE...

C'est de mieux mais il reste encore un petit souci c'est que sous IE, il est trop "bas" pour mieux comprendre, comparez avec Firefox...

Je n'ai pas réussi à faire approcher "inscripition d'ie" avec le groupe d'identification...

Si quelqu'un sait, merci de me faire savoir... ;)

Au cas d'où vous avez besoin le fichier, je pourrai vous faire un package en zip :)

Bonne soirée les amis, une journée très dure m'attend demain :aie:
13/05/2006, 01h08
Swoög
ouai... donc c'est bien un flottant qui bloquait...

bien, maintenant, pour le faire remonter, tu as trois choix :
1. appliquer le clear : both directement sur le div inscription (je ne suis pas sûr que ce sera suffisant)
2. donner une valeurs négative à margin-top pour le faire remonter
3. mettre position : relative puis donner une valeur négative à top pour le faire remonter (c'est la méthode qui me semble la plus prometteuse ;)
13/05/2006, 02h39
S~C

J'aimerais bien utiliser la méthode 3, mais comme que je n'ai pas trop compris avec relative...

Sinon, j'ai utilisé la méthode 2 margin-top: -19px; et le problème est passé...

Je vous remercie énormement à vous tous...

Je mets résolu, mais Swoög, si tu veux bien m'expliquer pour relative, ce sera sympa :)
13/05/2006, 04h34
Swoög

position est une propriété qui permet de dire comment sont positionné les blocs

il y a plusieurs valeurs possibles : "relative", "absolute", "fixed"
les propriétés de positionnement (top, bottom, left et right) ne sont interprétées que si position a une valeur explicite, et la valeur explicite qui ne trouble pas le flux d'affichage est "relative" ;)
13/05/2006, 05h58
S~C

ha d'accord, merci pour m'avoir expliqué un petit peu :)

je vais me reseigner encore en détail ces propietés...