26909 sujets

CSS et mise en forme, CSS3

Pages :
Bonjour à tous.

J'ai réalisé un menu css qui m'a retourné la tête par sa complexité, et pour qu'il soit compatible ie6, ie7 et firefox.

J'aimerais donc avoir vos idées, solutions pour la réalisation de ce menu, en sachant qu'il n'utilise pas de javascript, et qu'il y'a un rollover (passage en bleu).

Voici l'image du menu à réaliser.

upload/14688-menu.png
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. Smiley cligne
Administrateur
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.
Oui, ca marche dès l'instant ou il existe un espace entre les deux // comme sur ton menu Raphael. Smiley smile
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 Smiley ravi
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)

upload/14688-menu2.png
Salut,

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


Donc je ne vois que çà pour y parvenir : Smiley cligne

Mikachu a écrit :
Il va te falloir superposer tes images et user de la transparence en PNG pour parvenir à ce que tu veux faire. Smiley cligne

Modifié par Mikachu (09 Nov 2007 - 11:14)
Administrateur
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 Smiley ohwell

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!
Désolé de te décevoir mais ce que je voulais faire ne marchera pas sous IE (merci Bill). Du coup je n'ai plus de solution simple et je me demande meme si c'est possible d'avoir des éléments de menu de taille variable.

Sinon il reste la solution de ne pas avoir de barre obliques mais des barres droites, et de demander aux utilisateurs de pencher la tête... solution compatible avec IE6, IE7, FF, Opéra, etc...


Ok je sors --->
Pages :