Bonjour
Je suis entrain de préparer un site pour une association importante.
Voici la maquette (grossièrement) : http://www.sylvie-rousseau.com/webmastering/images/maquette-du-site.jpg pour donner une idée de la structure de la page.
Je souhaite que deux blocs (le menu de navigation dans .gauche et le texte dans .droite) soient cote à cote et que les deux blocs soient dans un troisième bloc centré.
Pour centrer, j'ai déjà essayé la méthode enseignée par Raphaël dans l'un de mes sites persos et ça fonctionne : margin-left: auto; et margin-right: auto; (www.tranchant-rousseau.fr).
En revanche pour les blocs cote à cote dans le site associatif que je prépare actuellement, c'est la panique : soit le bloc de droite va sous celui de gauche, soit une partie du bloc de droite est à droite et une partie en-dessous
J'ai essayé la méthode également enseignée par Raphaël :
et ça ne va pas du tout.
Il faut dire que je ne suis toujours pas douée avec le positionement css.
Je vous livre mon code :
xhtml------------------
css------------------
Que faire, s'il vous plait ? Infiniment merci !
Modifié par Florent V. (06 Feb 2008 - 23:11)
Je suis entrain de préparer un site pour une association importante.
Voici la maquette (grossièrement) : http://www.sylvie-rousseau.com/webmastering/images/maquette-du-site.jpg pour donner une idée de la structure de la page.
Je souhaite que deux blocs (le menu de navigation dans .gauche et le texte dans .droite) soient cote à cote et que les deux blocs soient dans un troisième bloc centré.
Pour centrer, j'ai déjà essayé la méthode enseignée par Raphaël dans l'un de mes sites persos et ça fonctionne : margin-left: auto; et margin-right: auto; (www.tranchant-rousseau.fr).
En revanche pour les blocs cote à cote dans le site associatif que je prépare actuellement, c'est la panique : soit le bloc de droite va sous celui de gauche, soit une partie du bloc de droite est à droite et une partie en-dessous
J'ai essayé la méthode également enseignée par Raphaël :
.gauche {
background-color: #09c;
width: 370px;
float: left;
padding-left: 5px;
}
.droite {
width: 430px;
padding-left: 20px;
}et ça ne va pas du tout.
Il faut dire que je ne suis toujours pas douée avec le positionement css.
Je vous livre mon code :
xhtml------------------
<body>
<div id="centre">
<div class="gauche">
<img src="images/menu-af.gif" width="370" height="45" />
<ul>
<li>Qui sommes-nous </li>
<li>Bureau et CA</li>
<li>Statuts</li>
</ul>
</div>
<div class="droite">
<img src="images/bandeau.jpg" width="430" height="277" />
<p>Praesent imperdiet lobortis pede. Praesent posuere pede vitae dui. Aenean
neque risus, condimentum vel, mattis at, fringilla vitae, metus. Morbi quam.
Vivamus convallis. In pretium consequat dolor. Sed lobortis velit sed quam.
Morbi tempus tellus at eros. Aliquam egestas, odio eu tincidunt vehicula,
lacus turpis iaculis lacus, vel porttitor lorem neque vitae pede. Nunc id
nulla vehicula lacus nonummy viverra. Nullam nibh ante, nonummy a, sollicitudin
dignissim, convallis bibendum, mi. Quisque sed sapien eu pede mollis faucibus.
Vestibulum erat mauris, accumsan in, venenatis eget, tincidunt nec, metus.
Sed nec tortor. Donec euismod sodales elit. Maecenas vestibulum, nisl eget
placerat varius, purus nunc consequat velit, nec volutpat lacus sem et odio.</p>
</div>
</div>
</body>css------------------
body {
margin: 0; /* pour éviter les marges */
text-align: center; /* pour corriger le bug de centrage IE */
background-color: #ffffff;
color: #000000;
font-family: Arial;
font-size: 12px;
}
#centre {
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: left; /* on rétablit l'alignement normal du texte */
}
.gauche {
background-color: #09c;
width: 370px;
float: left;
padding-left: 5px;
}
.droite {
width: 430px;
padding-left: 20px;
}Que faire, s'il vous plait ? Infiniment merci !
Modifié par Florent V. (06 Feb 2008 - 23:11)
mais je sais faire d'autres choses. 
