Extension verticale d'un div
Bonjour,
Je cherche à étendre un div au sein duquel il y a des infos.
Sous ce div, il y a 2 autres div qui devraient suivre cette extension au gré des ajouts et retraits des infos.
Pour se faire, j'ai pensé avoir recours à un tableau. Mais plutôt que de faire un long discours, je vous invite à voir mon code :
CSS :
/* A la une */
#index {
top:0px;
left:150px;
position: absolute;
}
.encart1 {
top:-21px;
left:300px;
position: absolute;
}
/* L'album de la semaine */
.encart2 {
width:215px;
top:207px;
left:300px;
position: absolute;
}
/* Devenir bénévoles */
.encart3
{
width:235px;
height:335px;
top:474px;
left:300px;
position: absolute;
}
/* Programmation quotidienne */
.encart4
{
top:0px;
left:px;
position: absolute;
}
/* FB */
.encart5
{
top:207px;
right:-19px;
position: absolute;
}HTML :
<div id="index">
<table width="825" border="0" align="right">
<tr>
<td rowspan="2" valign="top">
<div class="encart4">
{INDEX_ENCART4} </div>
</td>
<td colspan="2" valign="top">
<div class="encart1">
{INDEX_ENCART1} </div>
</td>
</tr>
<tr>
<td valign="top">
<div class="encart2">
{INDEX_ENCART2} </div>
<br>
<div class="encart3">
{INDEX_ENCART3} </div>
</td>
<td valign="top">
<div class="encart5">
{INDEX_ENCART5} </div>
</td>
</tr>
</table>
</div>Merci d'avance pour votre aide.
6 réponses
Je vois pas vraiment ton problème... Si tu veux agrandir ton bloc "A la une", tu peux jouer en mettant un padding par exemple. Mais normalement, la div s'adapte en hauteur en fonction du contenu de celle-ci.
Par contre, je vois un problème entre ton blanc "Emissions du jour" et "A la une", tu dois rajouter un
vertical-align: topafin de l'alignement soit exactement le même.
Un tableau pour faire ça, c'est pas terrible. Il faut jouer avec les flottant.
Je vais ajouter une news, tu vas mieux te rendre compte, car là, comme tout semble bien aligner, ça saute pas forcément aux yeux mais merci pour ta réponse.
Je te conseille de ne pas faire avec un tableau, mais avec les flottants, et tu joues sur les marges du bas pour espacer avec tes deux blocs du dessous.
Tu as vraiment mis des tableaux à gogo là, il faut faire du vide. Les tableaux pour faire un site ne s'utilise plus depuis bien longtemps.
Après si tu veux vraiment garder les tableaux, tu as juste à prendre ton tableau "A la une", et de lui mettre un margin-bottom.
Pour tout te dire, je suis pas doué du tout en code, donc, j'ai ajouté un margin-bottom dans le css et j'ai même mis une grosse valeur mais ça change rien du tout.
Et ça ressemblerai à quoi avec les flottants ?
Chaque bloc que tu as devrons être dans des <div></div>, puis tu positionnes chaque div en float: left pour qu'ils soient sur la même ligne. Tu peux aussi utilisé clear: both pour arrêter de mettre tes blocs en flottant.
Le résultat sera donc le même, mais beaucoup mieux pour le code.
J'ai fait comme tu m'a dis, du coup mon code ressemble à ça désormais :
CSS :
#index {
top:0px;
left:150px;
position: absolute;
}
/* A la une */
.encart1 {
float:left;
width:6610px;
top:-21px;
left:300px;
position: absolute;
}
/* L'album de la semaine */
.encart2 {
float:left;
width:215px;
top:207px;
left:300px;
position: absolute;
}
/* Devenir bénévoles */
.encart3 {
float:left;
width:235px;
height:335px;
top:474px;
left:300px;
position: absolute;
}
/* Programmation quotidienne */
.encart4 {
float:left;
top:0px;
left:0px;
position: absolute;
}
/* FB */
.encart5 {
float:left;
width:235px;
top:207px;
left:600px;
position: absolute;
}HTML :
<div id="index">
<div class="encart4">
{INDEX_ENCART4} </div>
<div class="encart1">
{INDEX_ENCART1} </div>
<div class="encart2">
{INDEX_ENCART2} </div>
<br>
<div class="encart3">
{INDEX_ENCART3} </div>
<div class="encart5">
{INDEX_ENCART5} </div>
</div>C'est certes plus propre, mais mes DIV 2,3 et 5 sont pas dessus le DIV 1 même si ce dernier s'étend.