• Centrages

    Beaucoup d'entre nous utilisent les tableaux pour créer des cadres; cela permet de centrer horizontalement et verticalement le texte ou l'image contenu.

    On peut aussi, créer des cadres en code source pour avoir accès à plus de possibilités.

     

    Voici un cadre de 150px de large par 40px de large:<p style="width: 150px; height: 30px; border: 1px solid black;">&nbsp;</p>

    Si nous écrivons un texte dans ce cadre, il va se placer, par défaut, en haut à gauche.

    Texte

    <p style="width: 150px; height: 40px; border: 1px solid black; font-size: 15pt;">Texte</p>

    Texte

    <p style="width: 150px; height: 40px; border: 1px solid black; font-size: 15pt; text-align:center;">Texte centré horizontalement.</p>

    Texte

    <p style="width: 150px; height: 40px; border: 1px solid black; font-size: 15pt; text-align:center; line-height:40px;">Texte centré horizontalement et verticalement.</p>

    La hauteur du cadre étant de 40px, on indique que la hauteur de la ligne de texte est de 40px et la taille de la police est toujours de 15pt.
    On peut utilisr cet attribut pour que notre texte soit vertical, même s'il existe d'autres moyens.

    Texte

    <p style="float: left; width: 15px; border: 1px solid black; font-size: 15pt; text-align: center; line-height: 20px;">Texte</p>
    La largeur du cadre est réglée à la largeur d'une seule lettre et la hauteur n'est pas précisée: le cadre va adapter la hauteur au contenu.
    L'espace entre chaque lettre est réglé par la hauteur de line-height.

    Nous pouvons ajouter des lignes CSS pour modifier l'aspect du cadre au survol ou au clic

     

    <p id="c1" >&nbsp;</p>
    <style><!--
    #c1{ float: left; width: 150px; height: 40px; border: 1px solid black; background:pink; margin: 0 20px 0 0;}
    #c1:hover{background:lime;}
    --></style>

    Si nous voulons avoir un cadre apparent et un contenant visible seulement au survol, il va falloir créer le cadre avec dedans, le contenu avec animation CSS; pour cela, le cadre sera une div et le texte un paragraphe identifié: survolez cet exemple.

    Texte

    <div style="float: left; clear: left; width: 150px; height: 40px; border: 1px solid black; margin: 0 20px 5px 0;">
    <p id="c2" style="float: left;">Texte</p>
    </div>
    <style><!--
    #c2{width: 150px; height: 40px;font-size: 15pt; text-align: center; line-height:40px; opacity:0; background:lime; }
    #c2:hover{opacity:1;}
    --></style>

    Si vous souhaitez faire ce que j'ai fait dans l'article "A la manière de", c'est à dire laisser certaines lettres apparentes et d'autres visibles seulement au survol, il vaous faudra décomposer votre texte en parties visibles et parties invisibles: exemple au survol.

     

    T

    E

    X

    T

    E

    <div style="float: left; clear: left; width: 150px; height: 40px; border: 1px solid black; margin: 0 20px 5px 0; line-height: 40px; text-align: center; font-size: 20pt;">
    <p id="c3">&nbsp;</p>
    <p style="float: left; margin: 0 0 0 30px;">T</p>
    <p id="c4" style="float: left;">E</p>
    <p style="float: left;">X</p>
    <p id="c4" style="float: left;">T</p>
    <p style="float: left;">E</p>
    </div>
    <style><!--
    #c3{position:absolute; z-index:5; width: 150px; height: 40px; }
    #c4{opacity:0;}
    #c3:hover ~ #c4{opacity:1;}
    --></style>

    Cette façon de faire oblige à multiplier les lignes CSS en fonction du nombre de lettres visibles et invisibles.
    Cela oblige également à ajouter un cadre invisible (#c3) qui va animer l'ensemble des lettres invisibles au survol du montage; il sera placé en premier plan (z-index:5;)