Rollovers baladeurs...

Résolu

Sunglasses -

Bonjour,

Je suis en pleine création d'un site, composé d'un fond (un tout petit motif mis en mode "repeat"), d'une image principale en plein milieu de la page, et de rollovers, qui ne sont autres que des éléments de l'image principale qui changent un peu d'aspect lorsque que l'on passe dessus.

Voilà l'aspect de la page d'accueil :

>> http://i9.photobucket.com/albums/a64/Miss_Airplane_Girl/prototype.jpg

Les rollovers sont donc placés sur les éléments tels que le micro, le poster, les tasses de café, etc.

Voici le code entier de ma page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>L Coffee Show</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

		<style type="text/css">
			body {
				background: url(images/background.jpg) repeat;
			}
			div#bar {
				background: url(images/index.png) no-repeat center center;
				weigth:710px ;
				height:545px
			}
  			div#micro, div#bouteilles, div#cartes, div#cafe, div#poster, div#magazines {
    			position : absolute;
   	 		}
  			div#micro:hover, div#bouteilles:hover, div#cartes:hover, div#cafe:hover, div#poster:hover, div#magazines:hover {
    			position : absolute;
    		}
			div#micro {
    			width : 103px;
    			height : 68px;
    			top : 197px;
    			left : 398px;
			}
			div#micro:hover {
    			background : url(rollovers/micro.png) top left no-repeat;
			}
			div#bouteilles {
    			width : 158px;
    			height : 149px;
    			top : 65px;
    			left : 140px;
			}
			div#bouteilles:hover {
    			background : url(rollovers/bouteilles.png) top left no-repeat;
			}
			div#cartes {
    			width : 120px;
    			height : 84px;
    			top : 275px;
    			left : 163px;
			}
			div#cartes:hover {
    			background : url(rollovers/cartes.png) top left no-repeat;
			}
			div#cafe {
    			width : 124px;
    			height : 94px;
    			top : 245px;
    			right : 205px;
			}
			div#cafe:hover {
    			background : url(rollovers/cafe.png) top left no-repeat;
			}
			div#poster {
    			width : 138px;
    			height : 187px;
    			top : -10px;
    			left : 336px;
			}
			div#poster:hover {
				background : url(rollovers/poster.png) top left no-repeat;
			}
			div#magazines {
    			width : 187px;
    			height : 120px;
    			bottom : 150px;
    			right : 128px;
			}
			div#magazines:hover {
				background : url(rollovers/magazines.png) top left no-repeat;
			}
		</style>
	</head>
	<body>
		<div id="bar"></div>
		<a href=""><div id="micro"></div></a>
		<a href=""><div id="bouteilles"></div></a>
		<a href=""><div id="cartes"></div></a>
		<a href="http://lcoffeeshowforum.free.fr" target=nw><div id="cafe"></div></a>
		<a href=""><div id="poster"></div></a>
		<a href=""><div id="magazines"></div></a>
	</body>
</html>

Et mon problème, c'est que, comme vous le voyez dans le code, j'ai placé les rollovers de façon intuitive, enentrant des valeurs en pixels devant les données top, bottom, right ou left. Pour les superposer parfaitement aux images de base, j'ai testé en local, avec Firefox.

Seulement, une fois tout bien calé, j'ai testé sous IE, et je les retrouve complètement décalés... :(

Sauriez-vous quel est le problème, et comment y remédier ?

Merci d'avance à ceux qui peuvent m'aider, c'est vraiment une épine dans mon pied...

Configuration: Windows XP
Firefox 2.0.0.6

Afficher la suite

2 réponses

Réponse 1 / 2
s.spark Contributeur
Salut,

Un lien ?
0
1. Sunglasses Auteur
  
  Vers mon site ?
  
  C'est par-là >> http://coffeeshow.free.fr/
  
  L'image principale est assez lourde, elle mettra donc un peu de temps à charger.
  
  Dans Firefox, aucun souci, mais chez IE... aïe !
  
  De plus, je ne sais pas ce que ça donnera dans d'autres navigateurs (Opéra, Safari...), ni avec une autre résolution d'écran...
  
  0
2. s.spark Contributeur
  
  @SunglassesAu delà de ça tu auras d'autre problème, il va falloir repenser ta façon de procéder, voir :
  http://img261.imageshack.us/img261/3413/sanstitreik9.jpg
  
  Ensuite, tu peux très bien positionner un block par rapport à un autre, en utilisent
  
  position: relative;
  
  au lieu de
  
  position: absolute;
  
  Mais là je cherche pourquoi la taille que tu as donné à div#bar n'est pas pris en compte (largeur).
  
  0
