28220 sujets

CSS et mise en forme, CSS3

Structure CSS en divisions

Bonjour,

J'ai lu que la meilleure façon de structurer un site Web était en utilisant des divisions. Voyons le code ci-desous :


     <div id="menus"> 
      <div class="menu"> 
       <ul class="menu"> 
        <li>Lien</li> 
        <li>Lien</li> 
        <li>Lien</li> 
        <li>Lien</li> 
       </ul> 
      </div> 
      <div class="menu"> 
       <ul class="menu"> 
        <li>Lien</li> 
        <li>Lien</li> 
        <li>Lien</li> 
        <li>Lien</li> 
       </ul> 
      </div> 
     </div> 
      
     <div id="contenu"> 
      blablabla blablabla blablabla blablabla 
     </div>


et la feuille de styles suivante :


div#menus 
{ 
 border-width : 0px; 
 float : left; 
} 

div.menu 
{ 
 width : 150px; 
} 

ul.menu 
{ 
 margin-left : 20px; 
 margin-bottom : 0px; 
} 

div.menu, div#contenu 
{ 
 padding : 5px; 
} 

div#contenu 
{ 
 width : 100%; 
 text-indent : 25px; 
}


je me suis fait dire que mon code n'était pas bon.
pourtant, cela fonctionne bien, mais il paraît que je pourrais faire encore mieux.
j'ai 2 menus et un centre avec le contenu. je voulais que le centre soit à droite des menus. mes menus sont donc des sous-divisions que j'ai placé dans une division à gauche, et le centre une division du côté droit.

ma page est elle-même toute dans une division centrée qui mesure 100% avec 10px de marge gauche/droite. le but de mon site est donc qu'il soit visible sous toutes les résolutions d'écran au mieux possible.

mon code fonctionne parfaitement mais on m'a dit qu'il ne l'était pas.
quelqu'un peut me dire ce qui est incorrect ?

Merci d'avance...
Modifié par azix58 (03 Mar 2005 - 18:04)
Tu utilises la classe « menu » pour définir deux éléments différents (div.menu et ul.menu) avec des déclarations différentes, ce qui peut porter à confusion.

Par ailleurs, un « id » bien défini rend souvent superflu l'usage de classes à l'intérieur de celui-ci.

Exemple :

<div id="monmenu">
 <ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
 </ul>
</div>

Et :

#monmenu ul { /* les ul contenus dans la division monmenu */
   property: value;
}

#monmenu li { /* les li contenus dans la division monmenu */
   property: value;
}

Lire : Quelle est la différence entre une classe et un id ?
vous avez raison en ce qui concerne ma classe dans un id
merci

la division me sert en faite à mettre des bordures autour de mon menu
j'ai lu que ul était aussi un bloc et que je ne devrais pas mettre de div, mais avec ul, je ne peux pas mettre de bordure. si j'en met, les puces sont à l'extérieure des bordures, pas besoin de vous dire que le résultat est moche.

voilà, j'inclus la classe de mes divisions...


div
{
 border-width : 1px;
 border-style : solid;
 border-color : #A0A0A0;
 background-color : #EEEEEE;
}


donc, toujours en me fiant aux articles de ce site, j'ai 3 blocs pour afficher un menu.

un bloc conteneur, deux sous-conteneur (titre/menu)
en faite, j'ai sur ma gauche 2 divisions, une un peu plus foncée où c'est écrit "Menu", et l'autre avec les liens du menu dans une liste à puces
puisque je voulais afficher à droite de ces 2 divisions une autre division, le centre, j'ai dû réunir mes 2 divisions de gauche en une... et dans la division du menu, j'ai le bloc ul... donc j'ai 5 blocs pour afficher un titre, un menu et à leur droite le centre...

disons qu'il doit y avoir moyen de faire ça plus simple
mais j'ignore comment

merci d'avance
Modifié par azix58 (03 Mar 2005 - 20:27)
Sujet clos
Aller à