
Je me retrouve avec 3 pixels de trop sous mes vignettes, je bidouille le code depuis longtemps et je ne vois pas ce que j’ai oublié dans mon css.
Merci de m’éclairer.
mon code html (liste simple)
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="teste_galerie.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="galerie">
<ul id="mini">
<li><a href="images/1.jpg" ><img src="images/minis/mini01.png" alt="photo 1" /></a></li>
<li><a href="images/2.jpg" ><img src="images/minis/mini01.png" alt="photo 2" /></a></li>
<li><a href="images/3.jpg" ><img src="images/minis/mini01.png" alt="photo 3" /></a></li>
<li><a href="images/4.jpg" ><img src="images/minis/mini01.png" alt="photo 4" /></a></li>
<li><a href="images/5.jpg" ><img src="images/minis/mini01.png" alt="photo 5" /></a></li>
<li><a href="images/6.jpg" ><img src="images/minis/mini01.png" alt="photo 6" /></a></li>
<li><a href="images/7.jpg" ><img src="images/minis/mini01.png" alt="photo 7" /></a></li>
<li><a href="images/8.jpg" ><img src="images/minis/mini01.png" alt="photo 8" /></a></li>
<li><a href="images/9.jpg" ><img src="images/minis/mini01.png" alt="photo 9" /></a></li>
<li><a href="images/10.jpg" ><img src="images/minis/mini01.png" alt="photo 10" /></a></li>
</ul>
</div>
</body>
</html>
mon code css
body {
background-color: #CCCCCC;
}
div#galerie
{
background: #999999;
margin: 0px;
font: 0.9em Georgia, serif;
width: 800px;
height: auto;
}
ul#mini
{
list-style-type: none;
margin: 0;
}
ul#mini li
{
float: left;
list-style-type: none;
background-color: #0033CC;
margin-right: 10px;
margin-bottom: 10px;
}
ul#mini li a img
{
border: 0px;
}
Modifié par olimann (06 Dec 2005 - 00:45)