Bonjour 
Sur mon site : http://wizardschool.free.fr j'ai un design qui se resume ainsi :
conteneur {
{header}
{menu}
{page}
}
Le bloc conteneur regroupe donc les autres, vient ensuite le bloc header qui porte l'image du haut en arriere plan, le bloc menu qui est a gauche et qui a un float:left pour que le bloc 'page' soit à sa gauche... voila le CSS :
Sur une des pages que je fais je voudrais avoir deux petits blocs cote à cote et un en dessous dans le bloc page, de cette facon :
{page
{bloc1} {bloc2}
{ bloc 3 }
}
j'ai donc fait le code html suivant :
Mais vous allez rire... ca marche pas ^^, le probleme c'est qu'il ne fait pas le flottement si je ne met float:left que pour le bloc #avatar mais si je le met directement pour les deux le troisieme bloc va aussi se mettre à la gauche du bloc #personnage, j'ai donc essayé de mettre le bloc #test en clear:both; mais il clear beaucoup trop
vu qu'au final le bloc se met bien en dessous des deux autres blocs mais egalement en dessous du bloc menu :s genre ca : [URL=http://img140.imageshack.us/my.php?image=sanstitre9la.jpg][IMG]http://img140.imageshack.us/img140/663/sanstitre9la.th.jpg[/IMG][/URL]
Quelqu'un saurait me dire pourquoi ca fait ca ? :'(
Merci d'avance =)
Modifié par Palleas (30 Apr 2006 - 11:20)
Sur mon site : http://wizardschool.free.fr j'ai un design qui se resume ainsi :
conteneur {
{header}
{menu}
{page}
}
Le bloc conteneur regroupe donc les autres, vient ensuite le bloc header qui porte l'image du haut en arriere plan, le bloc menu qui est a gauche et qui a un float:left pour que le bloc 'page' soit à sa gauche... voila le CSS :
#conteneur {
width:750px;
min-height:650px;
border-top:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
border-left:1px solid #FFFFFF;
margin-top:10px;
margin-left:auto;
margin-right:auto;
background-image:url("../images/fond_defaut");
background-position:top left;
background-repeat:repeat-y;
}
#header {
width:100%;
height:195px;
background-image:url("../images/header_defaut.jpg");
background-repeat:no-repeat;
}
#menu {
margin:0;
padding:10px;
width:150px;
float:left;
}
#page {
width:560px;
margin-top:10px;
margin-left:180px;
}
Sur une des pages que je fais je voudrais avoir deux petits blocs cote à cote et un en dessous dans le bloc page, de cette facon :
{page
{bloc1} {bloc2}
{ bloc 3 }
}
j'ai donc fait le code html suivant :
<div id="avatar">
<h3>Image perso :</h3>
<form method="post" enctype="multipart/form-data" action="index.php?page=personnage" onsubmit="return verif_avatar()">
<input type="hidden" name="act" value="avatar" />
<p class="centre"><img src="images/avatars/{avatar}" title="Votre avatar actuel" alt="avatar" /></p>
<p><label for="avatar">Modifier votre avatar :</label></p>
<p><input type="file" name="image" id="image" /></p>
<p class="centre"><input type="submit" name="submit" value="Modifier!" /></p>
</form>
</div>
<div id="perso">
<h3>Personnage</h3>
<p class="centre">
<img src="images/fleche_gauche.jpg" title="precedent" alt="<<" />
<img src="images/persos/{perso}" title="votre personnage" alt="personnage" />
<img src="image/flecge_droite.jpg" title="suivant" alt=">>" />
</p>
<p>{perso}</p>
<p>{poste}</p>
</div>
<div id="test">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed hendrerit. Vivamus mollis. Cras sit amet metus ac urna tincidunt varius. Suspendisse at magna in mauris convallis tempus. Morbi eget massa. Suspendisse suscipit. Vestibulum ligula felis, gravida et, pharetra eget, pulvinar at, augue. Ut at pede sit amet turpis dictum molestie. In auctor porta mi. Cras ligula. Aenean erat nunc, lobortis pretium, egestas sed, viverra ac, nibh. Morbi eget lacus sed ipsum dignissim lacinia. Curabitur et justo. Praesent adipiscing enim non mauris. Ut suscipit tristique nibh. Cras dictum, metus vel aliquam ullamcorper, lorem erat dapibus magna, at fermentum mauris nibh non quam. In odio. Maecenas dictum pharetra tortor. Duis dapibus dolor et justo.
</div>Mais vous allez rire... ca marche pas ^^, le probleme c'est qu'il ne fait pas le flottement si je ne met float:left que pour le bloc #avatar mais si je le met directement pour les deux le troisieme bloc va aussi se mettre à la gauche du bloc #personnage, j'ai donc essayé de mettre le bloc #test en clear:both; mais il clear beaucoup trop
vu qu'au final le bloc se met bien en dessous des deux autres blocs mais egalement en dessous du bloc menu :s genre ca : [URL=http://img140.imageshack.us/my.php?image=sanstitre9la.jpg][IMG]http://img140.imageshack.us/img140/663/sanstitre9la.th.jpg[/IMG][/URL]Quelqu'un saurait me dire pourquoi ca fait ca ? :'(
Merci d'avance =)
Modifié par Palleas (30 Apr 2006 - 11:20)
