Médiaforma

All posts in html5-css3-javascript

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, je vais vous montrer comment faire une mise en page sur deux colonnes. La première de largeur fixe et la deuxième qui occupe le reste de l’espace horizontal disponible.

Vous vous en doutez certainement : chacune des colonnes sera représentée par une balise <div>. Le document HTML est des plus classiques. Il contient deux balises <div> d’identifiant col1 et col2 et un texte quelconque est placé dans chacune des balises.

Le code CSS est bien plus intéressant.

Les lignes 1 à 7 définissent les caractéristiques de la première balise <div>. Cette dernière sera flottante, sur le côté gauche de la fenêtre. Elle aura une largeur de 200 pixels, une couleur spécifique et une marge intérieure de 10 pixels.

Les lignes 9 à 14 précisent les caractéristiques de la deuxième balise <div>. En définissant une marge à gauche de 220 pixels, cette balise s’insère à droite de la première balise <div>. Vous vous demandez peut-être pourquoi avoir défini une marge de 220 pixels et non de 200 pixels, puisque la première balise <div> est large de 200 pixels. Ajoutez à ces 200 pixels la marge gauche de 10 pixels et la marge droite de 10 pixels de la première balise <div> et vous obtenez une marge de 220 pixels. La ligne 12 définit la couleur d’arrière-plan de la deuxième balise <div> et la ligne 13 sa marge intérieure.

Il ne reste plus qu’à afficher le document HTML dans un navigateur. Lorsque l’on redimensionne la fenêtre du navigateur, la deuxième balise <div> s’étire pour occuper tout l’espace horizontal qui lui est donné.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, nous allons aller plus loin en définissant un bandeau ancré dans la partie supérieure de la page, un pied de page ancré dans la partie inférieure de la page, ainsi qu’un menu et une zone de contenu qui se partagent l’espace restant.

Le principe reste le même : une balise <div> occupe toute la hauteur disponible dans le navigateur et contient les autres balises, c’est-à-dire le bandeau, le menu, le contenu et le bas de page.

Examinons le code CSS.

  • Les lignes 1 à 4 indiquent que le document s’étale sur toute la hauteur de la page.
  • Les lignes 6 à 10 indiquent que le conteneur fait 800 pixels de large et s’étale sur toute la hauteur disponible.
  • Les lignes 12 à 21 définissent les caractéristiques du bandeau. Ce dernier est positionné de façon absolue, en haut et à gauche de la fenêtre. Il a une largeur de 800 pixels, une hauteur de 60 pixels, une couleur qui lui est propre et une marge de 10 pixels entoure son contenu.
  • Les lignes 23 à 31 définissent les caractéristiques du menu. Ce dernier est positionné de façon absolue, à 60 pixels du bord supérieur et à gauche. Il est large de 130 pixels, a une couleur spécifique et une marge interne de 10 pixels.
  • Les lignes 33 à 41 définissent les caractéristiques de la zone de contenu. Tout comme les autres divisions, elle est positionnée de façon absolue, à 60 pixels du bord supérieur et à 150 pixels du bord gauche. Sa largeur est égale à 650 pixels. Elle a une couleur spécifique et une marge interne de 10 pixels.
  • Enfin, les lignes 43 à 52 définissent les caractéristiques du pied de page. Ce dernier est positionné de façon absolue, en bas et à gauche de la zone d’affichage du navigateur. Il a une largeur de 800 pixels, une hauteur de 60 pixels, une couleur spécifique et une marge interne de 10 pixels.

Il ne reste plus qu’à afficher le document HTML dans un navigateur et à constater que le pied de page reste ancré à la partie inférieure de la fenêtre lorsqu’elle est redimensionnée.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans les rubriques précédentes, vous avez appris à utiliser des balises <div> pour créer une page comportant un en-tête, un bas de page, un menu et une zone de contenu. Tout cela fonctionne très bien, mais il faut bien avouer que le bas de page ne se trouve pas en bas de la page. Du moins pas dans tous les cas. Il se contente de suivre le menu et la zone de contenu. Dans cette rubrique, je vous propose de définir un bas de page qui s’affichera systématiquement en bas de la page.

