faire ce menu en XHTML/Css

Version imprimable

14/06/2012, 16h48
mouss4rs

faire ce menu en XHTML/Css

Bonjour,

Sachant que je ne suis pas un expert en xhtml/Css, j'aimerais savoir s'il est possible de faire ce type de menu (voir image) ?

Je dois avoué que je ne sais pas comment m'y prendre...:roll::roll::roll::roll:

Petite précision:
les cercles devront-être cliquable ainsi que les Intitulé.
14/06/2012, 17h37
Muchos

C'est tout à fait faisable… en réutilisant ton image, par exemple, mais tout à fait faisable :mrgreen:

La balise <area> peut être une piste (mais c'est du HTML5).

Sinon, j'imagine qu'en svg, c'est possible.
14/06/2012, 18h14
Torgar

<area></area> est aussi valide en HTML 4 en passant ;)

Après on peut éventuellement le faire avec <canvas></canvas> (HTML 5 pour le coup) et un poil de javascript.
14/06/2012, 18h52
Muchos

Citation:

<area></area> est aussi valide en HTML 4 en passant

Anéfé ! Et donc en xhtml aussi :)

Sinon, plusieurs images placées avec css peuvent faire l'affaire. Mais j'imagine que la question implique « sans image » !

Bonjour,
avec un peu de mise en place et des ronds via border-radius, c'est jouable...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML>
<html lang="fr">
<head>
<title>[...]</title>
<style type="text/css">
#rond{
  height:40px;
  width:40px;
  border:1px solid red;
  border-radius:20px;
}
#rond:hover{
  background-color:yellow;
}
</style>
</head>
<body>
<div id="rond"></div>
</body>
</html>

15/06/2012, 09h11
mouss4rs

Non pas de HTML 5.
la societé dans laquel je travaille utilise la version 7 d'IE.
Sachant qu'IE7 ne gère pas le HTML5, je n'utiliserais pas de html5.

pour nosmoking: cela m'affiche un carré a trait rouge sur fond blanc.
je ne vois pas de rond ??
15/06/2012, 09h18
Torgar

Parce qu'IE7 ne prend pas en charge la propriété CSS border-radius.

La seule solution est donc de faire un map avec <area></area>
15/06/2012, 10h52
NoSmoking

Citation:

Envoyé par mouss4rs

Non pas de HTML 5.

:nono: pas de CSS3, la solution passe donc effectivement par une MAP comme la précisé Torgar.
15/06/2012, 14h12
Muchos

Ou alors que sa boîte upgrade son navigateur :roll:

Citation:

Envoyé par mouss4rs

la societé dans laquel je travaille utilise la version 7 d'IE.

Fuseau horaire GMT +2. Il est actuellement 15h55.