Défi pour les CSS Master's

Hello,

A priori, la solution la plus simple est d'employer une image de fond :


Et la technique des portes coulissantes pour éviter de perdre du temps au chargement.

Ok, mais après,
imaginons que tu est sur "NOS GAMMES"
Tu a le coté droit de "Qui sommes nous" et le coté gauche de "Contact" sur ton image de fond. On est d'accord ?

Alors, lorsque tu passe (en rollover) sur Qui sommes nous, ou contact, comment fait tu pour que leur coté droit ou gauche, passe en bleu ?

Vois tu le problème ?

Salut,

Il va te falloir superposer tes images et user de la transparence en PNG pour parvenir à ce que tu veux faire.

Maxime L.B. a écrit :
imaginons que tu est sur "NOS GAMMES"
Tu a le coté droit de "Qui sommes nous" et le coté gauche de "Contact" sur ton image de fond. On est d'accord ?

Euh non.
Qu'appelles-tu "côté" ?
Si tu es sur "nos gammes", le fond du lien "nos gammes" passe en bleu. Le reste des liens demeure de couleur beige.

Maxime L.B. a écrit :
Alors, lorsque tu passe (en rollover) sur Qui sommes nous, ou contact, comment fait tu pour que leur coté droit ou gauche, passe en bleu ?

Je ne comprends pas la notion de côté.
L'image de fond englobe les biseaux, tout bêtement.

Je fais un petit test chez moi pour comprendre ta technique.

Je crois que je me suis compliqué la vie.

Je dois être à côté de la plaque parce que je ne vois vraiment pas où est le problème

http://www.alsacreations.com/nimp/menu.html
Modifié par Raphael (09 Nov 2007 - 10:59)

Oui, ca marche dès l'instant ou il existe un espace entre les deux // comme sur ton menu Raphael.
Et puis c'est vrai qu'en fait on voit quasiment pas que c'est le cas, à moins de passer très vite de l'un à l'autre
Modifié par Mikachu (09 Nov 2007 - 11:06)

Ah et bien c'est très chouette que tu ai fait un exemple, je vais pouvoir m'expliquer plus clairement.

Si tu regardes ton menu, lorsque item2 est activé, et que tu passe en rollover sur item3, il y'a un petit espace ?

Et moi je souhaite que tout soit collé. (voir image)

Merci pour ta réponse Mikachu,
mais pourrais tu dévelloper ton idée ?

Maxime L.B. a écrit :
Et moi je souhaite que tout soit collé. (voir image)

Si tu es vraiment sûr d'en avoir l'utilité (ce dont je doute), tu vas effectivement devoir bidouiller avec des bouts d'images et de la transparence PNG (donc bidouille pour Ie6 etc.).

Je me suis lancé ce défi,
j'avais envie de le faire partager avec ceux qui en avaient envie.

Se creuser la tête ensemble, car j'ai trouvé une solution compatible ie6, ie7 et firefox, sans hacks, mais je me disait qu'il y'avait certainement plus simple !

Merci pour vos réponses.

Déja tu vas devoir positionner tes liens pour faire en sorte qu'ils se superposent sur la partie en biais qui séparent deux liens.

Il va falloir que tu crée tes images ou seule la partie qui passe en bleu doit être opaque, le reste doit être en transparence.
Il faut ensuite positionner le background par rapport à l'image de fond lorsque le lien passe en position hover.

Raphael a écrit :
Je dois être à côté de la plaque parce que je ne vois vraiment pas où est le problème

http://www.alsacreations.com/nimp/menu.html

Il y a quand meme des petites différences qui sont que les séparations sont visibles quand la souris ne survole pas, dans l'image fournie dans le premier post, et que les éléments du menu ne font pas tous la meme taille donc pas possible d'utiliser une seule image...

En fait je trouve que ce problème est assez compliqué.

La solution la plus simple serait d'utiliser javascript, sinon je ne vois pas à moins d'utiliser dans la partie HTML beaucoup plus de "div" qu'il n'en faut à mon gout pour créer un menu...

paprès reflexion...

pas forcément besoin de PNG transparent...

Avec deux trois images ca doit pouvoir se faire assez facilement...
Modifié par skywalk3r (09 Nov 2007 - 13:07)

De mon coté je n'ai pas utilisé de png transparent non plus, mais plusieurs images. Ce qui fait que le menu n'est pas extensible a souhait.

Et justement j'aimerais que l'on puisse arriver à trouver une solution pour que le menu soit extensible, tout en conservant le rollover et les séparations.

Voilà ce que donne mon menu : http://www.maximelebreton.com/forumalsa/menu/menu.html

et voici mon code :

Html

<ul id="menu">
			<li class="un"><a href="#">Accueil</a></li>
			<li class="deux"><a href="#">Qui sommes nous ?</a></li>
			<li class="trois"><a href="#">NOS GAMMES</a></li>
			<li class="quatre"><a href="#">Contact</a></li>
</ul>

Css

ul#menu {
	width:485px;
	height:33px;
	display:block;
	position:relative;
}
ul#menu li {
	float:left;
	position:absolute;
	top:0;
}
ul#menu li a {
	display:block;
	width:118px;
	height:24px;
	background-image:url(images/test-menu.png);
	background-position:left top;
	font:bold 10px Verdana, Arial, Helvetica, sans-serif;
	color:#000;
	padding:9px 0 0 0;
	text-align:center;
	text-decoration:none;
}
ul#menu li a:hover {
	background-position:left bottom;
	position:absolute;
	top:0;
	left:0;
	padding:9px 6px 0 0 !important;
	color:#FFF;
}
.un {left:0; z-index:4;}
.un a {width:106px !important; background-image:url(images/menu-un.png) !important;}
.un a:hover {z-index:5 !important;}

.deux {left:106px; z-index:3;}
.deux a {width:152px !important; background-image:url(images/menu-deux.png) !important;}
.deux a:hover {z-index:6 !important;}

.trois {left:258px;	z-index:2;}
.trois a {width:118px !important; background-image:url(images/menu-trois.png) !important;}
.trois a:hover {z-index:7 !important;}

.quatre {left:376px;	z-index:1;}
.quatre a {width:103px !important; background-image:url(images/menu-quatre.png) !important; padding:9px 6px 0 0 !important;}
.quatre a:hover {z-index:8 !important;}

BUG DE Z-INDEX

Il y'avait un bug avec ie6 et ie7 au niveau du z-index.
Internet explorer apparement n'aime pas les multiples z-index sur un rollover.

Il a fallut faire un z-index différent pour chaque élément et chaque action, et inverser le sens du z-index du li par rapport au li a:hover.
Ce qui donne
pour le 4e : li = z-index 1 et li a:hover = z-index:8
pour le 3e : li = z-index 2 et li a:hover = z-index:7
pour le 2e : li = z-index 3 et li a:hover = z-index:6
pour le 1er : li = z-index 4 et li a:hover = z-index:5

étrange non ?

Voilà j'espère que cette correction de bug servira à quelqu'un, car je n'avais trouver aucune réponse dans mes recherches...
Modifié par Maxime L.B. (09 Nov 2007 - 16:00)

En fait je pense qu'il existe une solution pour qu'il soit extensible à souhait... avec deux images GIF...

Mais je pourrais tester ca que ce soir, la je suis pas trop sûr de ce que je dit!

Pas de soucis, j'ai hâte de voir ce que tu va nous proposer !