Page Web 99 de tests.

<div> indique un début de section, avec retour à la ligne. Fin : </div>
<span> indique un début d'un texte, sans retour à la ligne. Fin : </span>

Le fond de ce paragraphe
est de couleur cyan.
Cyan est le nom plus précis pour définir la couleur bleu ciel.

J'écris une ligne, avec un mot plus petit que le reste de la phrase.

Ceci est un paragraphe centré.

Ceci est un paragraphe centré.


Comment aligner verticalement une image avec un texte ?
Ici, l'utilisation de la balise <table> est utilisé, c.f. code source.
Une image alignée  
verticalement
avec un texte.
Accident_de_F1  

Une image alignée verticalement avec un texte.  
Utilisant la propriété : display:inline-block
et la propriété : vertical-align:middle
Accident_de_F1  

Un texte, suivit d'une image ayant un texte écrit sur l'image.


Utilisation d'une table de plusieurs lignes et plusieurs colonnes.
Ici, l'utilisation de la balise <table> est utilisé, c.f. code source.
ligne 1 ; colonne 1 ligne 1 ; colonne 2 ligne 1 ; colonne 3
ligne 2 ; colonne 1 ligne 2 ; colonne 2 ligne 2 ; colonne 3
ligne 3 ; colonne 1 ligne 3 ; colonne 2 ligne 3 ; colonne 3
ligne 4 ; colonne 1 ligne 4 ; colonne 2 ligne 4 ; colonne 3

Modification d'une image lorsque l'on passe dessus avec la souris : perle_000

En passant sur une image, une autre image change





Apparition d'un texte lorsque l'on passe dessus avec la souris :
Texte

Apparition d'un texte lorsque l'on passe dessus avec la souris : Texte
Par défaut, le texte est de la même couleur que le fond. Sa couleur change lorsqu'on passe sur le rectangle avec la souris, ce qui fait apparaître le texte. C'est du bidouillage, mais cela fonctionne ainsi.
La variante suivante a l'avantage d'avoir une image de fond.

Apparition d'un texte lorsque l'on passe dessus avec la souris : Texte

Ebauche de bouton, qui réagissent au passage de la souris.
Chacun réagit un peu différemment. c.f. display:inline-block
Page 01 Bouton 02 Page 03 Page 04

Si on veut placer une image, la proriété CSS float est intéressante.

Astuce pour mettre en amoindrire tout, sauf ce sur quoi la souris se trouve.
http://css-tricks.com/examples/HoverEverythingBut/   et
http://css-tricks.com/hover-on-everything-but/


Plan du Site : Home     page99_tests.html


Page mise à jour le 1 décembre 2013 par Bernard Gisin
Hébergement par : www.infomaniak.ch