3. s.spark Contributeur
  
  @s.sparkOh ba j'ai trouvé une erreur orthographique :p
  
  width:710px;
  
  0
4. Sunglasses Auteur
  
  @s.sparkQuand je change WEIGHT en WIDTH, l'image est automatiquement recalée à gauche, alors que je veux qu'elle soit au centre...
  
  Et quand je change les ABSOLUTE en RELATIVE, les rollovers vont se balader bien plus pas dans la page, un scroll verticale apparaît même...
  
  0
5. s.spark Contributeur
  
  @SunglassesJe sais il faut tout repenser car tu n'as pas pris en compte la résolution de l'écran/taille de la fenetre.
  
  0
Réponse 2 / 2
Gihef Contributeur
Bonjour,

Je persiste à penser que des “position:absolute;” sont adaptées.
Mais il faut “position : relative;” le “div#bar”.
Comme ici.

Modifie :
```
			body {
		               background: url(images/background.jpg) repeat;
		       text-align : center;      
			}
			div#bar {
			position : relative;
			margin : 0 auto;      
				background: url(images/index.png) no-repeat center center;
			      /*	weight:710px ;  */      
				width:710px ;
				height:545px;
			}
```
et
```
	<body>
		<div id="bar">
		      <div id="micro"><a href=""></a></div>
		      <div id="bouteilles"><a href=""></a></div>
		      <div id="cartes"><a href=""></a></div>
		      <div id="cafe"><a href="http://lcoffeeshowforum.free.fr" target=nw></a></div>
		      <div id="poster"><a href=""></a></div>
		      <div id="magazines"><a href=""></a></div>
		/div>
	</body>
```
et revoie tes calculs sur les positions de tes div#_éléments.
Le point de référence est le coin supérieur gauche de “index.png”.

+ Tu peux supprimer toutes les références à div dans tes éléments.
“#bar” fonctionnera aussi bien que “div#bar” et sera plus lisible.
0
1. s.spark Contributeur
  
  Salut,
  
  Je ne vois pas à quoi va servir “position : relative;” pour le “div#bar”, relative par rapport à quoi ? Et si tout le reste est en position absolute ça sera par rapport au coin en haut à gauche de la page, ça n'a ni queu ni tête
  
  +1 pour le #bar, j'ai oublié de l'enlever.
  
  *S'en va réviser les positions*
  
  0
2. Gihef Contributeur
  
  @s.sparkTu te trompes.
  Ça sert et c'est même une précision importante.
  Ce n'est pas relative “par rapport à” mais “pour” quoi.
  
  Vois : http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS
  
  “Lorsqu'il est en position absolue ou fixe, le bloc est dit "positionné". Il est retiré du "flux" du code html : son positionnement sera le même quelle que soit l'emplacement de la balise dans le code du conteneur parent, quel que soit sa fraternité.
  Le bloc est placé par rapport à son parent s'il est lui-même positionné, ou alors par rapport au dernier Ancètre positionné (si aucun Ancètre n'est positionné, il se réfère à la page entière, balise html).”
  
  Et donc, si #bar n'est pas mis en “relative”, c'est la page qui est prise comme référence.
  Et bien sûr…
  
  Teste.
  Exemple :
  Affiche http://gihef.bey.free.fr/CCM/zoom/TheMice.html
  Trouve les zones.
  Agrandis la fenêtre de ton navigateur.
  Les zones ont-elles bougé ?
  
  + Je ne répondais pas à une de tes interventions, je prennais simplement le cours de la discussion et répondais à la question initiale.
  
  0
3. s.spark Contributeur
  
  @GihefEffectivement j'ai fais un grosse méprise sur le positionnement relafif, merci pour ces précisions, j'espère ne pas avoir fait galéré Sunglasses trop longtemps pour rien ...
  
  :o( ---> par se cacher
  
  0
4. Sunglasses Auteur
  
  @s.sparkNe t'en fais pas Spark, le dernier modèle de page que tu m'as donné m'a bien aidé (surtout les cadres jaunes), et j'ai fais les modifications indiquées par Gihef ; et en effet, rien qu'à voir en WYSIWYG, ça me paraît fonctionner...
  
  Je testerai tout ça avec tous les navigateurs que je pourrai, et si ça marche, je reviendrai essayer de poster une solution globale.
  
  En tout cas, merci beaucoup à vous deux ;)
  
  0
5. s.spark Contributeur
  
  @SunglassesLes balise <a> n'ont pas à avoir d'attribut name ;-)
  
  Tu n'as plus à mettre center dans le CSS (qui y 2 fois d'ailleurs) :
  
  background: url(images/index.png) center center no-repeat;
  
  Chouette résultat.
  
  0

Rollovers baladeurs...

2 réponses

Discussions similaires

Newsletters