Rechercher : dans
Par :

Css dans firefox - Postionnement d'une image

Dernière réponse le 3 sep 2007 à 14:57:05 Hammo, le 24 aoû 2007 à 16:51:21 
 Signaler ce message aux modérateurs

Bonjour,

Je suis entrain de faire un site et j'ai un problème avec le positionnement css.
Quand je positionne une image avec la balise <span> y a un problème.
Avec internet explorer, l'image est positionnée sans problème, mais avec firefox, le positionnement ne se fait pas.
Par exemple si je fais ça:

<html>
<head></head>
<body>
<SPAN style="position: absolute; top:50 px; left: 300 px;width: 424px; height: 77px">
<img src="image.jpg" width=424 height=77>
</SPAN>
</body>
</html>

Je voudrais que le positionnement se fasse aussi avec firefox.

Est-ce que qqun a la solution?

Merci!

Configuration: Windows XP
Firefox 2.0.0.6

Meilleures réponses pour « css dans firefox Postionnement d'une image » dans :
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Une popup d'information au survol sans Javascript ni CSS VoirParfois, il peut être utile d'afficher des informations supplémentaire au survol du curseur sur une zone de l'écran, par exemple "Cliquez pour agrandir" sur une image, un descriptif sur une abbréviation ou des détails sur un lien. On trouve...
Javascript - Librairies d'effets pour vos images VoirAu gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
Les feuilles de style VoirPropriétés de polices Propriété Valeur Description font-family Police précise (Arial, Times, Verdana) Famille (serif, sans-serif, fantasy, monospace, cursive) Définit un ou plusieurs nom de polices ou de familles de...

1

ecrasatator, le 24 aoû 2007 à 17:05:23

Hé ya pa qe d intelo ici!!!!!!

Configuration: Windows XP
Internet Explorer 6.0

Répondre à ecrasatator

2

LeYaude, le 24 aoû 2007 à 21:02:57

Je suis pas spécialiste du style à l'intérieur des balises, mais ne manquerait-il pas un ";" après le "77px" ?

De plus personnellement je mettrais span en minuscules, mais je ne pense pas que ça change grand chose.

C'est bien la première fois que je vois IE plus doué que FF pour du CSS ! lol

Configuration: Linux
Opera 9.21

Répondre à LeYaude

3

LeYaude, le 24 aoû 2007 à 21:14:39

Je suis pas spécialiste du style à l'intérieur des balises, mais ne manquerait-il pas un ";" après le "77px" ?

De plus personnellement je mettrais span en minuscules, mais je ne pense pas que ça change grand chose.

C'est bien la première fois que je vois IE plus doué que FF pour du CSS ! lol

Configuration: Linux
Opera 9.21

Répondre à LeYaude

4

hammo, le 25 aoû 2007 à 12:32:39

Merci pour ta réponse.
Malheureusement c'est pas ça...

Merci, bonne journée.

Configuration: Windows XP
Internet Explorer 6.0

Répondre à hammo

5

Gihef, le 2 sep 2007 à 16:41:02

Bonjour,

Essaye ça :

<span style="position: absolute; top:50px; left: 300px; width: 424px; height: 77px"> 
  <img src="image.jpg" width="424" height="77" alt="quelque chose"> 
</span>
Tu as remarqué les espaces en moins et les " " ?

Sinon, remplace les span> par des p> ?

--

Répondre à Gihef

6

hammo, le 2 sep 2007 à 21:30:14

Ciao,

Merci pour ta réponse, mais ça n'a malheureusement rien changé.

Merci quand même, bonne soirée.

Configuration: Windows XP
Internet Explorer 6.0

Répondre à hammo

7

Gihef, le 2 sep 2007 à 21:42:58

Pourtant ça marche.

Répondre à Gihef

8

hammo, le 2 sep 2007 à 21:46:07

J'ai alors peut-être pas compris.
Tu peux me donner le code entier html du fichier qui marche?
Comme ça je ferai simplement un copier-coller.

Merci

Configuration: Windows XP
Internet Explorer 6.0

Répondre à hammo

9

Gihef, le 2 sep 2007 à 22:44:20

Le voici.
Avec une variante :

<html> 
<head>
<title>span en absolute</title>
</head> 
<body>
  En haut, le style est dans le <span><br />
  <span style="position: absolute; top:50px; left: 300px; width: 424px; height: 77px; border:1px solid #f00;"> 
    <img src="image.jpg" width="424" height="77" alt="quelque chose"> 
  </span>
  En bas, le style est dans le  <img><br />
  <span> 
    <img style="position: absolute; top:300px; left: 30px; width: 300px; height: 370px; border:1px solid #f00;"
    src="image.jpg" width="300" height="370" alt="quelque chose d'autre"> 
  </span>
</body> 
</html>

Répondre à Gihef

10

hammo, le 3 sep 2007 à 12:41:19

Ah oui, ça marche cette fois :-).
Est-ce que tu peux m'expliquer un peu ton code s.t.p? Et quelle est la différence avec ce que moi j'ai fais?

Je te remercie, bonne journée.

Configuration: Windows XP
Internet Explorer 6.0

Répondre à hammo

11

Gihef, le 3 sep 2007 à 14:54:37

Les différences sont minimes. Mais importantes.
Les espaces servent de séparateurs. Si tu en insères là ou il ne devrait pas y en avoir, ton code signifie autre chose. Autre chose que le navigateur ne sait pas interprêter.

En haut, ton code.
En bas, le mien.

  style="position: absolute; top:50 px; left: 300 px;width: 424px; height: 77px"
  style="position: absolute; top:50px; left: 300px;width: 424px; height: 77px;"
Le HTML aussi obéit à certaines règles.
  src="image.jpg" width=424 height=77
  src="image.jpg" width="424" height="77"
Le “alt” est utile lorsque l'image est absente et pour les visiteurs qui ne pourrait pas voir la page, par exemple.

--

Répondre à Gihef

12

 hammo, le 3 sep 2007 à 14:57:05

Ok, je te remercie beaucoup. Mon problème est résolu.

Bon après-midi, salutations.

Configuration: Windows XP
Internet Explorer 6.0

Répondre à hammo
Collection CommentÇaMarche.net