• Cellule tableau

    Pouvoir donner des caractéristiques d'un tableau à un paragraphe peut être intéressant pour la présentation d'un texte.

    Survolez chaque cadre pour l'afficher au premier plan.

    Le premier paragraphe texte.

    Vous regrettez peut-être les possibilités offertes par les tableaux, dont le centrage vertical du texte.
    Un paragraphe peut retrouver ces possibilités en lui donnant les caractéristiques d'une cellule tableau par l'attribut: display:table-cell;

    Dans cet exemple, vous trouverez aussi l'attribut: word-wrap:normal; qui indique au programme de ne pas couper un mot pour changer de ligne.
    Et bien sûr, l'attribut:padding qui crée un espace entre la bordure et le texte.

    <div style="width: 80vw; height: 92vh; border: 0.3vh ridge white; margin: 2vh auto; background: url('http://ekladata.com/NWbw61fdHzLcy_DnGdqeJdxWWec.jpg'); background-size: 80vw 92vh;">
    <p id="tc0">Survolez chaque cadre pour l'afficher au premier plan.</p>
    <p id="tc1">Le premier paragraphe texte.</p>
    <p id="tc2">Vous regrettez peut-&ecirc;tre les possibilit&eacute;s offertes par les tableaux, dont le centrage vertical du texte.<br />Un paragraphe peut retrouver ces possibilit&eacute;s en lui donnant les caract&eacute;ristiques d'une cellule tableau par l'attribut: display:table-cell;</p>
    <p id="tc3">Dans cet exemple, vous trouverez aussi l'attribut: word-wrap:normal; qui indique au programme de ne pas couper un mot pour changer de ligne.<br />Et bien s&ucirc;r, l'attribut:padding qui cr&eacute;e un espace entre la bordure et le texte.</p>
    </div>
    <style><!--
    #tc0{position:absolute; z-index:1; display:table-cell; width:8vw; border-radius:50%; padding:3vh; border:0.3vh solid white; box-shadow:0.1vh 0.1vh 03vh black; transform:translate(10vw,10vh) rotate(0deg); text-align:center; font-size:3vh; background:linear-gradient(to bottom, rgba(100,100,0,0.5) 0%, rgba(0,100,0,0.3) 100%); word-wrap:normal;}
    #tc1{position:absolute; z-index:1; display:table-cell; width:8vw; border-radius:50%; padding:3vh; border:0.3vh solid white; box-shadow:0.1vh 0.1vh 03vh black; transform:translate(17vw,40vh) rotate(10deg); text-align:center; font-size:3vh; background:linear-gradient(to bottom, rgba(100,0,0,0.5) 0%, rgba(0,100,0,0.3) 100%); word-wrap:normal;}
    #tc2{position:absolute; z-index:1; display:table-cell; width:20vw; padding:3vh; border:0.3vh solid white; box-shadow:0.1vh 0.1vh 03vh black; transform:translate(25vw,10vh) rotate(-5deg); text-align:center; font-size:3vh; background:linear-gradient(to bottom, rgba(0,0,100,0.5) 0%, rgba(0,0,100,0.3) 100%); word-wrap:normal;}
    #tc3{position:absolute; z-index:1; display:table-cell; width:20vw; padding:3vh; border:0.3vh solid white; box-shadow:0.1vh 0.1vh 03vh black; transform:translate(45vw,25vh) rotate(10deg); text-align:center; font-size:3vh; background:linear-gradient(to bottom, rgba(255,0,100,0.5) 0%, rgba(255,0,100,0.3) 100%); word-wrap:normal;}
    #tc0:hover,#tc1:hover,#tc2:hover,#tc3:hover{z-index:5; background:rgba(255,255,255,0.7);}
    --></style>

    Les dimensions de cet exemple sont en unités adaptatives mais vous pouvez , soit les modifier, soit les transformer en unité fixes (px).

    Chaque paragraphe est positionné en absolute, c'est à dire indépendant des autres éléments.

    Chaque paragraphe s'affiche avec les caractéristique d'une cellule de tableau: display:table-cell;

    Positionnement par transform:translate() rotate();, présentation par width (largeur), border-radius (arrondi), box-shadow (ombre), background en dégradé.

    Le texte est centré horizontalement par text-align:center;

    Le texte est centré verticalement par le fait que la hauteur de mes cadres n'est pas imposée; sinon: vertical-align:middle; si votre paragraphe a une hauteur précise.

    Le texte ne s'approche pas à plus de 3vh de la bordure par padding:3vh;

    Les mots du texte ne sont pas découpés pour changer à la ligne par word-wrap:normal;