• Codages & Tuto (CSS/HTML)

  • Bonjour,

    Petit article pour vous montrer comment déplacer un module de façon à ce qu'il soit positionné au bon endroit quelles que soient les résolutions d'écran. Oui, parce qu'une chose très chiante quand on créer un thème c'est lorsqu'il s'affiche différemment sur l'ordi des autres... bien souvent sur notre Pc c'est tout beau et sur les autres tout se chevauche ou certains éléments ne sont pas visibles. Vous voyez de quoi je parle ? ^^ Bref. Passons au tuto.

    Le code:

     

    Dans la logique, si je veux déplacer un module, je dois utiliser ce code:

    #sélecteur {positionabsolute;   /*obligatoire si vous souhaitez déplacer un module, ça va le détacher de sa place d'origine*/
        bottomxpx/*positon depuis le bas de page, remplacer par top si votre module est en haut de page*/
        left: 150px;  /*position depuis la gauche, centré*/
       }

    Le code n'est pas faux, si vous souhaitez déplacer un module en dehors du blog c'est suffisant, cependant, pour les modules en bas ou haut de page par exemple, le module ne s'affichera pas au même endroit selon la taille de l'écran utilisé.

    Explication: Si je positionne un module à 150px du bord gauche (left: 150px;) de mon blog, pour moi qui ai un grand écran, je n'aurais pas de soucis d'affichage, le module sera bien sur le côté sans que cela gêne mes articles, cependant, les personnes ayant un petit écran verront ce module chevaucher les articles, ce qui rendra la lecture difficile, voire illisible. Donc, que faire ?

    1. Positionné votre module depuis un côté (left ou right) au milieu du blog, afin qu'il soit bien centré pour toutes les résolutions d'écran, mettre en pourcentage, donc left: 50%; (ou right: 50%;).
    2. ajouter une marge afin de le positionner où vous voulez.

     

    #sélecteur {positionabsolute;  /*obligatoire si vous souhaitez déplacer un module, ça va le détacher de sa place d'origine*/
        bottomxpx/*positon depuis le bas de page, remplacer par top si votre module est en haut de page*/
        left: 50%;  /*position depuis la gauche en %, centré*/
        margin-left: xpx;  /*marge depuis le centre donné par la ligne du dessus, mettre une valeur négative pour déplacer le module vers la gauche*/ }

    J'avoue ça ne doit pas être très clair et comme je suis extrêmement nulle en explication je vais essayer de faire simple.

    Le but est de placer en premier lieu votre module au milieu de votre blog en % (50%) afin que quelle que soit la résolution d'écran du visiteur, le module soit bien au centre pour tout le monde. 

    Ensuite, grâce à la propriété "margin-left" (ou margin-right) on va ajouter une marge afin de déplacer le module du centre.

     

    Exemple:

     

    Mon module "Derniers articles":

    #module_menuxxxx {
        positionabsolute;
        bottom40px
        left50%;
        margin-left: -480px;   
    }

    Déplacer un module

    left: 50%; place le module au centre, puis la marge (margin-left: -480px;) déplace le module vers la gauche.

     


    votre commentaire
  • Vous savez tous sans doute que pour changer une image au survol en CSS il faut utilisé :hover, exemple: #header :hover Mais là, rien à voir, je vais vous montrer comment faire en HTML pour vos articles ou modules. Je vous préviens ça va être très très simple ^^'

    I- Le code.

    <img src="image1.png" onmouseover="this.src='image2.png'"onmouseout="this.src='image1.png'" />  

    Il faut évidemment 2 images (2 liens, il faut donc héberger les images):

    Image 1 (en bleu), celle que l'on voit en premier et l'image 2 (en orange), celle qui apparaît lorsque qu'on survole la première. Pour ce code il est recommandé d’utilisé des images au format .png

     

    II- Mon exemple.

     

    Image 1 > Image qui change au survol (HTML)

    Image 2 > Image qui change au survol (HTML)

     

    Pour mon exemple j'ai gardé la même image en ajoutant simplement du texte mais vous pouvez mettre ce que vous voulez.


    15 commentaires
  •  

    Lire la suite...


    1 commentaire
  • 3 codes CSS pour personnaliser votre blog.

     

    I- Surligner le texte:

    Par défaut, le surlignage, ou plutôt la sélection, est bleu avec du texte blanc, vous pouvez le changer avec ce code:

    ::selection {background: #couleur; color: #couleur;}
     ::-moz-selection  {background: #couleur; color: #couleur;} 

     

    II- Scrollbar de la page:

    /!\ Ne fonctionne que sur chrome (et safari à vérifier)

    Pour les personnes utilisant chrome, vous pouvez voir que les scrollbars de mon blog sont différentes (bleu foncé et plus fin). Voilà le code:

    ::-webkit-scrollbar {
        width: xpx; /*-Largeur de toute la scrollbar fond+barre-*/
        height: 0px; /*-Hauteur automatiquement à 0-*/
    }
    ::-webkit-scrollbar-track {
        background-color: #couleur; /*-Couleur du fond-*/
    }
     
    ::-webkit-scrollbar-thumb {
        background-color: #couleur; /*-Couleur de la barre qui défile-*/
    }

     

    III- Citation 

    Code pour personnaliser le bloc "citation" dans vos articles. Codes CSS en vrac 
    (C'est ce que j’utilise pour mettre en avant les codes CSS ou HTML dans mes articles.)

    blockquote {propriété: valeur;}

     


    votre commentaire
  • Tout est dans le titre, si vous chercher un sélecteur CSS que vous ne connaissez pas, vous pouvez soit regarder si le sélecteur n'est pas dans cette liste, soit le chercher vous-même sur votre blog avec cette méthode:

    1- Clic droit sur l'élément dont vous souhaitez connaître le secteur.

    2- Puis, "Examiner l'élément", et une barre d'information s'ouvre en bas de page.

    Pour mon exemple je vais chercher le sélecteur du titre de mon module "Informations" dans le menu de droite. Ce qui me donne ça:

    Trouver sois-même un sélecteur

    Sur la ligne surlignée en bleu il y a deux sélecteurs, le premier avec des chiffres a la fin et le deuxième sans.

    #module_menu_titre151307498, lorsqu'un sélecteur se termine avec un chiffre comme ça (en rouge), c'est qu'il s’agit d'un élément en particulier, dans ce cas, mon module "informations".  

    #module_menu_titre, lorsqu'il n'y a pas de chiffre et que le sélecteur est simple c'est qu'il s'agit d'un élément en général, dans ce cas, tous les titres des modules dans le menu.

    Donc pour résumé, si je souhaite modifier tous les titres de modules et les rendre identiques il me suffit d'utiliser #module_menu_titre et si je souhaite que le titre de mon module "informations" soit différent des autres, je devrais utiliser #module_menu_titre151307498

    Pour copier un sélecteur vous pouvez soit:

    - faire clic droit sur le sélecteur puis "Copier" > "Le sélecteur CSS"

    - soit, le recopier manuellement.


    votre commentaire


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique