Titre de niveau 2

début d'un patchworkTitre de niveau 3

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Titre de niveau 3

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 

dessus de lit d'enfant

Titre de niveau 3

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 

Tutoriel : menu horizontal et menu vertical

Structure HTML

structureTous les blocs structurants sont contenus dans une sorte d'enveloppe que nous appelons le bloc #wrapper.  Il contient 4 blocs principaux.

  1. le bloc #header est une div
  2. le bloc #menuH est une liste à puces de liens; les list item sont flottants à gauche pour avoir un menu horizontal. Nous donnerons aux liens l'affichage bloc pour pouvoir les styler
  3. le bloc #affiche, arrête le flottement des list item, il contient les 2 blocs enfants  #menuV et #content
    • le bloc #menuV est une div contenant 3 blocs identiques stylés par une class .element-menu. Ce bloc #menuV a une largeur déterminée et il est flottant à gauche
    • le bloc #content a une marge gauche plus large que la largeur de  #menuV. Tout le contenu de #content va donc remonter à droite du menu vertical.
  4. le bloc footer arrête le flottement du bloc menuV
étape1
étape2
étape 3
étape 4

Feuille de style

body 990px de large, centré, couleur d'arrière plan gris moyen #999999,  image d'arrière plan se répétant horizontalement et verticalement qui défile avec la page.

#wrapper couleur d'arrière plan gris foncé #666666

bandeau avec zone neutre au centre#header hauteur et hauteur de ligne 168px comme l'image d'arrière plan. Le bandeau tient compte d'une zone plus neutre au centre pour que le titre h1soit mieux lisible. Faire un retour charriot puis écrire le titre et lui donner le niveau h1, lui donner sa taille de police et le positionner par des marges haute et gauche

#menuH : cet identifiant est appliqué à la liste ul : tout à zéro, pas de puces type; ensuite pour séparer ce bloc de celui qui le précède nous lui donnons une marge haute de 10px

structure du bloc menuH#menuH li flottent à gauche; dès que les items sont alignés nous pouvons spécifier la hauteur du bloc menuH : 30px.

#menuH a ont un affichage bloc, 120px de large, texte centré, séparés par des marges droites de 10px. Le texte est centré verticalement (en tenant compte de la décoration) par des paddings haut 10px et bas 3px.

#affiche nous lui attribuons la propriété clear:both et nous lui donnons une marge haute de 10px pour la séparer du bloc qui la précède.

structure du bloc menuV et ses enfants#menuV est une div de 120px de large, elle flotte à gauche dans la marge gauche un peu plus grande de #content.
Elle contient plusieurs div enfants stylés par une class .element-menu

 padding: 20px 5px 10px 10px;
margin-bottom: 10px;
background-color: #ebceb3;
background-image: url(images/motif.png);
background-repeat: repeat-x;
chacune contient un titre de niveau 3 suivi d'une liste à puces

#content a une marge gauche gauche de 130px, elle est donc séparée de #menuV par 10px. Le contenu de content ne passera jamais sous menuV.

#footer : dégagement des 2 côtés

Décoration

quadrillage motif décoratif image transparente hélice

Cas particulier de l'image flottante du premier paragraphe

Il n'est pas possible ici d'appliquer au titre du deuxième paragraphe la propriété clear:both car le menu vertical étant lui aussi flottant, ce titre descendrait sous le menu. Pour que ce deuxième titre descende uniquement sous l'image flottante nous donnons au premier paragraphe une hauteur convenable.

Cas particulier des demi-paragraphes flottants à gauche du bas de la page

Pour éviter les paragraphes de plus de 3 lignes prenant toute la largeur de la page, que les visiteurs ne lisent pas, nous avons opté pour une présentation en colonnes comme dans un journal.

structure de la présentation en colonnes
  1. A la suite du titre nous faisons une première div dans laquelle nous collons le texte coupé du premier alinéa.
  2. Dans la feuille de style nous créons une class .demiParagraphe
    • width: 390px;
    • float: left;
    • text-align: justify;
  3. Nous appliquons la class à cette première div.
  4. Nous positionnons notre curseur en haut à droite et à l'extérieur de cette div pour créer notre deuxième div dans laquelle nous collons le texte coupé du deuxième alinéa.
  5. Nous appliquons la même class à cette deuxième div.
  6. Pour séparer les 2 div qui se collent nous appliquons à celle de gauche une marge droite convenable, ici 20px.
  7. Pour dégager le flottement de ces 2 éléments nous faisons suivre le dernier demi-paragraphe par un paragraphe vide ayant, en interne, la propriété clear:both. (c'est la ligne rouge épaisse de la copie d'écran "Entourer les éléments de type block")

Variante : bloc menuH dans le bas du bloc header

Aperçu du rendu et voir les CSS dans la feuille de style interne

Retour liste exercices 2010-2011              Haut de page