Trucs et Astuces CSS
Chapitre 1 : Généralités sur les éléments

Retour Accueil CSS

1 Brèves en développement

Termes CSS clés employés : :hover, ::first-line
Compatibilité navigateurs : tous.

Problèmatique

Présenter sur une page plutôt concise des brèves dont seul le titre apparaît en grande taille, le reste en petite police. Lorsque l’utilisateur place le pointeur de la souris sur une brève, celle-ci se développe et apparaît de façon parfaitement lisible.

Résolution théorique

Les mots importants de la problématique permettent de définir les éléments CSS à mettre en œuvre. Chaque brève doit être un élément bloc, contenant un élément ligne (le titre) traité différement. La pseudo-classe :hover va être employée pour modifier l’aspect de l’élément brève (mais on pourrait aussi employer la pseudo-classe :focus). Souvenez-vous toujours bien du principe : HTLM sert à définir la structure du document, CSS à définir la présentation.

Résolution pratique

Première méthode :

Les brèves sont placées dans des éléments p dotés d’un attribut class, le titre étant contenu dans un élément span également doté d’un attribut class. La structure sera donc la suivante :
<p class=breve> <span class=titre>Titre</span> Contenu de la brève </p>
Dans le fichier CSS, nous définissons l’aspect de ces éléments :
p.breve {font-size: x-small} span.titre {font-size:100% ;> font-weight :bold
}

Puis ajoutons une mise en forme particulière pour la pseudo-classe :hover :
p.breve:hover {font-size: 150%}

Vous voyez ci-dessous le résultat obtenu : la brève sur laquelle se trouve le pointeur de la souris apparaît agrandie.

Lorem ipsum dolor sit amet.
Aliquam a venenatis nulla. Nunc fringilla massa ac dui interdum vulputate.

Donec ut turpis massa, et auctor velit.
Donec justo dui, viverra sed fringilla non, elementum eget libero. Integer eu lacus dui.

Etiam eget posuere velit.
Etiam aliquam metus feugiat orci adipiscing sit amet egestas erat tincidunt.

Fusce in odio ac leo scelerisque porta.
Donec at neque ut ipsum faucibus varius. Donec vitae mattis lorem. Phasellus ullamcorper elementum lacus id interdum.

Deuxième méthode :

Les brèves sont placées dans des éléments p dotés d’un attribut class. Le titre constituant la première ligne de la brève est traité à l’aide du pseudo-élément ::first-line, et donc sans recours à un élément span. La structure sera donc la suivante :
<p class=breve>Titre<br />Contenu de la brève</p>

Dans le fichier CSS, nous définissons l’aspect de ces éléments :
p.breve {font-size: x-small}
puis ajoutons une mise en forme particulière pour la pseudo-classe :hover et pour le pseudo-élément ::first-line :
p.breve::first-line { font-size:100% ; font-weight :bold }
p.breve:hover {font-size: 150%}

Vous voyez ci-dessous le résultat obtenu, analogue au précédent.

Lorem ipsum dolor sit amet.
Aliquam a venenatis nulla. Nunc fringilla massa ac dui interdum vulputate.

Donec ut turpis massa, et auctor velit.
Donec justo dui, viverra sed fringilla non, elementum eget libero. Integer eu lacus dui.

Etiam eget posuere velit.
Etiam aliquam metus feugiat orci adipiscing sit amet egestas erat tincidunt.

Fusce in odio ac leo scelerisque porta.
Donec at neque ut ipsum faucibus varius. Donec vitae mattis lorem. Phasellus ullamcorper elementum lacus id interdum.

La solution précédente est intéressante, mais cette augmentation de taille peut déformer la page, si celle-ci comporte plus d’éléments : les brèves pourraient n’occuper qu’un rectangle sur la gauche.

Lorem ipsum dolor sit amet.
Aliquam a venenatis nulla. Nunc fringilla massa ac dui interdum vulputate.

Donec ut turpis massa, et auctor velit.
Donec justo dui, viverra sed fringilla non, elementum eget libero. Integer eu lacus dui.

