• (CONSERVER) CSS comm. staff = Titre/header et avatar

     


    (le CSS en question est dans le code source de cet article)

    infos stormalo :

    Dans le header des commentaires, figure le PSEUDO. Par CSS ont peut insérer avant (:before) ou après (:after)
    La forme ovale, c'est une couleur de fond + une bordure, appliquée sur le :after. 
    La lampe de bureau sur le chevet est à gauche du :after. Si on met un smiley après La cheftaine, il sera à droite du :after (mais dans le :after) Exemple dans mon message précédent, il y a 6 heures env.

    Pour afficher un smiley après l'ovale, il me faut créer une image qui présente à elle seule la lampe + le chevet + l'ovale avec sa bordure, puis supprimer le fond coloré, puis mettre dans le :after la nouvelle image + le smiley + des caractères spéciaux transparent pour faire les espaces.

    Le mot dans l'avatar : il fait partie d'une image de fond placée sous l'image de l'avatar. L'espace au dessus et au dessous c'est une valeur de padding (une propriété des éléments html). Firefox permet d'avoir une représentation des éléments html (avec espaces, bordures et marges)

    Boite HTML de nos avatars spéciaux:
    < élément image de 70x70

    Dans cette illustration on visualise bien les valeurs   de padding top et bottom à 50px et de marges à 2px.  (mes choix css du moment)
    Le mot admin au dessus de l'avatar apparait dans les 50px du padding-top

     

    Ci-dessous pour comparaison, la boite des avatars normaux: (celui de lulette par exemple)

    < élément image de 70x70

     

     

    Lien mort ? blog hors ligne ? info ? »

  • Commentaires

    1
    Mercredi 15 Mars à 10:14

     

    ET VOILA LE RÉSULTAT !

     

    2
    Lundi 27 Mars à 16:46

    Bonjour,


        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius  .......................

    Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien......................

     

    (Vraie simulation d'un texte) glasses

    3
    Samedi 6 Mai à 21:33

    Plop !!! J'aime nos avatars :) 

    Suivre le flux RSS des commentaires

    Vous devez être connecté pour commenter