[Résolu] Faire une disposition sans table

SiZiOUS · le 22 septembre 2006

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".

1,5 k · le 22 septembre 2006

Toi il te faut des cours

http://pompage.net/pompe/cssdezero-1/

Reprends bien tout depuis le debut, sans rien sauter, le CSS n'aura plus de secrets pour toi

SiZiOUS · le 23 septembre 2006

Merci pour ton lien 6. Cette page en particulier m'intéresse beaucoup

Merci beaucoup.

bad wolf · le 26 septembre 2006

http://css.alsacreations.com/modeles/modele4.htm

clic droit / afficher le code source

pour d'autre styles de mise en page : http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

SiZiOUS · le 26 septembre 2006

Merci bad10 mais j'avais déjà réussi avec le tutorial de 6

J'avoue ne pas avoir pensé d'aller voir ce fabuleux site qu'est Alsacreations, j'y penserais la prochaine fois

Connexion

[Résolu] Faire une disposition sans table

Messages recommandés

SiZiOUS

Lien vers le commentaire

Partager sur d’autres sites

6

Lien vers le commentaire

Partager sur d’autres sites

SiZiOUS

Lien vers le commentaire

Partager sur d’autres sites

bad wolf

Lien vers le commentaire

Partager sur d’autres sites

SiZiOUS

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Statistiques des membres

Statistiques des forums