[Résolu] Intervalle entre DIV par Shughuy - page 1

Bonjour.

Une petite image pour vous mettre dans l'ambiance tout de suite.
Image utilisateur

Je cherche à faire des blocs qui ressemblent à ça. Mon problème est le suivant. Si vous regardez le bloc de gauche, il y a un gros espace entre l'entete du bloc et le corps de celui-ci. Idem entre le corps et le pied.

Cet intervalle disparait si je mets un border top/bottom comme vous pouvez le voir dans les blocs de droite. Je l'ai mis en rouge pour que ce soit plus visible.

Ma question est la suivante : Comment arriver au résultat de droite sans pour autant mettre une border ? J'ai fait une version avec des border d'une couleur qui permet de la fondre presqu'entièrement... Mais ça ne me satisfait pas.

Par ailleurs, pour le petit bloc et le gros bloc (point de vue largeur) j'utilise 2 images de tailles différentes. Dans l'absolu, je serais ravi de pouvoir faire ça de façon extensible en fonction du contenu du corps. Je suis aussi preneur pour cette solution.

Je vous mets le code de la page :

<body>
<div id='page'>
<div class='bloc_200'>
<div class='entete'>Mes favoris 1</div>
<div class='corps'>
<ul>
<li><a href='#'>Premier lien</a></li>
<li><a href='#'>Deuxième lien</a></li>
<li><a href='#'>Troisième lien</a></li>
<li><a href='#'>Quatrième lien</a></li>
<li><a href='#'>Premier lien</a></li>
<li><a href='#'>Deuxième lien</a></li>
<li><a href='#'>Troisième lien</a></li>
<li><a href='#'>Quatrième lien</a></li>
</ul>
</div>
<div class='pied'></div>
</div>

<div class='bloc_350'>
<div class='entete'>Mes favoris 2</div>
<div class='corps'>
<ul>
<li><a href='#'>Premier lien</a></li>
<li><a href='#'>Deuxième lien</a></li>
<li><a href='#'>Troisième lien</a></li>
<li><a href='#'>Quatrième lien</a></li>
</ul>
</div>
<div class='pied'></div>
</div>

<div class='bloc_350'>
<div class='entete'>Mes favoris 3</div>
<div class='corps'>
<ul>
<li><a href='#'>Premier lien</a></li>
<li><a href='#'>Deuxième lien</a></li>
<li><a href='#'>Troisième lien</a></li>
<li><a href='#'>Quatrième lien</a></li>
</ul>
</div>
<div class='pied'></div>
</div>

</div>
</body>

Et le css associé :

.bloc_350 {
margin:5px;
width:350px;
float:left;
z-index:1;
display:block;
}

.bloc_350 .entete {
padding-top:5px;
text-align:center;
font-weight:bold;
color:#443105;
height:18px;
background-image : url('./../images/350_menu_haut.png') ;
background-repeat : no-repeat;
z-index:2;
}

.bloc_350 .corps {
background-image : url('./../images/350_menu_fond.png') ;
background-repeat : repeat-x repeat-y ;
z-index:3;
border-top:1px solid #ffffff;
border-bottom:1px solid #e4e4e4;
}

.bloc_350 .pied {
height:29px;
background-image : url('./../images/350_menu_bas.png') ;
background-repeat : no-repeat;
z-index:3;
}

.bloc_200 {
margin:5px;
width:200px;
float:left;
z-index:1;
display:block;
}

.bloc_200 .entete {
padding-top:5px;
text-align:center;
font-weight:bold;
color:#443105;
height:18px;
background-image : url('./../images/200_menu_haut.png') ;
background-repeat : no-repeat;
z-index:2;
}

.bloc_200 .corps {
background-image : url('./../images/200_menu_fond.png') ;
background-repeat : repeat-x repeat-y ;
z-index:3;
}

.bloc_200 .pied {
height:29px;
background-image : url('./../images/200_menu_bas.png') ;
background-repeat : no-repeat;
z-index:3;
}

Shughuy

20 mai 2006 à 12:16:28

Sitevolution

20 mai 2006 à 13:25:37

padding : 0px;

essaies ça on ne sait jamais !

à mettre dans la partie du CSS qui concerne le corps, l'en-tête et le pied de page !

20 mai 2006 à 13:30:47

ça ne change rien

Merci pour la proposition.

mick3y

20 mai 2006 à 13:31:44

Ou alors tu essaies de mettre des border mais aux couleurs de ta div (comme ça, on ne les verras pas).

20 mai 2006 à 13:43:18

ou alors border : 0px; ça fonctionne ?

Hawks

20 mai 2006 à 13:50:15

Moi je vais essayé ma solution miracle (d'un autre topic)

Essai line-height: 0px;

20 mai 2006 à 13:54:13

Alors, la border aux couleurs de ma div, j'ai déjà fait (d'ailleurs je le dis dans mon premier topic

)
Le problème, c'est que l'image de fond n'est pas uniforme.
Aussi, ça peut se voir.

Pour le border 0, si je le mets c'est comme si je ne mettais pas de border du tout. Donc on revient au problème initial.

Pour le line-height:0px; je dois le mettre où ?