« Le langage CSS/Les sélecteurs » : différence entre les versions
Contenu supprimé Contenu ajouté
Ligne 542 :
Ici les liens pointant vers les titres des sections sont placés dans des listes de liens imbriquées. Maintenant nous souhaiterions que cette table des matières soit placée soit dans un cadre flottant à droite ou à gauche du texte, soit à gauche en occupant toute la largeur de la page (positionnement par défaut), selon l'humeur de l'administrateur (ou un paramètre utilisateur ?). Le plus simple est d'ajouter simplement des classes ''float'' et ''left'' ou ''right'' à l'élément conteneur dans les deux premiers cas, par exemple :
<syntaxhighlight lang="html">
...
</syntaxhighlight>
On peut ensuite ajouter les règles suivantes dans les styles CSS :
<syntaxhighlight lang="css">
margin: 0.5em; /* garder de la place pour le texte autour et dedans */▼
{
padding: 0.5em 0.25em;▼
▲ margin: 0.5em; /* garder de la place pour le texte autour et dedans */
border: 1px solid #44a; /* faire un encadré */▼
▲ padding: 0.5em 0.25em;
background-color: #fafafa;▼
▲ border: 1px solid #44a; /* faire un encadré */
}▼
▲ background-color: #fafafa;
div.float.left {▼
float: left;▼
margin-left: 0; /* se coller contre le bord gauche de la page */▼
}▼
{
div.float.right {▼
float:
margin-
/* stylisation de la TDM */▼
{
div#tdm h1 {...}▼
div#tdm ol {...}▼
div#tdm li {...}▼
</syntaxhighlight>
Les classes génériques auront alors intérêt à être placées dans un fichier CSS séparé afin d'être facilement importées dans un autre projet web.
| |||