Pour cela, nous allons raisonner sur un code plus simple que le précédent. Ici, nous n’utiliserons qu’une balise de contenu et une balise de bas de page. Comme vous pouvez le voir, la balise de bas de page est incluse dans la balise de contenu. Contrairement aux rubriques précédentes, où les balises de contenu et de bas de pages étaient au même niveau hiérarchique.

Ce document HTML utilise la feuille de styles styles8.css. Examinons son contenu.

Les lignes 1 à 4 indiquent que le document s’étale sur toute la hauteur de la page.

Les lignes 6 à 10 définissent les caractéristiques de la balise <div> d’identifiant contenu, c’est-à-dire de la balise qui englobe le bas de page. Cette balise occupera toute la hauteur disponible et elle aura une largeur de 800 pixels.

Les lignes 12 à 20 définissent les caractéristiques de la balise <div> d’identifiant pied, c’est-à-dire du bas de page. Cette balise est positionnée de façon absolue. En initialisant les propriétés bottom et left à 0, le pied de page sera toujours dans la partie inférieure de la fenêtre. Les dimensions du pied de page sont fixées à 800 pixels sur 60 et une couleur d’arrière-plan lui est affectée pour bien voir ses limites :

Il ne reste plus qu’à afficher le résultat dans un navigateur :

Comme vous pouvez le voir, le pied de page reste ancré à la partie inférieure de la page lorsque la fenêtre du navigateur est redimensionnée.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Vous savez maintenant définir une mise en page contenant un bandeau supérieur, une zone de contenu et un pied de page. Vous savez également cantonner chacun de ces éléments à l’espace qui lui est réservé en utilisant la propriété overflow. Que diriez-vous d’ajouter une bande verticale à gauche de la zone de contenu. Par exemple pour y placer un menu donnant accès à d’autres pages Web ? Pour cela, nous allons définir une quatrième balise <div> un peu particulière.

Nous affectons l’identifiant menu à cette balise. Puis nous y ajoutons quelques liens qui ne pointent vers aucune page spécifique. Ici, il ne tient qu’à vous de remplacer le # par de vraies URL pour rendre ces liens fonctionnels. Pour améliorer la mise en page, les liens sont placés dans une liste <ul> :

Passons au code CSS.

Un sélecteur # identifie l’attribut id de valeur menu. La largeur de la nouvelle balise <div> est fixée à 150 pixels. Sa hauteur est identique à celle de la balise de contenu : 400 pixels. Nous choisissons une couleur d’arrière-plan différente de celles utilisées dans les trois autres balises. Ici encore, le code hexadécimal a été obtenu sur le site http://www.code-couleur.com/. Pour indiquer que la balise <div> menu doit flotter sur le côté gauche, nous utilisons la propriété float et nous lui affectons la valeur left.

Il ne reste plus qu’à afficher le code HTML dans le navigateur.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la section précédente, vous avez appris à définir une mise en page élémentaire en utilisant trois balises <div>. Le code HTML s’est comporté parfaitement et le texte affecté à chaque balise est resté cantonné à la zone qui lui était affectée.

Nous allons maintenant ajouter un texte trop long dans le bandeau. Pour cela, nous remplaçons le texte “Bandeau supérieur” par deux lignes “Lorem ipsum…” en effectuant un copier/coller depuis la balise de contenu.

Exécutons ce code. Comme vous pouvez le voir, l’en-tête et la zone de contenu se chevauchent :

Pour éviter ce problème, nous allons définir la propriété overflow dans le code CSS de la balise d’en-tête :

overflow: scroll;

