Rollovers baladeurs...
Résolu
Sunglasses
Messages postés
112
Date d'inscription
Statut
Membre
Dernière intervention
-
Sunglasses Messages postés 112 Date d'inscription Statut Membre Dernière intervention -
Sunglasses Messages postés 112 Date d'inscription Statut Membre Dernière intervention -
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 :
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...
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...
2 réponses
Bonjour,
Je persiste à penser que des “position:absolute;” sont adaptées.
Mais il faut “position : relative;” le “div#bar”.
Comme ici.
Modifie :
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.
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.
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*
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*
Tu 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.
Ç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.
Ne 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 ;)
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 ;)
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...
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).
width:710px;
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...