[résolu] Menu à 45 degre

Bonjour,

Je doit adapter un design en XHTML/CSS
Le problème c'est que chacune des entrées du menu verticale, de ce design, son incliné a 45 degrés

Et je ne vois pas du tout comment faire pour réalisé cela

Voila l'image du menu sans le texte dedans :
http://img242.echo.cx/img242/9117/menu6kv.png

Merci d'avance pour votre aide
Modifié par Absolut_Re (07 May 2005 - 01:57)

Bonsoir,

Y'en a qui ne connaissent pas la simplicité.... enfin c'est un bon défi.

Personellement, je ne vois qu'une solution très laide et qui ne fonctionne que si tu sais exactement combien tu as de liens dans ton menu, et qui necessite un peu de javascript - et javascript c'est très très mal -.
pour un menu à n éléments
Tu dois faire une image qui contient le menu n boutons inactifs, et côte à cote avec celui ci n menus avec chaqu'un un bouton actif (c'est rigolo ca fait une base canonique d'un espace vectoriel - désolé il est tard et je délire tout seul -oui c'est des maths--). Tu définis cette image en background d'une <img> et en src tu lui met un truc genre blank.gif. ensuite tu crée une image map avec les zones en "biais" et tu crés des évenements avec JS pour jouer sur le background-position pour obtenir un décalage du fond faisant ainsi apparaître l'état de menu adéquat sans le moindre chargement.

C'est moche c'est pas clair, mais je ne peux pas faire mieux

Bon courage dans ta quête - du graal - ,
Amicalement,
IlSandor.
Modifié par ilsandor (07 May 2005 - 02:00)

hum... ouin

Ce n'est actuellement pas possible de faire ce genre de menu via CSS.

Faudra utiliser l'élément <map> en inscrivant les liens directement sur l'image :

<div id="imagemap">
 <img src="menu6kv.png" width="158" height="276" usemap="#map1" alt="" />
 <map id="map1" name="map1">
  <area shape="poly" coords="16,120,144,48,144,72,16,148" href="lien1.html" alt="" />
  <area shape="poly" coords="16,150,144,78,144,102,16,178" href="lien2.html" alt="" />
  <area shape="poly" coords="16,180,144,108,144,132,16,208" href="lien3.html" alt="" />
  <area shape="poly" coords="16,210,144,138,144,162,16,238" href="lien4.html" alt="" />
  <area shape="poly" coords="16,240,144,168,144,192,16,268" href="lien5.html" alt="" />
 </map>
</div>

Ne pas oublier de renseigner l'attribut alt="".
L'attribut title="" peut également être utile.

Dans tous les cas, il est prudent de prévoir un menu d'appoint pour les cas où l'élément <map> n'est pas supporté. De plus, l'attribut alt="" n'est pas suffisant pour garantir l'accessibilité de la méthode sur tous les navigateurs/plates-formes si l'image n'est pas chargée.

Personnellement, je ne vois pas de réel intérêt d'avoir des liens à angle. Ceci dit, rien n'empêche l'usage d'images décoratives à angle ou autre...
Modifié par Stephan (05 May 2005 - 05:32)

euh... Ça va ?

Ça fonctionne ? Ça fonctionne pas ? Résolu ?

Désolé de ma réponse tardif

J'ai opté pour le area et ca me conviens a moitié mais je doit absolument me plier au design.

Merci beaucoup pour votre aide

On ne peut pas appliquer du CSS à un AREA ?

Parce qu'il existe une méthode pour n'afficher qu'un bout d'une image de menu (version survolé) dans un bloc.
chez alsacreations
ou chez pompage

Si AERA est considéré par CSS comme un bloc, cela doit pouvoir être jouable.
Mais j'y crois pas trop.

c'est justement cette méthode de sprites que je te décrivait (elle evite des préchargements). Toutefois comme IE ne prends en charge la pseudo classe hover uniquement pour les balises <a> et que a ma connaissance, on ne peux pas "remonter" les noeuds en css (ca serait trop beau), on est obligé de faire ca en java.
IlSandor.