28172 sujets

CSS et mise en forme, CSS3

Alignement horizontal d'éléments de liste

Bonsoir à tous !

Je rencontre un problème assez mystérieux, qui apparait même avec un minimum de css, par exemple :

<html>
<head>
</head>
<body>
<div style="float: left; width: 100px; height: 100px; background: #CCC; margin: 0 10px 10px 0"></div><h3>This is header 3</h3>
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
</ul>
</body>
</html>


Où les éléments de liste ne se trouvent pas correctement (pas suffisament, en fait) repoussés vers la droite par le bloc flottant de gauche. Ci-dessous l'illustration du problème dans ce que j'essaye de faire au final, avec une balise img :

http://www.gconfs.org/gc3-beta/bug-ul.png

L'image en question à juste le style suivant :

img {
  border: 0;
  margin: 0 1em 0.5em 0;
  padding: 3px;
  float: left;
  background: #FFF;
  border: 1px solid #AAA;
}


Les balises ul et li n'ont pas de style particulier, quand à elles. Une idée du problème ?

Merci d'avance Smiley smile
Une proposition : Avec une capture.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste IE7 [ CSS ]</title>
<style type='text/css'>
  .gauche { float:left;width:100px;height:100px;background:#D4D0C8;margin-right:8px; }
  .liste { float:left; }
  ul.position { margin-left:20px; }
  img {
  margin: 0 1em 0.5em 0;
  padding: 3px;
  background: #FFF;
  border: 1px solid #AAA;
}
</style>
</head>

<body>
<div class='gauche'><img src='images/images.gif' alt='' width='92' height='92' /></div>
<div class='liste'>
<h3>This is header</h3>
<ul class='position'>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
</ul>
</div>
</body>
</html>


Capture :

upload/20350-css.png

Je ne prétend pas avoir scripter la meilleur solution d'autres façons plus solide existe aussi. Jusqu'à un certain point j'ai respecter ton code. J'ai fait mon teste sur IE7 seulement. Je te suggère d'envelopper le tout dans un div parent sans bordure, puisque les éléments vont ensemble. width:en px; height:auto;

Salutation ++ : Smiley smile
Sujet clos
Aller à