Aligner blocs horizontal + overflow

Bonjour,

je galère depuis quelques heures sur un problème sans doute facile à régler mais je connais très peu le CSS…

Pour le HTML, J'ai un table avec deux colonnes, colonne de gauche une image, colonne de droite une liste <ul> (dans un div#monDiv).

Je souhaite que mes <li> soient alignés horizontalement et qu'on ne voit que le premier élément de liste.
En fait je veux utiliser un plugin jQuery qui requiert cette disposition horizontale pour pouvoir scroller horizontalement le div#monDiv…

Quelqu'un pourrait m'aider s'il vous plait, je ne m'en sort pas !

Bonsoir,

Les tableaux il faut oublier, c'est obsolète pour ce genre de pratique ; on ne les utilise plus que pour l'affichage de données comme des statistiques (sauf cas extrêmement rares). Voici un code qui répond, je crois, à vos attentes :

HTML :

<div id="conteneur">
	<div id="gauche"><img src="image.jpg" alt="" /></div>
	<div id="droite">
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
	<div class="clear"></div>
</div>

CSS :

body, ul {
	margin: 0;
	padding: 0;
}

body {
	font-family: arial, verdana, sans-serif;
}

#conteneur {
	width: 380px;
	margin: 10px;
	background-color: #6b6b6b;
	border: solid 2px #6b6b6b;
	text-align: center;
}

#gauche, #droite {
	min-height: 160px;
	padding: 20px;
	float: left;
}

#gauche {
	width: 200px;
	background-color: #efefef;
}

#droite {
	width: 100px;
	position: relative;
	overflow: hidden;
	background-color: #6b6b6b;
	color: #fff;
}

ul {
	width: 5000px;
	position: absolute;
	list-style-type: none;
	font-size: 18px;
	font-weight: bold;
}

ul li {
	width: 88px;
	padding: 5px;
	float: left;
	border: dotted 1px #efefef;
}

ul li + li {
	margin-left: 20px;
}

div.clear {
	clear: both;
}

Voici l'image pour tester le bout de code ci-dessus :


Explications :

- On a un conteneur dans lequel on fait flotter (propriété CSS float) deux <div> pour qu'elles soient positionnées l'une à côté de l'autre (on prend soin de rajouter une <div> portant la déclaration clear: both; dans le CSS afin d'arrêter le comportement flottant (voir ce lien pour de plus amples informations).

- La <div> de droite possède une largeur de 100px. On a donné volontairement à son enfant <ul> une très grande largeur : c'est dans cet élément qu'on place tous les items à faire "scroller" avec le plugin JQuery. Du coup on masque ce qui dépasse de la <div> d'ID "droite" en appliquant la déclaration overflow: hidden; à cette dernière.

- On confère aux éléments <li> une largeur de 88px, à laquelle on ajoute un padding de 5px (donc 10px supplémentaires en largeur) et une bordure d'1px (donc 2px supplémentaires en largeur) : 88 + 10 + 2 = 100px. Chaque élément de la liste mesurant 100px, seul l'un d'eux pourra être visible à un temps donné dans la <div> parente car elle possède elle aussi une largeur de 100px.
Modifié par jeremy-p (02 Nov 2011 - 21:50)