28172 sujets

CSS et mise en forme, CSS3

Menu et retour à la ligne[Résolu]

Bonjour et merci d'avance pour votre aide

J'ai un petit problème avec un menu. Lors d'un zoom, le dernier élément de mon menu passe à la ligne, ce qui déforme totalement la page. J'ai essayé d'utiliser les méthodes "modernes" (inline-block). J'ai essayé de limiter la hauteur pour éviter un retour à la ligne, le menu sort alors de la boite avec un overflow hidden cela fonctionne mais c'est très moche.
Si quelqu'un peut m'aider cela serait sympa.



<nav>
	<ul>
		<li><a href="californien.html">massage Californien</a></li>
		<li><a href="asiatique.html">massage asiatique du pied</a></li>
		<li><a href="suedois.html">massage suédois</a></li>
		<li><a href="detente.html">massage détente</a></li>
		<li><a href="lipo.html">lipomassage</a></li>
		<li><a href="pilates.html">gym Pilates</a></li>
		<li><a href="boncad.html">bons cadeaux</a></li>
	</ul>
</nav>



ul
{
	margin-left: auto;
	margin-right : auto;
	text-align :center;
	
}	
li
{
	
	display: inline-block;
	padding: 0.8%;
	margin-left: 0.3%;
	margin-right : 0.3%;
	text-align :center;
	background-color : rgb(221,221,255);
	border-radius : 15px;
}
a
{
	font-size : 1.5em;
	text-decoration: none;
}
a:hover
{
	color:black;
}

Modifié par dav74 (08 Jul 2011 - 14:08)
Merci pour ta réponse, j'ai toujours un retour à la ligne en cas de zoom (moins moche qu'avant !). En cas de zoom, je voudrai qu'une partie du menu sorte de l'écran. Pour l'instant, mon menu reste à l'écran mais se place sur plusieurs lignes.
dav74 a écrit :
En cas de zoom, je voudrai qu'une partie du menu sorte de l'écran.

Dans ce cas c'est plutôt du display:table-cell qu'il te faudrait, pas du display:inline-block.
Bonjour à toutes et à tous,

Oh que ce conseil est "moche" !

pour ma part j'aurai fait : 
white-space : nowrap;
que j'aurai introduit au niveau du UL du code CSS, sans supprimer le
display : inline-block;
@+
Modifié par Artemus24 (08 Jul 2011 - 12:42)
Merci beaucoup pour cette autre solution que je vais adopter, le table-cell n'est pas reconnu par ie7.
Merci à tous, ce site est génial !
Bonjour à toutes et à tous,

pas de quoi !

Si ton problème est terminé, passe cette discussion à [résolu] !

@+
Artemus24 a écrit :
Oh que ce conseil est "moche" !

Ah? Mise à part la compatibilité avec Papy IE7, qu'y a-t-il de laid dans une utilisation relativement pertinente de display:table-cell? Critères concrets bienvenus. Smiley smile

Artemus24 a écrit :
pour ma part j'aurai fait : white-space : nowrap; que j'aurai introduit au niveau du UL du code CSS, sans supprimer ledisplay : inline-block;

C'est pas mal non plus.
Sujet clos
Aller à