18073 sujets

Questions générales et questions de débutants

[Résolu] Je n'arrive pas à reproduire les portes coulissantes

Pages :
Bonjour à toutes et tous Smiley smile

J'essaie en vain de mettre en place la méthode présentée dans le livre "css 2 Pratique du design web" de Raphaël.

Il y a quelque chose qui doit m'échapper ou que je n'ai pas du tout compris.
Pour ceux qui n'ont pas encore l'ouvrage, le principe est expliqué ici :
http://pompage.net/pompe/portescoulissantes/

le code css :

#galerie_accueil {
	margin:0;
	padding:0;
	text-align:center;
}

#galerie_accueil ul {
	width:600px;
	height:225px;
	background:url(../IMG/deco/banniere_test001.jpg) top left no-repeat;
	margin:0 auto;
	padding:0;
	text-align:center;
	list-style:none;
}

#galerie_accueil li {
	display:inline;
	margin:0;
	padding:0;
}

#galerie_accueil li a{
	display:block;
	width:600px;
	height:40px;
	line-height:40px;
	font-size:1.5em;
	text-decoration:none;
}

#galerie_accueil li a:hover {
	background:url(../IMG/deco/banniere_test001.jpg) top left no-repeat;
}

#lien1 a:hover {
	text-decoration:none;
	background-position:0% -225px;
}

#lien2 a:hover {
	text-decoration:none;
	background-position:0% -265px;
}
... jusqu'à #lien6


le code html :

<div id="galerie_accueil">
  <ul>
    <li><a id="lien1" href="galerie.php3?id_rubrique=13" title="">Nature</a></li>
    <li><a id="lien2" href="galerie.php3?id_rubrique=19" title="">Dans le ciel</a></li>
    <li><a id="lien3" href="galerie.php3?id_rubrique=17" title="">Nos cités</a></li>
    ... Jusqu'à lien6
  </ul>
</div> <!-- fin de galerie_accueil -->


Le triste résultat est ici : http://www.domimage.com (et différent selon le navigateur...)

Pour info, c'est complètement en chantier et loin d'être terminé Smiley langue

Merci d'avance pour votre aide Smiley cligne
Modifié par dominique (19 Oct 2005 - 09:03)
Salut Dominique. J'ai regardé un peu (ton site et le tuto). Que souhaiterais-tu obtenir ? Ou "en quoi ça colle pas ?". A part la couleur du "visited", je n'ai pas de différence entre iE et FF. Et la superposition d'image ne s'agence pas bien, mais pour les deux de la même façon..
le "rollover" sur la bande du haut ne sera pas visible : c'est la même image derrière et devant, je pense...
Edit : je ne sais pas si c'est celà que tu recherches, mais voici un lien pour gérer différents effets de transparences, à combiner avec ton effet de rollover :
http://batraciens.net/css-astuces/transparence-1.htm (à utiliser en bckground du "hover").
Modifié par Macpom (18 Oct 2005 - 12:52)
Bonjour Macpom Smiley smile Merci de te pencher sur mes malheurs Smiley cligne

En fait, l'image est double, en couleur en haut, en sepia en bas et l'idée est d'afficher la partie sepia concernée lors du survol de la zone en couleur (arfff ! pas facile d'être limpide...)

L'image est ici : http://www.domimage.com/banniere_test001.jpg

Je vais étudier ton lien, je ne me suis pas encore préoccupé des histoires de transparence, il est peut être temps...
C'est plus transparent ? hihihihihi !

Bon, super intéressant ton lien... Je ne comprend pas trop à quoi ça peut m'aider...

A savoir, à l'origine le fond est déclaré transparent dans l'exemple, d'ailleurs il faut que je corrige, j'ai enlevé ça pour voir, mais ça n'a rien changé... Je vais quand même corriger.
Bonjour,
au lieu de 
#lien1 a:hover
, c'est pas plutôt 
a#lien1:hover
ou 
#galerie_accueil li #lien1:hover

Modifié par chmel (18 Oct 2005 - 14:53)
Je t'ai donné le lien avant de savoir ce que tu voulais, et j'ai supposé : un carré (image) semi transparent à mettre en bckgrnd de tes hover, par dessus ta photo. Ensuite, je viens de faire quelques essais :
#galerie_accueil li a:hover {
background:url(banniere_test001.jpg);
background-position: left -225px;
}

Ceci te permet de positionner correctement tonimage pour le hover, sur le 1er lien, mais pas sur les suivants : donc : l'id #lien1 ou 2 etc ne prend pas le pas. Essayons avec un !important...
Trouvé ... supprime la partie "#galerie_ patipata..." elle prend la main et ne la laissse plus... Suis sur la voie...
Et yop ! Volià :
#galerie_accueil li a{
display:block;
width:600px;
height:40px;
line-height:40px;
font-size:1.5em;
text-decoration:none;
}

a.lien1:hover {
text-decoration:none;
background:url(banniere_test001.jpg);
background-position: left -225px;
}