Exécutez le code HTML dans votre navigateur. Désormais, deux barres de défilement permettent de déplacer le contenu de l’en-tête dans l’espace qui lui est dédié. C’est-à-dire 800 pixels sur 60. Simple et efficace !

J’entends déjà certains d’entre vous me dire : “D’accord, c’est très bien, mais, la barre de défilement horizontale ne sert à rien, si ce n’est à diminuer la zone réservée au bandeau supérieur !”. Tout à fait exact. C’est pourquoi nous allons la supprimer en définissant deux propriétés overflow : une horizontale et une verticale.

overflow-y: scroll;

overflow-x: hidden;

Exécutez le code HTML. L’affichage est maintenant optimum : la barre de défilement horizontal a disparu et la barre de défilement vertical permet de se déplacer dans le texte de l’en-tête.

Pour terminer, sachez que la propriété overflow peut être initialisée avec d’autres valeurs :

  • visible : le contenu n’est pas rogné (c’est la valeur par défaut). Si le contenu dépasse la taille qui lui est allouée, il déborde.
  • auto : c’est le navigateur qui décide de l’action à accomplir en fonction de la taille du contenu.

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la section précédente, vous avez appris à utiliser les balises <div> pour créer des blocs indépendants les uns des autres. Nous allons maintenant utiliser trois balises <div> pour créer une page Web comportant un bandeau supérieur, une zone centrale et un pied de page.

Le code HTML est très simple. Après avoir fait référence à la feuille de styles styles7.css via une balise <link>, trois balises <div> sont définies les unes à la suite des autres. Pour les différentier, nous affectons un identifiant unique à chacune d’entre elles : bandeau, contenu et pied. Pour ne pas laisser les balises <div> vides, nous y ajoutons un peu de texte.

Si vous vous demandez d’où vient le texte de la balise d’identifiant contenu, j’ai simplement fait un copier-coller depuis le site http://lipsum.com :

Passons à la feuille de styles. Vous vous en doutez, elle contient les styles relatifs aux identifiants bandeau, contenu et pied. Ici, nous nous contentons de définir la largeur, la hauteur et la couleur d’arrière-plan de chaque élément :

Les codes de couleur hexadécimaux ont été créés sur le site http://www.code-couleur.com/.

Affichons la page div2.html dans Internet Explorer. Le résultat est bien conforme à ce qui était attendu :


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Pour mettre en évidence le surclassement des styles, j’ai redéfini les styles h1, h2 et h3 dans une feuille de styles externe nommée styles.css. Comme vous pouvez le voir, le style h1 aura une couleur rouge, une taille de 50 pixels et des caractères gras. Le style h2 aura une couleur bleue, une taille de 35 pixels et des caractères italiques. Enfin, le style h3 aura une couleur verte et une taille de 25 pixels.

Nous allons utiliser un document HTML élémentaire qui utilise la feuille de styles styles.css et se contente d’afficher un titre de niveau 1, un titre de niveau 2, un titre de niveau 3 et un simple texte.

Affichons ce document dans Internet Explorer. Le résultat est bien conforme à ce qui était attendu :

Nous allons maintenant surclasser le style h2 en définissant une feuille de styles interne. Pour cela, nous ajoutons une balise <style> dans l’en-tête du document et nous modifions la couleur du style h2 :

Affichons ce document dans Internet Explorer. Comme vous le voyez, la couleur du titre h2 est modifiée par le style interne. Par contre, la taille des caractères est inchangée et les caractères apparaissent en italique. Il y a donc eu un surclassement partiel du style h2.

Nous allons maintenant ajouter un attribut style dans la balise <h2>. Ici, nous demandons que les textes de style h2 soient affichés en caractères noirs :

Affichons le document ainsi modifié dans Internet Explorer. Comme vous le voyez, la couleur du titre h2 est modifiée par le style de la balise h2. Il y a donc eu un premier surclassement via la feuille de styles interne et un deuxième via l’attribut style de la balise <h2> :