Bonsoir,
Voilà plusieurs heures que je cherches une solution à mon problème malheureusement celles cio sont infructueuses et après plusieurs heures d'essais, je n'ai toujours pas réussi à obtenir ce que je veux, c'est pour celà que je viens solliciter votre aide.
La découpe de mon design était auparavant faite avec des tableaux et je me suis décidé à le faire avec des divs mais maintenant j'ai un gros soucis :\
Voilà le problème, mon div central ne s'allonge pas assez, et son contenu déborde complètement. Je sais que c'est un problème récurrent mais malgré ce que j'ai vu sur le net, je n'ai pas été capable de trouver une solution qui pare à mon problème :\
Comme une image est toujours mieux qu'un long discours, en voici une :
image
Voilà le code de la page
Edit : Alors que tout à l'heure ça n'allait pas, j'ai remis le doctype et maintenant ça fonctionne mais il ne prend plus en compte mes padding et autre :\
Modifié par nuts62 (07 Feb 2008 - 22:30)
Voilà plusieurs heures que je cherches une solution à mon problème malheureusement celles cio sont infructueuses et après plusieurs heures d'essais, je n'ai toujours pas réussi à obtenir ce que je veux, c'est pour celà que je viens solliciter votre aide.
La découpe de mon design était auparavant faite avec des tableaux et je me suis décidé à le faire avec des divs mais maintenant j'ai un gros soucis :\
Voilà le problème, mon div central ne s'allonge pas assez, et son contenu déborde complètement. Je sais que c'est un problème récurrent mais malgré ce que j'ai vu sur le net, je n'ai pas été capable de trouver une solution qui pare à mon problème :\
Comme une image est toujours mieux qu'un long discours, en voici une :
image
Voilà le code de la page
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
body {background: #282828 url('images/fond.gif') top left repeat-x; padding:0; margin:0;}
#site { width: 1024px;
margin: 0 auto;
padding-left:100;
text-align: center; }
#header {background: url(images/imgs_01.gif) no-repeat; width:1024px; height:87px;}
#head01 {background: url(images/imgs_02.gif); height:150px; width:118px; float:left; margin-top:87px;}
#ban {background: url(images/imgs_03.gif); height:150px; width:596px; margin-top:87px; float:left;}
#headmenu {background: #DFDFDF; float:left; height:150px; margin-top:87px; width:185px;}
#headtopmenu {background: url(images/imgs_04.gif); height:31px; width:100%}
#head02 {background: url(images/imgs_05.gif); height:150px; width:125px; margin-top:87px; float:left;}
#content {background: url(images/bg_site.gif) repeat-y; width:1024px; clear:both; height:100%;}
#gauche {background: url(images/imgs_08.gif); width:118px; height:10px; float:left; }
#droite {background: url(images/imgs_10.gif); width:125px; height:10px; float:right; margin-right:0; }
#footer {clear:both; width:1024px; background: url(images/footer.gif); height:61px;}
#centre {text-align:left; width:580px; float:left;}
#menus { margin-right:10px; float:right; padding-left:30;}
#bests {background: #242424; margin-bottom:20px; color:white; width:587px; height:72px;}
div.bests01 {padding:6; text-align:center; height:60; width:60; background:#191919; float:left;}
a.rollover {
display:block;
width: 185px;
height: 62px;
background: url(images/mini01.gif);
border: 0;
}
a.rollover:hover {
width: 185px;
height: 62px;
background: url(images/mini01o.gif);
}
a.rollover:active {
width: 185px;
height: 62px;
background: url(images/mini01h.gif);
}
a.rollover2 {
display:block;
width: 185px;
height: 57px;
background: url(images/mini02.gif);
border: 0;
}
a.rollover2:hover {
width: 185px;
height: 57px;
background: url(images/mini02o.gif);
}
a.rollover2:active {
width: 185px;
height: 57px;
background: url(images/mini02h.gif);
}
img.c1 {display:none;}
</style>
<link rel="stylesheet" type="text/css" href="css/css_sitediv.css" media="screen"/>
</head>
<body>
<!-- Chargement des images pour les rollovers -->
<img src="images/mini01o.gif" alt="" class="c1" /> <img src="images/mini01h.gif" alt="" class="c1" /> <img src="images/mini02o.gif" alt="" class="c1" /> <img src="images/mini02h.gif" alt="" class="c1" />
<!-- Fin de chargement des images pour rollovers -->
<div id="site">
<div id="header">
<div id="head01"></div>
<div id="ban"></div>
<div id="headmenu">
<div id="headtopmenu"></div>
<a class="rollover" href="#" title="titre"></a>
<a class="rollover2" href="#" title="titre"></a>
</div>
<div id="head02"></div>
</div>
<div id="content">
/*<script language="Javascript">
document.write ("<div id='content' style='height:"+document.body.clientHeight+"px;'>" );
</script>*/
<div id="gauche"></div>
<div id="droite"></div>
<div id="centre">
<div id="bests">
<div class="bests01">...</div>
<div class="bests01">...</div>
<div class="bests01">...</div>
</div>
<div class="content_conteneur">
<div class="content_title"></div>
<div class="content_bloc"><p> </p>
........
</div>
</div>
</div>
<div id="menus">menus</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>Edit : Alors que tout à l'heure ça n'allait pas, j'ai remis le doctype et maintenant ça fonctionne mais il ne prend plus en compte mes padding et autre :\
Modifié par nuts62 (07 Feb 2008 - 22:30)
);
