Comment optimiser au mieux mon template

Bonjour à tous !

Je me suis mis depuis peu à l'intégration XHTML & CSS ( auparavant Tableau HTML & CSS ).
Avez vous des pistes pour optimiser au mieux l'integration de ce design ? Je ne m'attend pas à ce que vous me pondiez le code ^^mais j'aimerais avoir des suggestions pour m'en tirer avec un code épuré et un minimum de balise <div>

Merci d'avance
Modifié par CTKC (06 Jun 2007 - 15:04)

Salut,

On apperçoit du premier coup qu'il y a une div qui contient tout le site (qu'on nommera "global")

Dans la div "gloabal" on trouve d'autre div :

- L'en-tête qui est constituée d'un titre h1 et d'une image. ("header")
- La barre de navigation avec le fial d'ariane, le menu général et le moteur de recherche ("barre_nav")
- Le menu de gauche, il s'agit d'un titre et d'une liste ("gauche")
- Le contenu principal qui est lui-même composé de plusieurs div ("contenu")
- La colonne de droite qui est elle-même composée de 2 autre blocs ("droite")
- Le pied de page qui annule le caractère flottant des 3 précédentes div ("footer").

En code ça nous donne (très succintement) :

<div id="global">

   <div id="header">
      <h1>BARTHET OPTIC</h1>
      ...
   </div>

   <div id="barre_nav">
     <ul id="fil">
         <li>Accueil</li>
         ...
      </ul>

      <ul id="menu">
         <li>Accueil</li>
         <li>Mon panier</li>
         ...
      </ul>

      <div id="moteur_recherche">
          <label for="recherche">Recherche</label>
          <input type="text" id="recherche" />
      </div>

   </div>

   <div id="gauche">
      <h2>La boutique en ligne</h2>
      <ul>
         <li>Les collections optiques</li>
         ...
      </ul>
   </div>

   <div id="contenu">
      ...
   </div>

   <div id="droite">
     ...
   </div>

   <div id="droite">
     <p>Barthet optic...</p>
     ...
   </div>

</div>

Modifié par predator93 (06 Jun 2007 - 17:20)

Salut

CTKC a écrit :
et un minimum de balise <div>

Merci d'avance

Petit avis personnel, avec les balises <div> le problème n'est pas tant le nombre que le fait qu'elles soient en cohérence avec le reste du balisage. Notamment avec l'organisation en section telle qu'on la détermine avec la hiérarchie des titres.

Petit exemple :

<h3>Heading de niveau 3</h3>

<h4>Heading de niveau 4</h4>
<p> ... </p>
<p> ... </p>

<h4>Heading de niveau 4</h4>
<p> ... </p>
<p> ... </p>

Peut facilement et AMHA sans problème de fond donner :

<div class="conteneur_section_niveau_3">
    <h3>Heading de niveau 3</h3>
    <div class="contenu_section_niveau_3">

        <div class="conteneur_section_niveau_4">
            <h4>Heading de niveau 4</h4>
            <div class="contenu_section_niveau_4">
                <p> ... </p>
                <p> ... </p>
            </div><!-- fin .contenu_section_niveau_4 -->
        </div><!-- fin .conteneur_section_niveau_4 -->

        <div class="conteneur_section_niveau_4">
            <h4>Heading de niveau 4</h4>
            <div class="contenu_section_niveau_4">
                <p> ... </p>
                <p> ... </p>
            </div><!-- fin .contenu_section_niveau_4 -->
        </div><!-- fin .conteneur_section_niveau_4 -->

    </div><!-- fin .contenu_section_niveau_3 -->
</div><!-- fin .conteneur_section_niveau_3 -->

Bon évidemment ça peut impressionner dans un premier temps mais encore une fois c'est très cohérent.

<edit>
Et en plus très puissant pour la mise en oeuvre d'éventuelles css.
</edit>
Modifié par Christian Le Bouler (06 Jun 2007 - 18:15)

Merci pour vos conseils j'ai essayé de m'en inspirer et ça donne ça .

mais gros problème sous IE6 : la colonne centrale se positionne SOUS les colonnes de droite et gauche au lieu de se positioner au milieu

Bonjour,

Ça pourrait bien venir de ce bug d'IE6. (en anglais). En effet IE6 a la fâcheuse tendance d'ajouter 3 pixels à droite d'un flottant, et si on calcule la taille des blocs au pixel près, et bien on manque de place et le bloc se retrouve tout en bas.

Par contre, je te conseille vivement de le corriger avec des commentaires conditionnels et pas avec un hack tout moche comme le suggère le document lié ci-dessus.
Modifié par Lanza (07 Jun 2007 - 14:31)

Bonjour,

Au vu de la version de test :
- pour commencer, ça manque furieusement de titres de section (hN) et d'un texte alternatif pour l'image qui dit «La boutique en ligne» (le texte alternatif pertinent pour cette image ne devrait pas être trop dur à trouver...) ;
- ensuite, certains blocs gagneraient à ne pas être figés en hauteur (on pourra s'inspirer de ceci) ;
- enfin, il est à priori inutile de donner des largeurs fixes aux blocs enfants de div#contenu01... Pour peu que les flottants prennent un peu plus de place que prévu, les blocs de largeur fixe ne tiendront plus et passeront à la ligne. C'est sans doute ce qui se passe ici, en combinaison avec un peu de Three Pixel Jog (bug d'IE6).

CTKC a écrit :
Merci pour vos conseils j'ai essayé de m'en inspirer

Pas tant que ça finalement

Christian Le Bouler a écrit :

Notamment avec l'organisation en section telle qu'on la détermine avec la hiérarchie des titres.

Or

Florent V. a écrit :

pour commencer, ça manque furieusement de titres de section (hN)

Florent V. a écrit :
- pour commencer, ça manque furieusement de titres de section (hN) et d'un texte alternatif pour l'image qui dit «La boutique en ligne» (le texte alternatif pertinent pour cette image ne devrait pas être trop dur à trouver...) ;

exact, je m'y suis pas encore attelé

Florent V. a écrit :

- ensuite, certains blocs gagneraient à ne pas être figés en hauteur (on pourra s'inspirer de ceci) ;

Ca a l'air plus optimisé oui ! J'essaierai s'il me reste du temps

Florent V. a écrit :

- enfin, il est à priori inutile de donner des largeurs fixes aux blocs enfants de div#contenu01... Pour peu que les flottants prennent un peu plus de place que prévu, les blocs de largeur fixe ne tiendront plus et passeront à la ligne. C'est sans doute ce qui se passe ici, en combinaison avec un peu de Three Pixel Jog (bug d'IE6).

Ok merci du tuyaux !