[Résolu] Mon menu et inline-block

Peut être n'ai-je pas été clair.
J'ai lu quelque part que inline-block ne marchait qu'avec IE. Déjà, est-ce que cette affirmation est vrai et est-ce que cela peut affecter mon menu sur des autres navigateurs ?

Salut ...
Tu sais, tu as posté ton sujet ce matin, je crois que 5 heures ne sont pas un délai très très long avant de faire un up ...

Sinon, concernant ta question, la déclaration : display:inline-block; n'est effectivement interprêtée que par IE.
Les autres navigateurs ne retiennent que l'instruction : display:block;

Cette déclaration sert à munir les éléments d'un hasLayout pour IE seulement et corriger ainsi un certain nombre de comportements incorrects sur IE. Il s'agit là d'un propriété spécifique à ce navigateur.
Pour plus d'information sur le hasLayout : IE/Win: inline-block and hasLayout
Attention toutefois, si mes souvenirs sont exactes, cette déclaration n'est pas valide CSS 2.0

Salut!

Il y a un justement un nouveau tuto sur Alsa qui traite des menus: c'est par ici. Tu y trouveras peut-être une solution

Par contre, apparement, tu gères toute la navigation à l'aide de javascript?! As-tu déjà essayé de parcourir ton site avec JS désactivé? C'est tout simplement impossible.

C'est un gros handicap car tu exclus non seulement une partie de tes visiteurs, mais aussi les moteurs de recherche qui ne pourront pas indexer tes pages

Et puis, il n'y a pas tellement de pages, et tu disposes de PHP! Des liens directs dans un menu appellé par la fonction "include" de PHP seraient AMHA beaucoup plus appropriés

Tu dois faire erreur car je n'utilises pas javascript justement pour la raison que tu évoques. J'essais de faire que mes sites soient les plus compatibles possible.
J'utilises des include pour mes pages.
Merci pour le lien

Salut!

Arrête-moi si je me trompe, mais ton code html est bien le suivant ?

<ul id="menu">

		<li><a href="#" onclick="document.accueil.submit();">Accueil</a></li>

		<li><a href="#" onclick="document.groupe.submit();">Groupe</a></li>

		<li><a href="#" onclick="document.agenda.submit();">Agenda</a></li>

		<li><a href="#" onclick="document.medias.submit();">Médias</a></li>

		<li><a href="#" onclick="document.galerie.submit();">Galerie</a></li>

		<li><a href="#" onclick="document.presse.submit();">Presse</a></li>

		<li><a href="#" onclick="document.liens.submit();">Liens</a></li>

		<li><a href="#" onclick="document.contact.submit();">Contact</a></li>

	</ul>

Comment fais-tu pour utiliser l'évènement onclick autrement qu'en Javascript ?

Par ailleurs, j'ai visité ton site, et je t'assure qu'on ne peut pas utiliser le menu de navigation en ayant désactivé JS ...

babastutz a écrit :
Ah oui j'avais oublié l'évènement onclick.... Désolé... Je devrais plutôt utiliser de GET alors. Comme ça je supprimerais ce javascript pour de bon

Ça me semble être une très bonne idée

Mais ne néglige pas les bons vieux liens html en dur. Inutile de se casser la tête si tu n'as qu'une dizaine de pages.

PHP peut cependant te simplifier la vie, si tu utilises la fonction include pour intégrer les parties invariables (header, menu de navigation, footer) du site dans les pages.
Modifié par Thomas D. (14 Jan 2007 - 15:03)

En fait ce que je fais c'est que j'ai ma page avec le design principale et que j'inclus avec un include le contenu des différentes pages (Je ne sais pas si j'ai été très clair...)

Je t'ai donné un lien plus haut vers une méthode de construction de ton menu qui devrait t'éviter d'utiliser "inline-block" : menus en CSS.

Tu as déjà le code html tout prêt
Modifié par Thomas D. (15 Jan 2007 - 23:41)

bonsoir,


pour revenir a ta question initiale .

Dans ton code css , le

display:-inline-block;

n'est interpreté que par IE grace au selecteur :

