Bonjour,
Je voulais juste partager la solution que j'ai trouvée grâce à un excellent article d'Alsacréations (http://www.alsacreations.com/article/lire/1200-10-techniques-avancees-et-secrets-de-css2.html) qui m'a mis la puce à l'oreille.
Celà va peut-être paraître évident à certains mais comme j'ai cherché quelques heures et lu quelques dizaines de posts et d'articles, j'immagine que ça peut servir à d'autres que moi et réduire quelque peu le temps de recherche pour ceux qui auraient le même problème.
Le problème initial :
- j'ai tout mon design en fluide (tailles proportionnelles)
- une liste <ul> dans une <div> qui doit servir de menu horizontal
- j'ai mis les <li> en {display:inline-table} et un {min-width: 800px} sur le div pour éviter de le réduire trop
-> c'est parfait partout sauf sous IE (évidement) qui m'envoie le dernier <li> sous les autres dès que je réduis ma fenêtre en dessous de 800px de large (au lieu de le faire déborder et de générer une barre de défilement comme je le souhaitais)
La solution :
- {white-space: nowrap} sur le <ul> empêche le retour à la ligne des <li>
Modifié par Ochiaberi (21 Sep 2012 - 11:47)
Je voulais juste partager la solution que j'ai trouvée grâce à un excellent article d'Alsacréations (http://www.alsacreations.com/article/lire/1200-10-techniques-avancees-et-secrets-de-css2.html) qui m'a mis la puce à l'oreille.
Celà va peut-être paraître évident à certains mais comme j'ai cherché quelques heures et lu quelques dizaines de posts et d'articles, j'immagine que ça peut servir à d'autres que moi et réduire quelque peu le temps de recherche pour ceux qui auraient le même problème.
Le problème initial :
- j'ai tout mon design en fluide (tailles proportionnelles)
- une liste <ul> dans une <div> qui doit servir de menu horizontal
- j'ai mis les <li> en {display:inline-table} et un {min-width: 800px} sur le div pour éviter de le réduire trop
-> c'est parfait partout sauf sous IE (évidement) qui m'envoie le dernier <li> sous les autres dès que je réduis ma fenêtre en dessous de 800px de large (au lieu de le faire déborder et de générer une barre de défilement comme je le souhaitais)
La solution :
- {white-space: nowrap} sur le <ul> empêche le retour à la ligne des <li>
Modifié par Ochiaberi (21 Sep 2012 - 11:47)