Aller au contenu

[Résolu] Faire une disposition sans table


SiZiOUS

Messages recommandés

Salut à tous,

 

Voilà j'essaye de faire un layout sans tables, en utilisant les div et les CSS. Le problème c'est que même pour faire un truc simple c'est trop prise de tête, je m'embrouille comme pas possible avec les blocs en position float et ça me fait n'importe quoi (genre quand y'a trop de texte le bloc descends plus bas...). C'est bizarre et je comprends pas pourquoi ça fait ça.

 

J'aimerais avoir ça :

 

Voici mon code HTML :

<body>

<div id="container">

   <!-- Logo -->
   <div id="logoheader">head</div>
   
   <!-- Menu -->
   <div id="menu">
       menu......
   </div>

   <!-- Left menu -->
   <div id="leftcontent">
           <ul>
               <li><a href="#">Menu 1</a></li>
               <li><a href="#">Menu 2</a></li>
           </ul>
   </div>    


   <!-- main content -->
   <div id="content">
   <h1>
       CONTENU ... blablabla
   </h1>
   
   </div>

   <!-- footer -->
   <div id="footer">footer</div>

</div>

</body>

Et voici le CSS :

body {
   margin: 10px;
   font-family: Trebuchet MS;
   font-size: 12px;
}

div {
   border: red 2px solid;
}

/* Parties générales */

div#container {
   width: auto;
}

div#logoheader {
   text-align: left;
}

div#leftcontent {
   float: left;
   width: 180px;
   height: 100%;
}

div#content {
   float: top;
   /* float: left; */
   width: auto;
}

div#footer{
   clear: both;
   width: 100%;
}

Voilà merci beaucoup pour votre aide. Si vraiment ça me prend trop la tête ça sera avec des tables... Mais bon je me suis dit autant me mettre au CSS "pour de vrai".

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
  • Statistiques des membres

    23 028
    Total des membres
    1 033
    Maximum en ligne
    Subaru
    Membre le plus récent
    Subaru
    Inscription
  • Statistiques des forums

    128,1 k
    Total des sujets
    1,7 M
    Total des messages
×
×
  • Créer...