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 :
XHTML :
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)
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)