menu en css.

[time]

bonjour a tous. j'éspére que vous aller pouvoir m'aider.

 

je voudrai arriver a faire un menu de ce genre (là c'est juste une image)

je voudrai qu'il soit réactif. (genre la couleur du texte change quand on passe la souri dessus.

 

pour le moment j'ai réussit à faire ca ( sans les espéce de barre verticales sur la gauche des menus c'est pas top je trouve).

 

mais le probléme c'est que je veux que les menus et sous menus se trouve dans un ovale

 

alors est-ce que quelqu'un peu me donner un coup de main

[Dylav]

Il faut que tu définisses une image contenant ton ovale, qui sera image de fond du bloc dans lequel tu inscriras ton choix de menu. Ce qui, en CSS, donnera quelque chose comme,

 

.choix {
 background-image:url('ton-ovale.gif') no-repeat fixed top left;
 width:100px;
 height:50px;
}

Après, il te reste à ajuster toutes tes dimensions pour que ça le fasse bien.

 

Comme il s'agit d'un menu, c'est une liste non ordonnée, donc les balises appropriées me semblent être <ul> et <li>, ce qui donnerait quelque chose comme,

 

<ul>
<li class="choix"><a href="jump1.html">choix-1</a></li>
... etc ...
</ul>

[fantassin-06]

Salut time et Dylav,

 

Fort des conseils de Dylav sur un autre post je pensais changer la place du <a href="jump1.html">choix-1</a> pour faire que l'ovale soit cliquable plutôt que le texte. ça donnerais :

 

<ul>

<li class="choix"><a href="jump1.html"></a>choix-1</li>

...etc...

</ul>

 

qu'en pensez vous ?

 

De plus Dylav, pour respecter la structure de la page ("le 24 tandem qui apparait sur toute la page"), n'y aurait il pas moyen de rendre les ovales transparents pour qu'il ne masque pas les logos ?

 

fin j'dis peut être des bétises....

[Dylav]

Salut Fantassin,

 

