oui, je n'ai pas encore creusé ni trop compris cette histoire de HasLayout
de plus mon conteneur n'est pas en largeur fixe mais fluide. Tant pis si il faut passer par le hr clear:both on le fera
Voilà le code de ma page, nettoyée de ses habillages pour simplifier la lecture
<!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=ISO-8859-1" />
<title>test</title>
<style type="text/css">
<!--
body {
background-color: #FF9900;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 5px;
padding: 5px;
text-align: center; /* correction bug IE6 */
color: #333333;
}
a {
font-weight: bold;
color: #000;
text-decoration: none;
}
a:hover {
color: #FFF;
background-color: #FF9900;
}
#header {
height: 85px;
color: #FFFFFF;
font-family: "Trebuchet MS", Verdana, Arial, Sans-Serif;
text-align: left; /* on rétablit l'alignement normal du texte */
}
#header h1{
font-size: 1.3em;
padding-top: 38px;
padding-left: 420px;
}
#global {
position: relative;
width: 90%;
max-width: 1000px;
min-width: 750px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#page {
background-color: #FFFFFF;
margin-left: 140px;
padding: 10px 160px 10px 30px;
left: 0px;
top: 20px;
}
#column_left {
position: absolute;
width: 140px;
top: 0px;
left: 0px;
margin-top: 30px;
}
#column_right {
width: 130px;
position: absolute;
right: 20px;
top: 40px;
}
#pagebar {
height: 20px;
padding-left: 140px;
}
#pagebar a {
font-family: "Trebuchet MS", Verdana, Arial, Sans-Serif;
color: #FFE8BF;
display: block;
padding: 3px 10px 0px 10px;
text-align: center;
height: 17px;
text-decoration: none;
border-right: 2px solid #E67D00;
}
#pagebar a:hover {
background-color: #FFFFFF;
color: #000000;
text-decoration: none;
}
#pagebar ul {
list-style:none;
display: inline;
}
#pagebar li {
float: left;
display: inline;
}
#pagebar a.selected {
background-color: #FFFFFF;
color: #000000;
border-right: 1px #E67D00 solid;
}
#footer {
padding-left: 150px;
}
#footer a {
font-family: "Trebuchet MS", Verdana, Arial, Sans-Serif;
color: #FFE8BF;
display: block;
padding: 3px 10px 0px 10px;
margin: 0;
border-right: 1px #FFF solid;
text-align: center;
height: 18px;
text-decoration: none;
}
#footer ul {
display: inline;
}
#footer li {
float: right;
display: inline;
}
.boxe_right {
padding: 10px;
border: 2px solid #FF9900;
margin-bottom: 20px;
}
.boxe_left {
background-color:#FFF;
margin-bottom: 20px;
padding: 5px;
}
.boxe_cat {
width: 60%;
float: left;
background-color: #CCCCCC;
padding: 10px;
margin-bottom: 20px;
}
.boxe_cat ul, .boxe_main ul {
list-style: none;
margin-left: 0px;
padding-left: 0px;
}
.boxe_cat li, .boxe_main li {
float: left;
width: 90px;
text-align: center;
height: 120px;
}
.boxe_main {
float: left;
background-color: #CCCCCC;
padding: 10px;
width: 90%;
}
#boxe_news {
float: right;
background-color: #CCCCCC;
width: 30%;
top: 0px;
padding: 10px;
margin-bottom: 20px;
}
.spacer {
clear: both;
}
#main {
float: left;
width: 60%;
margin-bottom: 20px;
}
-->
</style>
</head>
<body>
<div id="header"> div header, logo + baseline </div>
<div id="global">
<div id="pagebar">
<ul>
<li><a href="#" class="selected">Accueil</a></li>
<li><a href="#">lien1 </a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
<li><a href="#">lien4</a></li>
<li><a href="#">lien5</a></li>
</ul>
</div>
<div id="page">
<h2>mon_site.com </h2>
<div id="main">
div id main
<p>le contenu textuel de la page</p>
<p>Equisis doluptate conse delisse quatio cor sed magnit wis aute velenis adionum nullan vent autat. Si tie dipit in et, consenisisse feuisi eum volenibh eugait iril ipisl er susto dolore tetum alit illaor ad exeratem irilla core velent aut iusto odolor incidunt erit illa feum vel etumsan eliqui blandre mod dunt nit pratet lummodo eriure min ute digna facipsustrud magnis dio essequipisi.</p>
</div>
<div id="boxe_news">
<h3>boxe_news</h3>
<p>contenu de la boxe de nouvelles</p>
<p>Cing euguero odolor summy nibh et lut nullutem doluptat vercin vel ullam iurem dunt nulla augiam et laore magna conse veniscilit ad dolobor suscilit aliquam dit adip et aut lum volorpe raessis autet lute feugiamcommy nummolor sumsand ipisiss equat, quat, veraesto odolortio er alit lan eugiate tat. Duisi.</p>
</div>
<div class="boxe_cat">
<h3>boxe_cat liste d'images</h3>
<ul>
<li><a href="#"><img src="http://xaglo.free.fr/image80-100.gif" alt="" name="" width="80" height="100" border="0" /><br />
image 1</a></li>
<li><a href="#"><img src="http://xaglo.free.fr/image80-100.gif" alt="" name="" width="80" height="100" border="0" /><br />
image 2 </a></li>
<li><a href="#"><img src="http://xaglo.free.fr/image80-100.gif" alt="" name="" width="80" height="100" border="0" /><br />
image 3</a></li>
<li><a href="#"><img src="http://xaglo.free.fr/image80-100.gif" alt="" name="" width="80" height="100" border="0" /><br />
image 4</a></li>
<li><a href="#"><img src="http://xaglo.free.fr/image80-100.gif" alt="" name="" width="80" height="100" border="0" /><br />
image 5</a></li>
</ul>
</div>
<div class="boxe_main">
<h3>boxe_main liste images 2</h3>
<ul>
<li><a href="#"><img src="http://xaglo.free.fr/image80-100.gif" alt="" name="" width="80" height="100" border="0" /><br />
image 1</a></li>
<li><a href="#"><img src="http://xaglo.free.fr/image80-100.gif" alt="" name="" width="80" height="100" border="0" /><br />
image 2 </a></li>
<li><a href="#"><img src="http://xaglo.free.fr/image80-100.gif" alt="" name="" width="80" height="100" border="0" /><br />
image 3</a></li>
<li><a href="#"><img src="http://xaglo.free.fr/image80-100.gif" alt="" name="" width="80" height="100" border="0" /><br />
image 4</a></li>
<li><a href="#"><img src="http://xaglo.free.fr/image80-100.gif" alt="" name="" width="80" height="100" border="0" /><br />
image 5</a></li>
<li><a href="#"><img src="http://xaglo.free.fr/image80-100.gif" alt="" name="" width="80" height="100" border="0" /><br />
image 6</a></li>
</ul>
</div>
<hr class="spacer" />
</div>
<div id="column_left">
<div class="boxe_left">
<h3>boxe left 1</h3>
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
</ul>
</div>
<div class="boxe_left">
<h3>boxe left 2</h3>
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
</ul>
</div>
<div class="boxe_left">
<h3>boxe left 3</h3>
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
</ul>
</div>
</div>
<div id="column_right">
<div class="boxe_right">
<h3>boxe right 1</h3>
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
</ul>
</div>
<div class="boxe_right">
<h3>boxe right 2</h3>
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
</ul>
</div>
<div class="boxe_right">
<h3>boxe right 3</h3>
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
</ul>
</div>
</div>
<div id="footer">
<ul>
<li><a href="#">lien footer 1</a></li>
<li><a href="#">lien footer 2</a></li>
<li><a href="#">lien footer 3</a></li>
<li><a href="#">lien footer 4</a></li>
<li><a href="#">lien footer 5</a></li>
</ul>
</div>
</div>
</body>
</html>
et un lien pour la
voir en ligne
Mon soucis d'overflow des listes d'image semble réglé
(du moins sur firefox, je n'ai pas testé ailleurs). Il reste juste une <hr> en pied de page pour que tout ne déborde pas du blanc de la "page" dont je n'arrive pas à me débarrasser.
Une autre question concernant ces liste d'images sur laquelle je me casse les dents, comment arriver à centrer les images dans son conteneur? même en centrant le conteneur (boxe) et réapliquant l'alignement gauche des autres éléments, la balise <ul> semble ne pouvoir être gérée que par sa margin_left, impossible de la centrer!!??
je voulais juste ne pas trop vous saouler avec un premier message. N'ayant pas la possibilité de vous faire tout de suite des images, j'espérais qu'avec ma simple description quelqu'un aurait une idée. Mais promis je reviens... Je vous ferai un petit topo plus descriptif et imagé très bientôt si nécessaire. 
