quel genre de menu

[Tabouet]

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

[Ernestine]

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.

[captain_torche]

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 ?

[Tabouet]

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

[captain_torche]

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 ?

[Dudu]

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 ?

[Tabouet]

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

[captain_torche]

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.

[Gorapat]

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.

[Tabouet]

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é 2 Février 2012 par Tabouet

[captain_torche]

Je ne le constate pas encore sur le site, j'imagine que tu n'as pas encore uploadé les modifications ?

[Tabouet]

En effet, pour l'instant j'ai juste fait les modifications en local

[Portekoi]

Bonjour,

Pourquoi pas un menu comme celui-ci?

/>http://www.portekoi.com/menu/

C'était un test que j'avais fait mais je l'utilise dans ma société sans soucis.