Ta suggestion est à essayer. Si mes souvenirs sont exacts, tu te réfères à une solution où il était demandé de cliquer non pas sur le texte, mais sur une icône qui lui était accolée. Là, il ne s'agit pas exactement de la même chose, puisque le texte est inscrit sur l'image concernée (l'ovale), et non pas à côté.

 

Sous réserve de vérification, primo que ça marche, et secundo que c'est orthodoxe (cf. validateur W3C), j'encapsulerais carrément tout en lien actif,

<ul>
<a href="jump1.html"><li class="choix">choix-1</li></a>
...etc...
</ul>

Voilà qui serait radical : on ne pourrait pas se tromper en cliquant !

 

Quant à l'image de l'ovale, il est bien sûr souhaitable qu'elle soit transparente. C'est en tout cas facile à réaliser avec PhotoFiltre (logiciel freeware de retouche d'images, téléchargeable sur Zébulon),

- tu construis une image dont le fond est un à-plat de couleur uniforme sur lequel tu traces un ovale (on peut le faire avec PhotoFiltre, mais il y a sans doute d'autres moyens plus simples),

- tu charges cette image dans PhotoFiltre, et tu demandes à la sortir au format GIF transparent.

[time]

merci de m'avoir répondu voila ce que j'ai réussit a faire avec vos indications.

 

le problème a été d'arriver a placer le texte dans les ovales, et je n'arrivais pas a redimensionner l'ovale sans redimensionner le block alors j'ai tatoner sous photofiltre, afin d'aariver a trouver la bonne taille.

 

voila ce que ca donne. http://24htandem.site.voila.fr/menus.html

 

alors ultime question et apres promis j'arrete de vos embeter.

quand on regarde le site : (actuellement l'ancienne barre de navig)

http://24htandem.site.voila.fr

il y a une espéce de vieille barre blanche entre la barre de navig et le site en lui meme. vous savez comment je peux arriver a integrer tout caa sans qu'il y est de démarquation??

[Dylav]

Tu sembles arrivé au bout de ton premier problème.

 

Quant à ta « vieille barre blanche » entre ta frame de gauche (« barre de navigation ») et le corps de ton écran, c'est tout simplement l'ascenseur de la barre de navigation, qui apparaît parce que sa hauteur excède la hauteur de la fenêtre. En concevant cette barre de navigation, as-tu pensé que la hauteur utile de la fenêtre est bien plus faible que celle de l'écran, qui comporte en outre, horizontalement,

- en haut la barre de navigation du navigateur,

- en bas la barre d'état du navigateur,

- et en-dessous, la barre de tâche de Windows (le cas échéant).

 

Si ta résolution d'écran est 1024x768, tu peux réduire la hauteur de la barre de navigation du navigateur en appuyant sur la touche F11 (pleine page), et tu verras disparaître l'ascenseur. Il ne restera que la bordure de la frame. Pour la faire disparaître, il te suffit d'ajouter, dans la balise <frame>, l'attribut border="0".

 

Il te faut donc reconcevoir ta barre de navigation sur une hauteur plus faible...

 

Parce que ta remarque me donne à penser que ta résolution est au moins 1280x1024. Il existe encore beaucoup d'internautes qui, comme moi, sont en 1024x768 (donc ascenseur), et même encore des qui utilisent une résolution 800x600 !

 

--- edit ---

Pour revenir à ta nouvelle solution (ovales), tu sembles utiliser les balises <dl>, <dt> et <dd> qui sont dédiées à un glossaire, alors que les balises <ul> et <li> sont dédiées à une énumération, donc parfaites pour un menu. C'est bizarre, c'est la seconde fois en quelques jours que je rencontre cette confusion...

Modifié le 2 avril 2007 par dylav

[time]

en fait je debute tout juste dans les feuilles de style. je ne connaisait pas il y a 10 jours

 

et je doit t'avouer que pour le coup des balises en fait j'ai trouver un truc sur internet, qui donnait le code source pour avoir un menu "réactif"

lien de la source.

 

ok pour la séparation c'est juste la bordure qui était trop épaisse j'avais pas fait gaffe.

 

merci beaucoup pour tout ces renseigenments!

[fantassin-06]

Salut time,

 

Pour débuter je suis passé par ce tuto, j'ai trouvé qu'il était assez pédagogique pour apprendre les bases ( voir ici ) Mais avec alsacréation, j'ai découvert plein de technique intéressante ??? Je trouve ces deux sites assez complémentaire .

 

Sur le code, tu peux créer un fichier ".css" indépendant de ton fichier ".html". ça a l'avantage de ne pas répéter ton code "css" sur toutes les pages....

 

Salut Dylav,

 

j'avais pas vu les choses comme toi, et je me suis rendu compte que j'ai tendance à me compliquer la vie plus que je devrais. Ta solution est beaucoup plus simple. Moi je voyais mettre les titres sur la page, faire un oval transparent dessus et le mettre en élément cliquable.

 

A plus

[time]

bonjour merci pour ce super tuto.

 

alors le site commence a avoir la tete que je veux lui donner.

le probléme j'ai voulu voir si il était au norme et là.... la cata absolument pas. alors je me suis dit aller on va refaire bien...

le probléme:

dans ce que j'ai fait, en fait il y a deux pages: 1 pour le menu, et une autre pour le contenu.

le m'explique:

la premiere page (index.html) renvoi a une page accueil.html dont en voici le code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>les 24 heures tandem</title>
</head>
<body>
<frameset cols ="25%,100%" border="0">
<frame src="navig.html" border="0">
<frame src="page0.html" name="page0">
</frameset>
</body>
</html>

 

et quand je passe la validation sur cette page: 10 erreurs.

j'ai comme l'impression que frame n'ai pas admi.

 

j'ai bien vu sur les tutos, qu'en fait les menus était inséré autrement. mais si je ne veux qu'ouvrir qu'une seule fois le menu je vais comment?

[KewlCat]

Tu utilises le DTD XHTML 1.0 Strict sur une page contenant un frameset, et donc qui devrait utiliser le DTD XHTML 1.0 Frameset ?

http://www.w3.org/TR/xhtml1/dtds.html