Aller au contenu

quel genre de menu


Tabouet

Sujets conseillés

Bonjour à tous,

Je suis en train de faire quelques petites modifications sur mon site perso:

ajout de nouvelles choses, corrections de quelques petites erreurs, optimisation

du temps de chargement des images...etc.

Pour une des parties du site, j'ai du faire un menu sur la gauche de la page, mais

je le trouve un peu trop grand:


/>http://genealexis.fr/cartes-postales/index.php

Si je me tourne vers vous aujourd'hui pour d'abord

pour savoir ce que vous en pensez et aussi pour vous demander si vous n'auriez pas

une petite idée pour améliorer ce menu.

Merci et à bientôt,

Alexis

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

Si on affiche le code source, on voit que pour le bloc "Etats-Unis" du menu, qui contient deux items, on a ceci :

<!-- menu pour USA -->

<div class="Block">
<div class="Block-tl"></div>
<div class="Block-tr"><div></div></div>
<div class="Block-bl"><div></div></div>
<div class="Block-br"><div></div></div>
<div class="Block-tc"><div></div></div>
<div class="Block-bc"><div></div></div>
<div class="Block-cl"><div></div></div>
<div class="Block-cr"><div></div></div>
<div class="Block-cc"></div>
<div class="Block-body">
<div class="BlockHeader">
<div class="header-tag-icon">
<div class="BlockHeader-text">
<span style="font-family: 'Marck Script', cursive;font-size:25px;">Etats-Unis
</div>
</div>
<div class="l"></div>
<div class="r"><div></div></div>
</div>
<div class="BlockContent">
<div class="BlockContent-tl"></div>
<div class="BlockContent-tr"><div></div></div>
<div class="BlockContent-bl"><div></div></div>
<div class="BlockContent-br"><div></div></div>
<div class="BlockContent-tc"><div></div></div>
<div class="BlockContent-bc"><div></div></div>
<div class="BlockContent-cl"><div></div></div>
<div class="BlockContent-cr"><div></div></div>
<div class="BlockContent-cc"></div>
<div class="BlockContent-body">
<ul>
<li><a href="charleroi-pa.php">Charleroi (PA)</a></li>
<li><a href="coalgate.php" title="aller sur la page consacrée à la ville de coalgate dans le comté de coal dans l'oklahoma (états-unis)">Coalgate (OK)</a></li>

</ul>
</div>
</div>
</div>
</div>

Cela fait quand même un sacré paquet de divs pour un petit bloc !

Il est possible de faire un bloc avec bords arrondis, et étirable en largeur et hauteur, avec seulement cinq divs (voire trois en mettant les arrondis tantôt en background tantôt en image flottante). Le code serait ainsi infiniment plus propre et plus facile à reprendre à l'avenir.

Si le bloc n'est étirable qu'en hauteur (largeur fixe), ce qui semble être le cas sur cette page, on peut même descendre à trois divs sans difficulté.

Quant au titre de menu, ici "Etats-Unis", il serait plus judicieux de l'inclure dans une balise H plutôt qu'un div.

Lien vers le commentaire
Partager sur d’autres sites

On peut même faire des arrondis avec UNE seule balise : en CSS3. Certes ça ne sera pas visible dans les navigateurs les plus anciens, mais ça ne gêne pas réellement le confort de lecture.

Pour ce qui est de ce menu, est-il nécessaire qu'il soit développé sur toutes les pages ?

Lien vers le commentaire
Partager sur d’autres sites

Bonsoir,

Pour les DIV en grand nombre, j'ai une explication : J'ai réalisé la charte graphique avec Artisteer (chose que je regrette).

J'ai besoin d'afficher le menu sur toutes les pages.

J'ai entendu parler de cette balise CSS3, mais je sais pas si c'est une bonne idée de faire un site en CSS3, j'ai encore beaucoup

de visiteurs qui utilisent des vieux navigateurs comme Firefox 3 ou IE7.

A bientôt,

Alexis

Lien vers le commentaire
Partager sur d’autres sites

Tu peux très bien utiliser du CSS3, tant que tu n'abuses pas de fonctionnalités exotiques.

Pour ce qui est de la bordure arrondie, ce n'est pas un drame si elle n'est pas implémentée dans le navigateur de l'utilisateur.

Pour ce qui est du menu, penses-tu que le nombre de pages va s'étoffer ?

Lien vers le commentaire
Partager sur d’autres sites

Salut

J'ai entendu parler de cette balise CSS3!

Non non.

Tu ne risques pas d'avoir "entendu parler [d'une] balise CSS3"... puisque le terme de "balise" a trait au langage HTML et n'existe pas en langage CSS.

En CSS, on parle de propriétés, de règles, etc.

Le balisage, c'est en HTML.

Mais reparlons de nos bords arrondis.

Les internautes qui utlisent des navigateurs modernes et à jour verront les arrondis. Les autres, ceux qui utlisent des navigateurs issus d'un autre âge (parfois contre leur gré, notamment en entreprise, certes) les verront carrés.

Bon, où est le drame ? ;)

Lien vers le commentaire
Partager sur d’autres sites

Bonjour à tous !

Pour ce qui est du menu, penses-tu que le nombre de pages va s'étoffer ?

Oui. C'est pour ça que je cherche à changer ce menu.

Par exemple, 2 nouvelles villes vont être ajoutées dans les semaines qui viennent.

Non non.

Tu ne risques pas d'avoir "entendu parler [d'une] balise CSS3"... puisque le terme de "balise" a trait au langage HTML et n'existe pas en langage CSS.

En CSS, on parle de propriétés, de règles, etc.

Le balisage, c'est en HTML.

Désolé... mes doigts ont tapé trop vite :-(

Bon, où est le drame ? ;)

ça sera moins joli chez eux.

En imaginant que je modifie mon code avec moins de DIV et en y ajoutant un peu de CSS3, il sera plus "propre" mais le

menu sera toujours aussi grand.

Peut-être avec un menu en accordéon sur ce principe ?
/>http://www.alsacreations.com/xmedia/tuto/exemples/accordeon/menu_demo.html

A bientôt,

Alexis

Lien vers le commentaire
Partager sur d’autres sites

C'est ce que j'allais te proposer.

En fait, il y a deux solutions :

- Ledit menu accordéon

- Ou ne mettre par défaut que les noms des pays. Il faut créer une page pour chacun de ces pays, et sur la page de ce pays (Et de toutes les villes du pays), mettre dans le menu les pages des villes.

Lien vers le commentaire
Partager sur d’autres sites

Je trouve dommage de couper le rubriquage du menu avec de la pub.

Sinon, le sujet est ambitieux, beaucoup de contenus déjà en place et à venir.

Si c'est ta passion, bravo.

Lien vers le commentaire
Partager sur d’autres sites

La pub a l'avantage de rembourser mon hébergement...

J'ai enlevé tous les div, pour les remplacer par du CSS3.

Presque 200 lignes en moins dans le code ^^

Modifié par Tabouet
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...