Médiaforma

All posts tagged div

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

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

La balise <div> </div> est un élément essentiel en programmation HTML/CSS. Elle permet de définir une zone rectangulaire dans laquelle seront affichés divers éléments textuels, graphiques ou vidéo.

Une division (parfois appelée boîte) est caractérisée par plusieurs propriétés CSS :

–          ses dimensions : with (largeur) et height (hauteur) ;

–          ses marges intérieures : padding ;

–          ses marges extérieures : margin ;

–          sa couleur d’arrière-plan : background-color ;

–          sa bordure : border.

Les marges intérieures peuvent être identiques en haut, en bas, à droite et à gauche. Dans ce cas, vous utiliserez la propriété margin. Par contre, si vous voulez définir des marges intérieures différentes, vous devrez utiliser les propriétés margin-top, margin-bottom, margin-left et margin-right.

Il en va de même pour les marges extérieures. Si elles sont identiques, utilisez la propriété padding. Si elles sont différentes, utilisez les propriétés padding-top, padding-bottom, padding-left et padding-right.

Nous allons faire une première approche des balises <div> en écrivant quelques lignes de code :

Le corps du document contient deux <div>. La première a pour identifiant div1 et contient du texte. La deuxième a pour identifiant div2 et contient une image.

Comme vous le voyez, ce document HTML n’utilise aucune feuille de styles. Voyons le résultat dans Internet Explorer. Le texte et l’image sont affichés l’un à la suite de l’autre, comme s’ils étaient séparés par un passage à la ligne <br>.

Pour montrer l’intérêt des balises <div>, nous allons attacher la feuille de styles styles6.css au document et y définir les caractéristiques des deux balises <div>.

Avant de commencer à écrire le code CSS, nous ajoutons une balise <link> dans le document pour faire référence à la feuille de styles :

<link rel=”stylesheet” href=”styles6.css” />

Commençons par définir le style de la balise d’identifiant div1. Ses dimensions sont fixées à 400 pixels horizontalement et à 200 pixels verticalement. Ses marges extérieures sont fixées à 30 pixels. Sa marge intérieure supérieure est fixée à 40 pixels. Sa couleur d’arrière-plan est rouge. Enfin, sa bordure est épaisse de 2 pixels, continue et de couleur noire.

Définissons le style de la balise d’identifiant div2. Ses dimensions sont fixées à 300 pixels horizontalement et à 200 pixels verticalement. Ses marges extérieures sont fixées à 0 pixels. Ses marges intérieures sont fixées à 0 pixels. Sa couleur d’arrière-plan est bleue. Enfin, sa bordure est épaisse de 4 pixels, pointillée et de couleur rouge.

Voyons le résultat dans Internet Explorer.

Remarquez en particulier :

–          la marge autour de la première div, qui a été fixée à 30 pixels par la propriété margin ;

–          la marge intérieure supérieure de la première div, fixée à 40 pixels par la propriété padding-top ;

–          la position de l’image dans la deuxième <div>. Elle se retrouve “collée” à l’angle supérieur gauche de la division car la propriété padding a été initialisée à 0 ;

–          aucune marge n’ayant été définie pour la deuxième <div>. Elle se retrouve calée sur le côté gauche de la zone d’affichage.


Cette rubrique va vous montrer comment centrer horizontalement une balise <div> en utilisant quelques lignes de CSS. Dans cet exemple, la balise <div> contient quelques lignes de texte, mais vous auriez tout aussi bien pu y placer d’autres éléments, comme des images et/ou des vidéos par exemple.

La balise <div> est de style aucentre. Le centrage de la balise se fera donc dans la classe aucentre. Pour bien discerner les limites de la balise <div>, un arrière-plan de couleur jaune et une bordure groove continue de couleur rouge sont définis. La largeur de la balise est fixée à 300 pixels. L’astuce réside dans l’utilisation de la propriété margin, qui fixe les marges de la balise. Dans cet exemple, les marges supérieure et inférieure sont nulles et les marges gauche et droite s’adaptent automatiquement aux autres caractéristiques de la balise. Etant donné que la largeur de la balise a été fixée à 300 pixels, les marges gauche et droite se répartissent également la place restante.

Voici le résultat dans Internet Explorer :