28173 sujets

CSS et mise en forme, CSS3

Bonjour. Je débute en CSS2 et je coince sur un problème qui, de prime abord, parait pourtant assez simple. J'ai une image et je de chaque coté j'aimerais y mettre une liste "collée" contre cette image. Le tout doit être centré dans la page. Pour faire plus claire, voici ce que j'aimerai obtenir.

http://www.web-perso.info/download/resultat_final.png

Ce résultat je l'ai obtenu en bidouillant, mais au final, le code CSS n'est pas très beau ...
J'ai dut mettre une marge en dure à gauche de l'image pour imiter le retrait de la liste de droite que je n'arrive pas à supprimer.
J'ai été obligé de donne une taille fixe à tous les blocs, puis une taille au conteneur afin de le centrer au milieu de la page.
Encore une fois, le code sera plus explicite.

CCS :
.list-left li{
             text-align:left;
	float:left;
	width:300px;
	list-style-type:none;
	line-height:18px;
	padding-bottom:8px;
}

.list-right li{
	text-align:right;
	float:left;
	width:300px;
	list-style-type:none;
	line-height:18px;
	padding-bottom:8px;
}

.preview {
	float:left;
	margin-left:40px;
	border: 2px solid #000000;
}

#conteneur {
	width:900px;
	margin-left:auto;
	margin-right:auto;
}


XHTML :
<h3>Products</h3>
		<div id="conteneur">
			<ul class="list-left">	
					<li><a href="#">blablablablablablablabla</a></li>	
					<li><a href="#">blablablabla</a></li>
					<li><a href="#">blablablablabla</a></li>
					<li><a href="#">blablabla</a></li>
					<li><a href="#">blablablablablabla</a></li>
			</ul>

			<img src="images/preview_empty.png" alt="Preview" class="preview" />

			<ul class="list-right">	
					<li><a href="#">blablablablablablablabla</a></li>	
					<li><a href="#">blablablabla</a></li>
					<li><a href="#">blablablablabla</a></li>
					<li><a href="#">blablabla</a></li>
					<li><a href="#">blablablablablabla</a></li>
				</ul>
		</div>


Pourriez-vous m'aider à rendre tout cela un peu plus ... propre ? Car je suppose qu'il existe une solution moins tiré par les cheveux mais impossible de mettre la main dessus.

Merci d'avance.
Modifié par Artichaut (23 Aug 2006 - 01:39)
Je suis un cretin ...
Concernant mon problème de retrait de la liste, il suffit de faire mettre padding-left et margin-left à 0. J'étais pourtant sûr d'avoir déjà essayé.

Il ne me reste donc plus qu'a réussir à centrer correctement les 3 blocs au milieu de la page.