28172 sujets

CSS et mise en forme, CSS3

Systeme d'onglets

Bonjour,

Je souhaiterai créer une liste coulissante (en gros, j'aimerai pouvoir faire défiler des onglets comme sous FireFox). Pour le défilement je compte utiliser du JavaScript pour modifier la position de ma liste, le problème pour l'instant c'est que je n'arrive pas à cacher ma liste avec une div englobante possédant le style overflow: hidden. Quoi que je fasse, mes puces vont à la ligne une fois qu'il n'y a plus de place sur la ligne, alors que j'aimerai qu'elles overflow et que ce soit caché par le div.

Voilà ce que j'arrive à obtenir :
http://img839.imageshack.us/img839/4926/img1n.jpg

Voilà ce que j'aimerai obtenir :
http://img696.imageshack.us/img696/3128/img2se.jpg

Si quelqu'un pouvait me proposer une solution, cela serait vraiment très aimable de votre part.
Modifié par cristalboy (11 Aug 2010 - 22:19)
Désolé, je pensais que mon explication suffirait. Voilà un code d'exemple :

<html>
<head>
<style>
#vert {
	background: #00FF00;
	width: 500px;
	height: 100px;
}

#vert ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	text-align: left;
}

#vert ul li {
	margin: 0;
	padding: 0;
	display: inline-block;
}



#vert ul li a {
	color: #000000;
	display: block;
	padding: 0px 20px 0px 20px;
	border: 1px solid #000000;
	background: #FF0000;
}
</style>
</head>
<body>
<div id="vert">
	<ul>
		<li><a href="#">puce 1</a></li><li><a href="#">puce 2</a></li><li><a href="#">puce 3</a></li><li><a href="#">puce 4</a></li><li><a href="#">puce 5</a></li><li><a href="#">puce 6</a></li>
	</ul>
</div>
</body>
</html>
Hello,

Tu n'as pas de overflow:hidden dans le code posté, c'est peut-être pour ça Smiley smile .
Essaie de l'ajouter, ainsi que des dimensions de largeur et hauteur à ton <ul> pour voir.
En effet, ça fonctionne en précisant la largeur de <ul>. Le problème, c'est que je ne connais pas cette largeur car ma la liste est dynamique.
Sujet clos
Aller à