prblème bloc div

Fabious62 · Message par **Fabious62** » 22 mai 2007, 17:04

Bonjour tlm,

désolé de reposter un message aussi vite mais j'ai un petit problème encore... ( et oui je débute!

)

Alors voilà je voudrais faire un site qui se componse de la façon suivante : (construit avec des <div>)

1 header 1 footer; un centre qui contient en mm tps le menu; et 2 colonnes, une à gauche et l'autre à droite.

Voilà le problème vient des colonnes + le centre : je voudrais que leur "haut" soit à la même hauteur (sur la même ligne). Mais je n'arrive pas pas

Par exemple si je met margin-top:100px; à touts les éléments, et bien la colonne de gauche sera à 100px, mais le centre sera "sur la ligne" en dessous de cette colonne, et la colonne de droite sera en dessous du centre !

Je ne suis vraiment pas doué pour m'expliquer mais j'espere que qqn aura compris ce que je voulais dire

Voici mon code pour les blocs :

Code : Tout sélectionner

<body>
<div id="content">
  <div id="header"></div>
    <div id="cgauche"></div>
        <div id="centre"><div id="menu"></div></div>
    <div id="cdroite"></div>
  <div id="footer"></div>
</div>
</body>

Merci d'avance !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Message par **chinon37** » 23 mai 2007, 08:56

voici une base de travail. j'ai mis des couleurs pour que tu te repères.
Pour modifier la taille des blocs, les couleurs (pour les supprimer), il suffit d'aller dans l'éditeur css.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      essai
    </title>
    <style type="text/css">
#menu {
    float: left;
    width: 200px;
    height: 400px;
    background-color: #cccccc;
    }
    #centre {
    margin-left: 201px;
    height: 400px;
    background-color: #ccccff;
    margin-right: 201px;
    }
    #cdroite {
    float: right;
    width: 200px;
    height: 400px;
    background-color: #ff99ff;
    }
    #footer {
    border-style: solid;
    border-color: #ffccff;
    background-color: #ffcc33;
    }
    #header {
    background-color: #00cccc;
    }

    </style>
  </head>
  <body>
    <div id="content">
      <div id="header">
        header
      </div>
      <div id="menu">
        menu
      </div>
      <div id="cdroite">
        cdroite
      </div>
      <div id="centre">
        centre
      </div>
      <div id="footer">
        footer
      </div>
    </div>
  </body>
</html>

Dans une nouvelle page, tu copie ce code dans l'onglet source après avoir supprimer tout ce que contient cet onglet.
Bon courage

Fabious62 · Message par **Fabious62** » 23 mai 2007, 09:37

Et bien je te remercie beaucoup;

Cela m'aide beaucoup à comprendre comment bien placer ses <div>

encore merci

edit : juste encore une petite question; que signifie float: right; ? c'est en rapport avec la position ? (comme position :absolute; ?)
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Message par **chinon37** » 23 mai 2007, 10:52

float veut dire "flottant"

ainsi ton menu est flottant à gauche et ton autre div (cdroite) est flottant à droite.
une position float gauche place le bloc près du bord gauche du bloc conteneur.

Pour aligner les trois blocs gauche, centre et droit, il faut faire attention à l'ordre dans le code qui doit être:
bloc gauche, bloc droit, centre. Sinon, les blocs vont se placer les uns en dessous des autres au lieu de s'aligner.

Geckozone

prblème bloc div

prblème bloc div

Qui est en ligne ?