Article précédent
Feuilles de style CSS - Évolution des technologies du webARCHIVE | Réf : H7163 v1
Auteur(s) : Nadine SAINT-AMAND
Date de publication : 10 mai 2008
Article suivant
Ergonomie des documents numériquesCet article fait partie de l’offre
Documents numériques Gestion de contenu (63 articles en ce moment)
Cette offre vous donne accès à :
Une base complète et actualisée d'articles validés par des comités scientifiques
Un service Questions aux experts et des outils pratiques
Quitter la lecture facile
Au-delà des propriétés de base des CSS, c'est toute la mise en page : la disposition, la position et la dimension des éléments, qui se paramètre par une feuille de style. C'est l'expression de la vue de données révélant une sémantique d'une manière personnalisée.
5.1.1 Dimensionnement élastique versus dimensionnement fixe
Le dimensionnement des éléments de mise en page peut être relatif à la taille totale de la page ; il est alors dit élastique (ou « liquide ») et s'exprime en pourcentage (figure 10).
À l'opposé, il y a les éléments de taille fixe, ne variant pas si on redimensionne la fenêtre du navigateur ou le contenant (figure 11).
Il est possible de combiner des dimensions fixes et relatives comme par exemple dans une mise en page comprenant une bordure image de taille fixe et dans laquelle l'espace restant de la hauteur ou de la largeur est utilisé pour étaler le contenu (figure 12). La spécification ne permet pas directement par exemple de dire qu'une taille d'élément sera 100 % de la page moins 100 pixels car il n'y a pas de support pour les expressions dans le langage CSS. Cependant, les développeurs exploitent la propriété faisant que la marge externe est partie prenante de la largeur totale, et spécifieront par exemple une marge de 100 pixels et laisseront le contenu central s'étirer dans l'espace restant (figure 13). Cette technique n'est pas sans rappeler la notation des <frame>, dans laquelle le symbole étoile (*) désigne l'espace restant.
La spécification de la largeur est complexe à implémenter dans une mise en page combinant des parties fixes et élastiques.
Exemple : simulation d'expressions par utilisation de l'espace restant
div.contenu{
position:absolute;
margin-left:100px;
left:0px;
z-index:1;
}
div.menu{
position:absolute;
width:100px;
left:0px;
z-index:2;
}
Vous êtes abonné à cette offre ?
Connectez-vous !
Vous souhaitez découvrir cette offre ?
Cet article est inclus dans l'offre :
DOCUMENTS NUMÉRIQUES GESTION DE CONTENU
DÉTAIL DE L'ABONNEMENT :
TOUS LES ARTICLES DE VOTRE RESSOURCE DOCUMENTAIRE
Accès aux :
Articles et leurs mises à jour
Nouveautés
Archives
Formats :
HTML illimité
Versions PDF
Site responsive (mobile)
Info parution :
Toutes les nouveautés de vos ressources documentaires par email
DES SERVICES ET OUTILS PRATIQUES
Votre site est 100% responsive, compatible PC, mobiles et tablettes.
FORMULES
| Formule monoposte | Autres formules | |
|---|---|---|
| Ressources documentaires | ||
| Consultation HTML des articles | Illimitée | Illimitée |
| Téléchargement des versions PDF | 5 / jour | Selon devis |
| Accès aux archives | Oui | Oui |
| Info parution | Oui | Oui |
| Services inclus | ||
| Questions aux experts (1) | 4 / an | Jusqu'à 12 par an |
| Articles Découverte | 5 / an | Jusqu'à 7 par an |
| Dictionnaire technique multilingue | Oui | Oui |
|
(1) Non disponible pour les lycées, les établissements d’enseignement supérieur et autres organismes de formation. |
||
| AJOUTER AU PANIER | DEMANDER UN DEVIS | |
Information
Quiz d'entraînement bientôt disponible
