Bonjour,
Si je poste, c'est que depuis plusieurs jours j'essaye tant bien que mal de faire un positionnement de box assez complexe sans succès.
Voici l'architecture du CSS (Fait sous paint, no comment xD):
http://alpha.chuck-france.net/designArchiCSS.JPG
Donc mon problème réel se situe au niveau des box à l'intérieur, et plus particulièrement avec les small_box left et right.
Le but est de pouvoir faire plusieurs "étages" de box: Exemple ici deux étages avec une big box et 3 small box a coté pour le premier et deux small box a gauche avec une big box a droite pour le deuxième étage.
Le but est que chaque étage pousse vers le bas l'étage du dessous. C'est à dire que si les trois small box du premier étage dépassent la big box, elles doivent pousser l'étage du dessous (2 small_box_left et big_box_right).
Et impossible d'obtenir cela !
Voici mon CSS:
Entre temps, j'ai rajouté la div centre qui englobe toutes les div du milieu sans le menu et la classe box_conteneur qui englobe un "étage" de box.
Voici le code HTML:
Voilà, j'espère avoir été assez clair, n'hésitez pas si vous avez des questions. Mon problème est uniquement le positionnement de ces box du milieu: Soit elles ne poussent pas le bas, soit elles ne se placent pas où il faut a coté de la big_box.
En espérant que vos lumières puissent m'éclairer, bonne journée.
Modifié par DrDJo (22 Jul 2007 - 19:30)
Si je poste, c'est que depuis plusieurs jours j'essaye tant bien que mal de faire un positionnement de box assez complexe sans succès.
Voici l'architecture du CSS (Fait sous paint, no comment xD):
http://alpha.chuck-france.net/designArchiCSS.JPG
Donc mon problème réel se situe au niveau des box à l'intérieur, et plus particulièrement avec les small_box left et right.
Le but est de pouvoir faire plusieurs "étages" de box: Exemple ici deux étages avec une big box et 3 small box a coté pour le premier et deux small box a gauche avec une big box a droite pour le deuxième étage.
Le but est que chaque étage pousse vers le bas l'étage du dessous. C'est à dire que si les trois small box du premier étage dépassent la big box, elles doivent pousser l'étage du dessous (2 small_box_left et big_box_right).
Et impossible d'obtenir cela !
Voici mon CSS:
body {
margin: 0;
padding: 0;
}
#conteneur {
background-image: url('body_background.jpg');
background-repeat: repeat-y;
font-family: Arial;
font-size: 12px;
color: #598089;
margin: 0 auto;
padding: 0;
top: 0;
bottom: 0;
width: 955px;
position: relative;
}
#header {
background-image: url('header.jpg');
background-repeat: no-repeat;
height: 257px;
width: auto;
}
#footer {
background-image: url('footer.jpg');
background-repeat: no-repeat;
height: 103px;
width: auto;
}
#content { /* #########" MIDDLE sur le schéma ########### */
position: relative;
width: 903px;
}
#centre {
position: absolute;
margin-left: 245px;
width: 658px;
top: 0;
}
/* #########" BOXES ########### */
.box_conteneur {
position: relative;
width: 658px;
border: 1px dashed green;
}
.big_left_box {
left: 0px;
position: relative;
width: 460px;
}
.big_right_box {
margin-left: 190px;
right: 0px;
position: relative;
width: 460px;
}
.small_left_box {
left: 0px;
position: absolute;
width: 180px;
}
.small_right_box {
position: absolute;
right: 5px;
top: 0px;
width: 180px;
}
Entre temps, j'ai rajouté la div centre qui englobe toutes les div du milieu sans le menu et la classe box_conteneur qui englobe un "étage" de box.
Voici le code HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type='text/css'>
@import url('styles.css');
</style>
</head>
<body>
<div id='conteneur'>
<div id='header'>
</div>
<div id='content'>
<div id='menu'>
<br /><br />
</div>
<div id='centre'>
<div class='box_conteneur'>
<div class='big_left_box'>
</div>
<div class='small_right_box'>
</div>
<div class='small_right_box'>
</div>
<div class='small_right_box'>
</div>
</div>
<div class='box_conteneur'>
<div class='big_right_box'>
</div>
<div class='small_left_box'>
</div>
<div class='small_left_box'>
</div>
</div>
</div>
</div>
<div id='footer'>
</div>
</div>
</body>
</html>
Voilà, j'espère avoir été assez clair, n'hésitez pas si vous avez des questions. Mon problème est uniquement le positionnement de ces box du milieu: Soit elles ne poussent pas le bas, soit elles ne se placent pas où il faut a coté de la big_box.
En espérant que vos lumières puissent m'éclairer, bonne journée.
Modifié par DrDJo (22 Jul 2007 - 19:30)
