[Résolu] Menu horizontal sur deux lignes avec des bordures...

Bonjour à toutes et tous,

Je souhaiterais savoir s'il est possible de réaliser, à l'aide de CSS, un menu horizontal sur deux lignes avec des bordures se chevauchant ?

Je cherche à reproduire l'équivalent de 2 tableaux imbriqués dont l'englobant à une couleur de fond donnée et l'englobé un espacement entre les cellules de n pixels avec une couleur de fond autre pour ses cellules.

Voici le code xhtml correspondant au menu :

<ul id="topmenu">
<li><a href="#">MenuItem1</a></li>
<li id="active"><a href="#">MenuItem2</a></li>
<li><a href="#">MenuItem3</a></li>
<li><a href="#">MenuItem4</a></li>
<li><a href="#">MenuItem5</a></li>
<li><a href="#">MenuItem6</a></li>
<li><a href="#">MenuItem7</a></li>
<li><a href="#">MenuItem8</a></li>
</ul>

Chaque élément du menu a une largeur donnée, par exemple 10em, le conteneur ul a une largeur de 40em et le menu doit s'afficher sur deux lignes. Le problème a pour origine les bordures et les différentes interprétations des modèles de boîtes sous IE, Firefox et autres.

J'ai testé différentes techniques (marges négatives, etc. ), mais le résultat obtenu n'est jamais adéquat. Les modèles testés (par exemple ceux que l'on peut trouver sur Listamatic, et notamment http://css.maxdesign.com.au/listamatic/horizontal09.htm) semblent faire peu cas d'un manque de bordure (à droite dans le cas cité ci-dessus).

J'imagine que le problème se pose également lorsqu'il s'agit de représenter des éléments à l'intérieur d'un quadrillage par exemple, sans utiliser de tableaux afin d'en respecter la sémantique.

Existe-il une technique particulière qui permette de faire cela ? Et qui fonctionnerait avec la plupart des navigateurs modernes ?


Cordialement,
Jérôme.

P.S.: Si elle peut sembler futile, ma démarche est justifiée par le fait que je trouve beaucoup plus facile de lire un tel menu de navigation sur deux lignes, qui plus est avec une police agrandie. Les bordures doivent servir à bien en délimiter les éléments.
Modifié par jalsoftware (22 Jul 2005 - 14:29)

Salut

tu sais que tu es une bête rare
Une petite merveille ! Poli, attentif aux règles en vigueur sur la plupart des forums, notament celui ci, pas avare d'efforts et de tests préalable et de recherches, alors pour ça, je te dis MERCI ! et aussi BRAVO ! parceque ça semble extra ordinaire de nos jours

Bon, trève de politesse , passons à ton problème, j'ai pas très bien compris le rendu visuel final que tu souhaitais, j'ai peut être un peu la tête dans les nuages, si tu as un schéma de ce que tu souhaites par exemple, ça pourrait aider et un exemple en ligne de ce que tu as pu tester, ceci nous permettrait de tester directement en ligne sur ton exemple les solutions envisageables. (la plupart de ceux qui aident sur ce forum utilisent l'extension firefox EditCSS qui permet de faire tout ça directement ce qui nous fait gagner du temps et de l'efficacité )

@++

Bonjour et bienvenue jalsoftware,

Voici un exemple de ce que je pense avoir compris de ce que tu souhaites réaliser:

*{margin:0;padding:0;}

ul#topmenu{background:#3f3f3f;display:block;width:632px;list-style:none;height:66px;}

ul#topmenu li{float:left;text-align:center;}

ul#topmenu li a{
display:block;
width:150px;
height:25px;
line-height:25px;
background:#eee;
text-decoration:none;
color:#adc500;
margin:4px;}

ul#topmenu li a#active{background:#adc500;color:#fff;}

J'ai fait porter #active sur le <a>.

Merci Olivier. Je n'ai pas d'exemple en ligne car je teste actuellement en local, mais voilà ce vers quoi je voudrais parvenir:


Merci également à toi Igor, l'exemple que tu donnes me permet de bien faire apparaître le problème: les bordures ne sont pas superposées avec cette technique.

Voici le meilleur résultat que j'ai obtenu jusqu'à présent:
le code xhtml un peu modifié:

<ul id="topmenu">
<li><a href="#" class="nl">Item1</a></li>
<li id="active"><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
<li><a href="#" class="nl">Item5</a></li>
<li><a href="#">Item6</a></li>
<li><a href="#">Item7</a></li>
<li><a href="#">Item8</a></li>
</ul>

