Bonjour,
Je galère sur un positionnements de blocs :
j'ai utilisé le gabarit proposé sur Alsacreations, à savoir : http://css.alsacreations.com/modeles/modele1.htm et dans la partie "centre", il me faut des petits blocs (2 dans la largeur, 2 en-dessous, et ainsi de suite...) j'ai donc essayé de définir un bloc flottant à gauche afin de le réutiliser à chaque fois. Dans ce bloc, il me faut un titre (h1), puis le paragraphe.
Le problème, c'est que les blocs sortent du centre, ils dépassent en-dessous.
Autre problème, le pied de page ne se colle pas au centre, il y a un écart de quelques pixels entre les 2. (mais pas à cause des blocs, j'ai essayé sans aussi et c'est pareil)
Pfiou...
Je donne mon code au cas où :
Alors si quelqu'un pouvait m'aider, je le remercie d'avance
Modifié par pixie (18 May 2007 - 14:26)
Je galère sur un positionnements de blocs :
j'ai utilisé le gabarit proposé sur Alsacreations, à savoir : http://css.alsacreations.com/modeles/modele1.htm et dans la partie "centre", il me faut des petits blocs (2 dans la largeur, 2 en-dessous, et ainsi de suite...) j'ai donc essayé de définir un bloc flottant à gauche afin de le réutiliser à chaque fois. Dans ce bloc, il me faut un titre (h1), puis le paragraphe.
Le problème, c'est que les blocs sortent du centre, ils dépassent en-dessous.
Autre problème, le pied de page ne se colle pas au centre, il y a un écart de quelques pixels entre les 2. (mais pas à cause des blocs, j'ai essayé sans aussi et c'est pareil)
Pfiou...
Je donne mon code au cas où :
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#f2f2f2;
font-size: 10px;
margin: 0;
padding: 0;
}
#conteneur {
width: 755px;
margin: 0 auto;
}
#header {
height: 267px;
}
#barre {
height: 26px;
}
#centre {
background-image:url(images/fond.gif);
padding:5px 20px 5px 20px;
height:inherit;
}
#pied {
background-image:url(images/fond.gif);
font-size:9px;
font-family:Arial, Helvetica, sans-serif;
color:#8a3109;
text-align:center;
}
#pied a {
color:#8a3109;
}
#pied a:hover {
color:#8a3109;
}
.bloc{
width:300px;
float:left;
margin:10px 20px 10px 20px;
color:#666666;
}
h1 {font-size:14px;
padding:0;
font-weight:lighter;
color:#8a3109;
}
<body>
<div id="conteneur">
<div id="header"></div>
<div id="barre"><img src="images/barre-accueil.gif" /></div>
<div id="centre">
<div class="bloc"><h1>Edito</h1><p>bla bla bla<p/></div>
<h1>Edito</h1><div class="bloc"><p>bla bla bla</p>
</div>
</div>
<div id="pied">
<p>bla bla bla</p></div>
</div>
</body>
Alors si quelqu'un pouvait m'aider, je le remercie d'avance
Modifié par pixie (18 May 2007 - 14:26)
) :
) j'avais essayé avec padding:0; que change le 1px?