a.lien2:hover {
text-decoration:none;
background:url(banniere_test001.jpg);
background-position: left -275px;
}

a.lien3:hover {
text-decoration:none;
background:url(banniere_test001.jpg);
background-position: left -315px;
}

J'ai juste remplacé tes id par des class, et supprimé l'indication #galerre_accueil li a "...
Edit :
avec des id, ça donne ça (tu as en fait une erreur d'écriture des id de liens dans ta css, comme le dit Michel) :
#galerie_accueil li a{
display:block;
width:600px;
height:40px;
line-height:40px;
font-size:1.5em;
text-decoration:none;
}

#lien1:hover {
text-decoration:none;
background:url(banniere_test001.jpg);
background-position: left -225px;
}

#lien2:hover {
text-decoration:none;
background:url(banniere_test001.jpg);
background-position: left -275px;
}

#lien3:hover {
text-decoration:none;
background:url(banniere_test001.jpg);
background-position: left -315px;
}

Modifié par Macpom (18 Oct 2005 - 16:16)
Ok ! super Smiley smile merci à vous deux, ça marche...

Mais il y a un truc qui m'échappe, en fait ça marche à cause de !important qui lui, n'est pas utilisé dans les tutos ???

En fait au départ, j'avais scrupuleusement respecté le tuto (à propos de la syntaxe corrigée par chmel) et ensuite j'ai fait plein d'essais en modifiant les syntaxes... A titre d'exemple, je n'ai pas mis le "!important" sur la seconde ligne du menu et le survol ne fonctionne pas.

Pourtant, ici : http://css.alsacreations.com/xmedia/exemples/roll_over/ ça fonctionne sans le "!important"

Par contre, Raphael, dans l'exemple du livre, utilise le "transparent" sur le background de "ul" et de li a:hover ... Quel est son utilité ? je ne l'ai pas mis.

Pour le soucis Internet Explorer, j'ai trouvé pourquoi ça ne marchait pas depuis ma machine, ici on a une connexion de m**** et ie recharge l'image complète à chaque survol... donc ça fonctionne si on attend que l'image se charge.

Conclusion, il faut faire ce genre de truc avec une image hyper légère.
Dans le code que je te donne, il n'y a plus le "!important"... Et je voulais effectiverment te dire : ton image est lourde. Tu devrais pouvoir la descendre à 70ko sans trop de perte et qu'elle reste propre.
Tu as essayé en faisant :
#galerie_accueil a{
	background:url(../IMG/deco/banniere_test001.jpg) 0 -999em no-repeat;
}

#lien1:hover {
	text-decoration:none;
	background-position:0% -225px;
}

Modifié par chmel (18 Oct 2005 - 16:28)
En fait l'image ne sert qu'aux essais, pour écrire le code... en plus l'effet n'est pas beau Smiley smile

Une fois le code propre, normalement, c'est notre charmante Vero qui devrait m'aider pour la charte graphique et les effets spéciaux... mait chutttttttt !

Pour le "!important", si je l'enlève, ça ne fonctionne plus... ou alors, j'ai raté un épisode ? je vais comparer ton code et le mien...
Modifié par dominique (18 Oct 2005 - 16:25)
Oui chmel Smiley smile

Mais le fait de placer l'image sur "#galerie_accueil a" fait qu'elle se répète sur chaque lien...

Je ne vois quelles différences il peut y avoir entre ton code et le mien, Macpom, qui justifie l'utilisation de "!important"...

J'aime pas ne pas comprendre ! Arffff ! Smiley smile
Macpom a écrit :
Ok Smiley cligne
Pour le "!important", je l'ai enlevé et ça fonctionne aussi bien sous iE que FF en local !


Ben ! pourquoi le second lien, sur lequel j'ai enlevé "!important" ne fonctionne-t'il pas ?
Bonjour à toutes et tous Smiley smile

Bon, je vais mettre un résolu parce-qu'une solution est apportée, merci beaucoup à vous pour votre aide, toutefois, je ne comprend pas tout quand même...

Je vais essayer d'approfondir Smiley smile
dominique a écrit :


Ben ! pourquoi le second lien, sur lequel j'ai enlevé "!important" ne fonctionne-t'il pas ?

ça doit être un problème de priorité d'application des règles CSS. Apparemment, c'est le background(url) pris en héritage de l'ul qui est pris en compte ici :
a#lien2:hover
. Cela doit être à cause du sélecteur d'ID.
En supprimant li dans : 
#galerie_accueil li a:hover {
, on peut se passer de 
!important

Avec un peu de patience, on peux calculer cela
dominique a écrit :
Pour le soucis Internet Explorer, j'ai trouvé pourquoi ça ne marchait pas depuis ma machine, ici on a une connexion de m**** et ie recharge l'image complète à chaque survol.


AS-tu vérifié par le menu/outils/options internet/général/tempory internet files/paramètres, que automatiquement était coché ? Car j'ai eu ce problème longtemps Smiley lol
Pages :
Sujet clos
Aller à