3 Blocks horizotaux

probleme

17 avril 2006 à 14:39:08

Salut à tous.

Voila mon probleme.
Suite au tutorial de Mateo ( grand merci à toi d'ailleurs) sur la structure du site web.
Je cherche depuis pas mal de temps comment faire pour placer 3 blocks sur une meme ligne pour faire par exemple: "menu gauche" puis "corps de la page" et enfin " menu droit" en CSS

à chaque fois que je fais ma ligne de code, le menu de droite passe en dessous du "menu gauche" et du "corps de la page".

J'ai essayé de mettre des valeurs negatives à mon "menu droit" mais dreamweaver me fais compredre que c'est impossible.

Merci d'avance!
a+

PS: comment fait on une recherche sur le forum?

Riko

17 avril 2006 à 15:09:27

Essaies avec un float (left ou right)

judgewax

18 avril 2006 à 15:29:55

J'ai deja essayé, mais ca ne fonctionne pas, je vais recommencer pour voir....

Riko

18 avril 2006 à 17:40:41

Salut, le code ci dessous fonctionne (tu peux prendre exemple):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">

p{
margin:0px;

}
.droite {
width: 25%;
height: 30%;
float: right;
background-color: #009966;
}
.gauche {
width: 25%;
height: 30%;
float: left;
background-color: #33CCFF;
}
.centre {
width: 40%;
height: 30%;
background-color: #FFFF99;
margin-left: 30%;
}

</style>
</head>

<body>

<div class="droite"><p>droite (float right)</p></div>
<div class="gauche"><p>gauche (float left)</p></div>
<div class="centre"><p>centre (pas de float)</p></div>

</body>
</html>

judgewax

19 avril 2006 à 17:21:20

merci beaucoup, je vais essayer

Hawks

19 avril 2006 à 17:50:20

Tu as deux solutions...

1. Les trois parties en float left
2. La partie gauche en float left, la droite en float right, et la partie central avec des marges gauche et droite qui correspondent aux largeurs des éléments gauche et droite....