[Résolu] Un menu horizontal qui occupe toute la hauteur d'une divisio

Bonjour,

Je cherche à construire un menu horizontal constituté de boutons qui occuperaient toute la hauteur d'une div parente, cela quelque soit l'agrandissement.
Mais pour le moment soit ça dépasse soit c'est trop petit :
http://n0sy.free.fr/text/pb.png
Bien sûr les agrandissements sont exagérés, c'est pour illustrer mon problème.

Le code de ce menu est disponible ici :
http://n0sy.free.fr/text/index.html
Modifié par n0sy (26 Sep 2008 - 15:49)

Bonjour,

Non pas du tout je trouve normal

Si tu grossis les caractères sur ce forum tu verras aussi qu'il y a au bout d'un certains moment un décalage c'est normal c'est fonction de ta résolution et de la taille de l'écran.

A moins que tu veuilles travailler sur un écran d'un mètre de large

Tu peux peut-être réduire de moitié l'espacement de tes liens mais bon je trouve cela nickel

Tu peux aussi jouer sur la boite principale en agissant sur sa taille avec un width:90em en fonction du contenu à moins qu'un pro veuille bien te répondre
Modifié par Gil88 (24 Sep 2008 - 18:26)

En fait, j'aimerai faire une apparence de menu par onglets :

http://n0sy.free.fr/text/imagetab.png

Mais dès le premier petit zoom, la supercherie est démasquée...
Pourquoi la propriété height: 100%; ne marche t-elle pas...

Bonsoir,

1. Virer le height: 2em de div#menu_principal;
2. Lire Éléments flottants qui dépassent de l'élément parent.

Bonne continuation.

Gil88 a écrit :
A moins que tu veuilles travailler sur un écran d'un mètre de large

On ne sait jamais ! Mieux vaut préparer son site à un maximum de possibilités.

Florent V. a écrit :
Lire Éléments flottants qui dépassent de l'élément parent.

Alors à ce que j'ai compris IE a la mauvaise habitude à ce qu'un bloc parent englobe graphiquement les blocs flottants qu'il contient. Hors dans mon cas, c'est exactement ce que je cherche... enfin plutôt à ce que le bloc parent soit pile poil à la hauteur des blocs <li><a> flottants qu'il contient pour avoir cet effet d'onglet, quelque soit le zoom sur la page...

Florent V. a écrit :
Virer le height: 2em de div#menu_principal;

En fait j'ai trouvé une solution je pense, j'ai carrément enlevé cette div#menu-principal, attribuant l'id au bloc ul#menu-principal.
Par contre je n'ai pas compris pourquoi il faudrait retirer la valeur cette hauteur : je voudrai un background-color spécialement pour mon menu. Si je retire cette hauteur, le bloc <ul> à tendance à vouloir devenir une ligne...

Donc j'ai gardé une hauteur à <ul> et j'ai utilisé une fonction qui n'était pas dans mon bouquin Css2 pratique du design web (pourtant fort utile) : overflow: hidden; j'ai obtenu exactement ce que je désirai

Cette fonction est bien interpretée par IE5 Mac, mais comme je n'ai pas de PC sous la main j'aimerai savoir ce que ça donne sous IE Win : J'ai mis le nouveau menu sur la même page que celui qui me posait problème : cf. lien en 1er post.
Par la même occassion : est-ce que mon code est valide et et utilise une bonne sémantique ?
Merci.

oui mais désolé j'ai essayé avec IE6 sur PC mais les caractères ne grossissent pas, ils restent toujours à la même taille

n0sy a écrit :
Par contre je n'ai pas compris pourquoi il faudrait retirer la valeur cette hauteur

Parce que c'est une manière artificielle et, comme tu l'as remarqué en jouant sur la taille du texte, peu précise pour déterminer la hauteur de cet élément. Il est préférable que cette hauteur dépende uniquement du contenu de l'élément.

n0sy a écrit :
Si je retire cette hauteur, le bloc <ul> à tendance à vouloir devenir une ligne...

Ça s'appelle le dépassement des flottants. Cf. l'article que j'ai déjà indiqué.

n0sy a écrit :
Donc j'ai gardé une hauteur à <ul>

À supprimer, donc.

n0sy a écrit :
et j'ai utilisé une fonction qui n'était pas dans mon bouquin Css2 pratique du design web (pourtant fort utile) : overflow: hidden;
L'utilisation de la propriété overflow pour empêcher le dépassement des flottants est justement une des solutions proposées dans l'article sur le dépassement des flottants.

[quote=n0sy]Cette fonction est bien interpretée par IE5 Mac

IE5 Mac est mort (plus distribué par Microsoft depuis le 1er janvier 2006, parts de marché infinitésimales), tu peux le désinstaller de ta machine.

n0sy a écrit :
mais comme je n'ai pas de PC sous la main

Difficile de faire de l'intégration web dans ce cas. Si tu as un macintel, un dual boot avec Windows (ou un Windows virtualisé, ou les deux à la fois...) s'impose, du moins si tu travailles régulièrement sur des sites web.

n0sy a écrit :
est-ce que mon code est valide

Tu peux le vérifier toi-même sur le validateur du W3C.

Florent V. a écrit :
Lire Éléments flottants qui dépassent de l'élément parent.

Effectivement je n'avais pas lu avec assez d'attention cet article, j'ai utilisé la solution du "spacer", c'est la plus compatible :

web.covertprestige.info a écrit :
On peut obliger les éléments flottants à rentrer dans le "flux" de leur élément parent. On utilisera pour cela un "spacer", c'est à dire un élément HTML (n'importe lequel) muni de la propriété CSS clear: both;.

<div id="element_parent">
	<p>Ce paragraphe est flottant à gauche</p>
	<img src="..." alt="Une image flottant à droite" />
	[b]<div style="clear:both;"></div>[/b]
</div>

Merci.

n0sy a écrit :
Effectivement je n'avais pas lu avec assez d'attention cet article, j'ai utilisé la solution du "spacer", c'est la plus compatible :
Merci.

Plutôt qu'un <div> vide, pourquoi ne pas utiliser un petit <hr />...
Et sinon, on peut considérer le problème comme étant [Résolu] ?

Cygnus a écrit :
Plutôt qu'un <div> vide, pourquoi ne pas utiliser un petit <hr />...

Parce que c'est moins pratique et, quitte à placer un élément parasite dans le contenu, autant que cet élément ne soit pas particulièrement porteur de sens (donc DIV ou SPAN).