et le code css correspondant:

#topmenu {
	width: 400px;
	list-style: none;
	text-align: center;
	border: 0;
	padding: 0;
	margin: 0;
	border-top: 0.1em solid #000000;
}

#topmenu li {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	border: 0;
	width: 25%;
}

#topmenu a {
	display: block;
	padding: 0;
	margin: -0.1em 0 0 0;
	line-height: 2em;
	font-weight: bold;
	background: #FFFFFF;
	border-right: 0.1em solid #000000;
	border-bottom: 0.1em solid #000000;
	border-left: 0;
	border-top: 0.1em solid #000000;
}

#topmenu .nl {
	border-left: 0.1em solid #000000;
}

#topmenu li a:hover {
	background: #EEEEEE;
	color: #DD6900;
}

#topmenu a:active {
	background: #EEEEEE;
	color: #DD6900;
}

#topmenu li#active a {
	background: #EEEEEE;
	color: #DD6900;
}

Problèmes :
- ça n'est pas très propre ;
- ça fonctionne correctement sous Firefox, Mozilla et Opera mais pas sous IE, le a:hover ne fonctionne pas sur toute la boîte et en agrandissant la police de caractère on obtient un "débordement" de bordure haute (ou basse, ça dépend de l'implémentation) de quelques pixels.

Il y a également des problèmes d'affichages sous IE lorsque la largeur affectée à topmenu est exprimée en em (mais ça c'est compréhensible).

Je pense qu'il doit y avoir une solution propre à ce problème, je vais continuer à explorer.

Si quelqu'un sait comment faire, ça m'aiderait à préserver quelques cheveux .

Cordialement,
Jérôme.

Bonjour,

Pour qu'IE prenne en compte le :hover sur toute la surface de la "case", et pas seulement sur le texte du lien, il faut étendre celui-ci à toute la surface.

Tu en as déja fait un élément bloc, il ne manque plus que sa largeur et sa hauteur :

#topmenu a {
display: block;
width: 100%;
height: 100%;
...

ce qui, du coup, ne plaît pas à FF Ces deux propriétés pourraient donc être ajoutées dans une CSS réservée à IE grâce aux commentaires conditionnels.

En revanche, je n'observe pas de débordement de bordures dans IE 6.0 Win en cas d'agrandissement des caractères.

je n'ai pas creusé l'idée de ce menu, mais les fractions très réduites d'em (0.1em) peuvent te poser des problèmes d'arrondi et d'approximation de la valeur finale en px selon les configurations). (Ce qui explique sans doute les débordements observés dans certains cas et pas dans d'autres).
Modifié par Laurent Denis (21 Jul 2005 - 08:45)

Merci Laurent,

J'avais déjà exploré cette voie, c'est celle qui me semblait être la plus "logique". En poursuivant mes recherches dans cette direction, je suis parvenu à résoudre le problème.

#topmenu {
	width: 400px;
	list-style: none;
	text-align: center;
	border: 0;
	padding: 0;
	margin: 0;
	border-top: 1px solid #000000;
}

#topmenu li {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	border: 0;
	width: 25%;
}

#topmenu a {
	display: block;
	padding: 0;
	margin: -1px 0 0 0;
	line-height: 24px;
	font-weight: bold;
	background: #FFFFFF;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 0;
	border-top: 1px solid #000000;
	[b]width: 100% - 1px; /* for IE */
	height: 100%;[/b]}

#topmenu .nl {
	border-left: 1px solid #000000;
}

#topmenu li a:hover {
	background: #E0E0E0;
	color: #DD6900;
}

#topmenu a:active {
	background: #E0E0E0;
	color: #DD6900;
}

#topmenu li#active a {
	background: #E0E0E0;
	color: #DD6900;
}

Désormais, les rendus et les comportements sont identiques sous IE, Firefox, Mozilla, Opera et Konqueror. Je n'ai pas testé sous Safari. Il y a un problème avec Epiphany, l'affichage est correct mais seulement avec certaines tailles de polices.
A voir.

L'affichage en utilisant l'unité em ne fournit pas les résultats escomptés (sous IE en tous les cas), j'ai donc dû utiliser le pixel comme unité de base.

Telle quelle, cette technique permet d'afficher des données (sous certaines conditions) à l'intérieur d'un quadrillage simple sans utiliser de tableaux.

Mais il doit sûrement être possible de rendre ce code plus propre et concis.

Si vous avez des idées...

Cordialement,
Jérôme.