Etiam eget posuere velit.
Etiam aliquam metus feugiat orci adipiscing sit amet egestas erat tincidunt.

Fusce in odio ac leo scelerisque porta.
Donec at neque ut ipsum faucibus varius. Donec vitae mattis lorem. Phasellus ullamcorper elementum lacus id interdum.

Vestibulum vitae mollis mauris. Mauris euismod varius nulla congue volutpat. Donec vestibulum porta enim, ut volutpat enim congue at. Nam dapibus fringilla porta. Sed condimentum fermentum interdum. Sed urna ante, volutpat et tempor quis, dictum adipiscing ipsum. Integer laoreet ante id justo elementum ut fringilla purus convallis. Morbi suscipit purus sed nulla fringilla ultrices euismod enim feugiat. Donec justo dui, viverra sed fringilla non, elementum eget libero. Integer eu lacus dui. Ut elit felis, rutrum vitae dignissim vel, ullamcorper at lacus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae urna diam, faucibus semper est. Aliquam a venenatis nulla. Nunc fringilla massa ac dui interdum vulputate. Donec a dictum nunc. Maecenas auctor egestas dui in ullamcorper.

Nam vel nunc arcu, id eleifend metus. Nulla arcu odio, porta sed tristique et, ornare et nulla. Cras dignissim venenatis blandit. Fusce pellentesque congue lobortis. Duis lobortis suscipit quam, condimentum ornare dolor eleifend vitae. Fusce in odio ac leo scelerisque porta. Praesent at ipsum turpis, et ultrices nisi.

Il faudrait une solution analogue, mais qui ne bouleverse pas le reste de la page, grâce à une modification du positionnement de l’élément dans la pseudo-classe :hover. La propriété z-index est fixée à 3 pour que l’élément soit toujours au premier plan.
p.breve:hover { position:absolute; border:solid; top:35px; left:10%; width:600px; background-color: rgba(255,255,180,1.0);> z-index:3; font-size: 150%} }

Lorem ipsum dolor sit amet.
Aliquam a venenatis nulla. Nunc fringilla massa ac dui interdum vulputate.

Donec ut turpis massa, et auctor velit.
Donec justo dui, viverra sed fringilla non, elementum eget libero. Integer eu lacus dui.

Etiam eget posuere velit.
Etiam aliquam metus feugiat orci adipiscing sit amet egestas erat tincidunt.

Fusce in odio ac leo scelerisque porta.
Donec at neque ut ipsum faucibus varius. Donec vitae mattis lorem. Phasellus ullamcorper elementum lacus id interdum.

Vestibulum vitae mollis mauris. Mauris euismod varius nulla congue volutpat. Donec vestibulum porta enim, ut volutpat enim congue at. Nam dapibus fringilla porta. Sed condimentum fermentum interdum. Sed urna ante, volutpat et tempor quis, dictum adipiscing ipsum. Integer laoreet ante id justo elementum ut fringilla purus convallis. Morbi suscipit purus sed nulla fringilla ultrices euismod enim feugiat. Donec justo dui, viverra sed fringilla non, elementum eget libero. Integer eu lacus dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae urna diam, faucibus semper est. Aliquam a venenatis nulla. Nunc fringilla massa ac dui interdum vulputate. Donec a dictum nunc. Maecenas auctor egestas dui in ullamcorper.

Nam vel nunc arcu, id eleifend metus. Nulla arcu odio, porta sed tristique et, ornare et nulla. Cras dignissim venenatis blandit. Fusce pellentesque congue lobortis. Duis lobortis suscipit quam, condimentum ornare dolor eleifend vitae. Fusce in odio ac leo scelerisque porta. Praesent at ipsum turpis, et ultrices nisi.

Une autre solution pourrait être de recourir à la technique plus évoluée des infobulles, exposée plus loin.


Retour Accueil CSS

© 1999-2014 Fabrice "Fyndhorn Elder" Lemainque