04-05-2009, 10:27 PM
Citation :Pour que ça marche, il faut 1° que tu gères le positionnement des divs à contenu changeant avec les flottants ( par opposition au positionnement absolu ), et 2° que tu n'oublies pas d'utiliser la propriété css clear dans un autre div pour "rétablir le positionnement du flux" ( c'est pas très clair mais tu trouveras des infos dessus sur Google ), et 3° que tu ne spécifies pas de hauteur au div conteneur.
Non, sa ne fonctionne pas...
Voici ce qui concerne mon affichage:
une page:
Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>..::La Vallée des larmes::..</title>
<meta name="description" content="La Vallée des Larmes, MMORPG gratuit ::Version LOKI:: Jeu par navigateur" />
<meta name="keywords" content="Vallée, vallee, larmes, irae, mmorpg, MMORPG, navigateur, MMWBRPG, mmwbrpg, jeu, role, rôle, jeu de role, jeu de rôle, online, Larmes, larme, Irae, gratuit, jeu gratuit, JdR, pbem, jpem, monstre, trésor, sortilège, sort, armure, arme, aventure, simulation, asynchrone" />
<meta name="robots" content="index" />
<meta name="REVISIT-AFTER" content="7 days" />
<meta name="author" content="Phenix" />
<meta name="Copyright" content="Phenix" />
<meta name="Publisher" content="Phenix" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
<meta http-equiv="Content-Language" content="fr" />
<link href="design/vallee.css" rel="stylesheet" type="text/css" />
<!-- jQuery -->
<script type="text/javascript" src="design/javascript/jquery.js"></script>
<!-- Live Query -->
<script type="text/javascript" src="design/javascript/jquery.livequery.js"></script>
<!-- jQuery Alert -->
<script type="text/javascript" src="design/javascript/jquery.alerts.js"></script>
<!-- ValmeQuery -->
<script type="text/javascript" src="design/javascript/valmequery.js"></script>
<!-- valmetips -->
<script type="text/javascript" src="design/javascript/jquery.valmetips.js"></script>
<!-- Overlib à la sauce valme -->
<script type="text/javascript" src="design/javascript/overvalme.js"></script>
</head>
<body>
<!-- Si le javascript n'est pas activé, on demande de l'activer -->
<noscript>Il est impossible de visualiser ce site sans le javascript.</noscript>
<!-- Div de l'infobulle -->
<div id="tips"></div>
<div class="main_table">
<!-- Header -->
<div class="headerXgauche"></div>
<div class="rose">
<!-- Lien de la rose -->
<div class="acceuil">
<a href="index.php">
<img src="design/image/acceuil.jpg" alt="acceuil" class="HoverFade" />
</a>
</div>
<div class="forum">
<a href="#">
<img src="design/image/forum.jpg" alt="forum" class="HoverFade" />
</a>
</div>
<div class="tutoriel">
<a href="tutoriel.php" class="Ajax">
<img src="design/image/tutoriel.jpg" alt="tutoriel" class="HoverFade" />
</a>
</div>
<div class="background">
<a href="backg.php" class="Ajax">
<img src="design/image/background.jpg" alt="background" class="HoverFade" />
</a>
</div>
<!-- Fin des liens de la rose -->
</div>
<div class="ange">
<img src="design/image/ange.jpg" alt="La vallée des Larmes" class="HoverFade" />
</div>
<div class="tombe">
<!-- Lien de la tombe -->
<div class="lacharte">
<a href="charte.php" class="Ajax">
<img src="design/image/lacharte.jpg" alt="la charte" class="HoverFade" />
</a>
</div>
<div class="classement">
<a href="classement.php" class="Ajax">
<img src="design/image/classement.jpg" alt="classement" class="HoverFade" />
</a>
</div>
<div class="screenshot">
<a href="screenshot.php" class="Ajax">
<img src="<?php echo $modif_path; ?>design/image/screenshot.jpg" alt="screenshot" class="HoverFade" />
</a>
</div>
<!-- Fin des liens de la tombe -->
</div>
<div class="headerXdroite"></div>
<!-- Fin Header -->
<!-- Tableau de gauche -->
<div class="Xgauche"></div>
<div class="table_gauche">
</div>
<div class="gauche"></div>
<!-- Fin tableau de gauche -->
<div class="table_center">
<!-- contenu -->
</div>
<!-- fin tableau du centre -->
<!-- tableau de droite -->
<div class="Xdroite"></div>
<div class="table_droite">
</div>
<div class="droite"></div>
<!-- Fin tableau de droite -->
<!-- Footer -->
<div class="footer"></div>
</div>
</body>
</html>La css qui devrait marcher mais qui marche pas...
/*Contruction du tableau de base et ajustement des DIV */
.main_table
{
width: 959px;
height: auto;
margin: 0 auto;
}
/* Début du Header */
.headerXgauche
{
width: 18px;
height: 227px;
float: left;
background: #363b33 url(image/headerXgauche.jpg) no-repeat;
}
.rose
{
width: 271px;
height: 85px;
float: left;
background: #363b33 url(image/rose.jpg) no-repeat;
padding-top: 142px;
padding-left: 90px;
}
.ange
{
width: 201px;
height: 227px;
float: left;
background: #363b33 url(image/angeHover.jpg) no-repeat;
}
.tombe
{
width: 327px;
height: 85px;
float: left;
background: #363b33 url(image/tombe.jpg) no-repeat;
padding-top: 142px;
padding-left: 34px;
}
.headerXdroite
{
width: 18px;
height: 227px;
float: left;
background: #363b33 url(image/headerXdroite.jpg) no-repeat;
}
/* Fin du Header */
/* Tableau de gauche */
.Xgauche
{
width: 18px;
background: #363b33 url(image/Xgauche.jpg) repeat-y;
float: left;
height: 100%;
clear: left;
}
.table_gauche
{
width: 125px;
min-height: 614px;
background: #131313;
float: left;
padding-left: 5px;
padding-right: 5px;
margin: 0 auto;
text-align: center;
clear: left;
}
.gauche
{
width: 18px;
background: #363b33 url(image/gauche.jpg) repeat-y;
float: left;
height: 100%;
clear: left;
}
/* Fin tableau de gauche */
/* Tableau du centre */
.table_center
{
width: 582px;
min-height: 614px;
background: #131313;
float: left;
clear: left;
}
/* Fin tableau du centre */
/* Tableau de droite*/
.Xdroite
{
width: 18px;
background: #363b33 url(image/Xdroite.jpg) repeat-y;
float: left;
height: 100%;
clear: left;
}
.table_droite
{
width: 160px;
height: 100%;
background: #131313;
float: left;
padding-left: 5px;
padding-right: 5px;
clear: left;
}
.droite
{
width: 18px;
background: #363b33 url(image/droite.jpg) repeat-y;
float: left;
height: 100%;
clear: left;
}
/* Fin tableau de droite*/
/* Footer */
.footer
{
width: 959px;
height: 39px;
background: #363b33 url(image/footer.jpg) no-repeat;
float: left;
clear: both;
}
/* Fin footer */
Voila, moi je comprend plus rien à cette histoire de clear et de float... J'ai un affichage qui fonctionne pas du tout...