28172 sujets

CSS et mise en forme, CSS3

Hello, j'ai un petit problème au niveau d'un menu
J'ai fait un site qui se présente en fullsize.
J'ai mis en place un menu, le problème étant qu'au resize mes derniers block de ma ligne de menu repassent à la ligne


#topcolmen2 {
	position:fixed;
	width:100%;
	z-index:600;
	bottom:100px;
	white-space:nowrap;
	}
#topcolmen2 li{margin-right:1px; float:left; width:32%; text-align:center;background-color:#3e3533;padding:5px;opacity:0.7;display: block; 
  display:inline; }
#topcolmen2 li:hover{margin-right:1px; float:left; width:32%; text-align:center;background-color:#3e3533;padding:5px;opacity:0.9;display: block;display:inline;}



<div id="topcolmen2">
  <ul>
    <li id="m1"><a href="#">L'ENTREPRISE</a></li>
    <li id="m2"><a href="#">LA DESIGNER</a></li>
    <li id="m3"><a href="#">REVUE DE PRESSE</a></li>
  </ul>
</div>


Le problème je pense c'est que j'ai des % et des pixels du au margin right
Donc si créer un menu avec 3 items (ou 5 items) je ne peux pas faire le li de 33,33%
Et si je réduit j'ai une marge pas très sympa sur la droite
Enfin si je resize toute la windows les block repassent à la ligne

Merci pour votre aide Smiley smile
Modifié par ubik174 (10 Jun 2011 - 10:52)
Bonjour,

Pour le display des li, ça ne prendra que la dernière valeur (elle écrase les autres valeurs, donc la le display sera "inline")

Sinon c'est plus lié au padding de 5px, quand tu réduis trop la fenêtre les 4% laissés pour les margin/padding ne sont pas suffisant par rapport aux 13px demandés par les padding/margin donc forcément ils prennent plus de place que la largeur de la fenêtre.

Tu pourrais mettre par exemple un min-width pour topcolmen2
Hello
Super merci pour ta réponse, ou en effet je ne devais pas être bien réveillé en supprimant les padding c'est nettement mieux
En tout cas merci pour ta réponse rapide Smiley smile