* html ( + une balise, une 'id' ou une 'class' quelquonque.

.
Il ne peut donc n'avoir aucunes incidence dans firefoxe.

Je viens de tester le code , puis ta page .

Je n'ai remarqué aucuns bugs dans firefoxe !? .

Par contre le menu est un "montage" css IE/FF de menu centré , ou du moins c'est le comportement retenu dans ff que je remarque , mais plus dans IE.

pour lui rendre un centrage automatique (et ne plus faire usage de ton div.menu_principal supplementaire et son text-align:center; qui est redescendu dans .container ).

reprise de ton code css pour qu'il ce centre aussi dans IE (page test):
balise del inopnortune (a mon sens) repassé en div .

<!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" lang="fr">
<head>
<title>XHTML 1.0 Strict</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type='text/css'>

/* regles communes */
#menu {
	display:table;
	padding:0; 
	margin:0 auto; 
 	list-style-type:none;
	white-space:nowrap;
}

#menu li {
	display:table-cell;
} 
#menu a {
	width:auto;
	display:block;
	padding:4px 16px;
	color:#000;
	font-weight:bold; 
	background:#fff; 
	border:1px solid #f90; 
	text-decoration:none;
}

#menu a:hover {
	color:#f60; 
	background:#E9E9E9;
}

.container {
	clear:both;
	text-decoration:none;
}


/* regle supplementaires percues par Ie */

* html #menu li {
	zoom:1;
	display:inline;
}

* html .container {
	text-align:center;
	display:block;
}

* html #menu {
	display:inline-block;
}
</style>
</head>
<body>
<div class="container">
	<ul id="menu">
		<li><a href="#" onclick="document.accueil.submit();">Accueil</a></li>
		<li><a href="#" onclick="document.groupe.submit();">Groupe</a></li>
		<li><a href="#" onclick="document.agenda.submit();">Agenda</a></li>
		<li><a href="#" onclick="document.medias.submit();">M&eacute;dias</a></li>
		<li><a href="#" onclick="document.galerie.submit();">Galerie</a></li>
		<li><a href="#" onclick="document.presse.submit();">Presse</a></li>
		<li><a href="#" onclick="document.liens.submit();">Liens</a></li>
		<li><a href="#" onclick="document.contact.submit();">Contact</a></li>
	</ul>
</div>
</body></html>

je t'ai mis les regles css en 2 groupes , comunes et IE .

Celles convenant a IE peuvent etre placées ou appellées en commentaire conditionnel (voir la faq).

Ne copie/Colle pas , sans lire les tutos , cela te sera beaucoup plus benefique , prend le temps de comprendre le fonctionnement des exemples ou ton code .

Cordialement
GC
Modifié par gcyrillus (16 Jan 2007 - 00:34)

Pour finir j'ai suivi le tuto que tu m'as donné Thomas D. et j'ai refait tout mon CSS. Apparemment maintenant il ne par plus au fraises. Merci beaucoup pour votre aide !!

Je mets quand même le code que j'ai fait...

le menu :

<ul id="menu">
	<li><a href="page.php">Accueil</a></li>
	<li><a href="page.php?page=groupe.php">Groupe</a></li>
	<li><a href="page.php?page=agenda.php">Agenda</a></li>
	<li><a href="page.php?page=medias.php">M&eacute;dias</a></li>
	<li><a href="page.php?page=galerie.php">Galerie</a></li>
	<li><a href="page.php?page=presse.php">Presse</a></li>
	<li><a href="page.php?page=liens.php">Liens</a></li>
	<li><a href="page.php?page=contact.php">Contact</a></li>
</ul>

Le CSS :

#menu
{
	list-style:none;
	margin:0px;
	padding:0px;
	text-align:center;
}

#menu li
{
	display:inline;
	margin-right:-4px;
	color:#000;
	font-weight:bold;
	background:#fff;
}

#menu li a
{
	padding:4px 15px;
	background:#fff;
	color:#000;
	border:1px solid #f90;
	line-height:1em;
	text-align:center;
	text-decoration:none;
}

#menu li a:hover, #menu li a:focus, #menu li a:active
{
	color:#f60;
	background:#e9e9e9;
}