• [CSS] Modifier la taille d'un élément

    Par Papasti le 15 Septembre 2011 à 17:24
    Salut tout le monde. Je vais ici vous faire un petit baratin dont le but n'est pas d'être lu mais simplement de faire un petit remplissage afin d'illustrer le tuto. Je commence donc par vous parler de la pluie et du beau temps, du cours du lait et de l'artisanat mongol du début du XXII ème siècle. J'enchaîne sur la baisse du pouvoir d'achat, la déforestation en amazonie et sur ma tête (non, je plaisante) pour enfin en arriver au terme de cet article sans intérêt mais qui a rempli son office, c'est à dire un texte trop long pour pouvoir être affiché dans la <div>

    Comme vous le constatez, tout le texte n'apparaît pas dans le cadre ci-dessus. Vous aurez par contre remarqué l'ascenseur sur la droite du cadre ainsi que la poignée de redimensionnement dans le coin inférieur droit.

    Vous pouvez donc soit faire défiler le texte à l'aide de l'ascenseur ou agrandir le cadre à l'aide de la poignée.

    Code CSS correspondant à l'exemple ci-dessus

    #retailler
    {
    border:2px solid blue;
    padding:20px 20px;
    width:200px;
    height: 150px;
    resize:vertical;/*options : none, vertical, horizontal ou both */
    overflow:auto;/*options : visible, hidden, scroll, auto, inherit */
    }

     

    Il ne vous reste plus qu'à placer votre texte dans votre article comme ci-dessous

    <div id="retailler">Votre texte ici....</div>


    30 commentaires

  • [CSS] Mettre des colonnes dans ses articles

    Par Papasti le 15 Septembre 2011 à 16:57
     
    Salut tout le monde. Je vais ici vous faire un petit baratin dont le but n'est pas d'être lu mais simplement de faire un petit remplissage afin d'illustrer le tuto. Je commence donc par vous parler de la pluie et du beau temps, du cours du lait et de l'artisanat mongol du début du XXII ème siècle. J'enchaîne sur la baisse du pouvoir d'achat, la déforestation en amazonie et sur ma tête (non, je plaisante) pour enfin en arriver au terme de cet article sans intérêt mais qui a rempli son office, c'est à dire apparaître sur 3 colonnes.

     

    Pour en arriver à ce résultat il vous suffit de mettre le code CSS suivant (Dans Apparence -> Modifier le thème ->Ajouter du CSS)

     

    .newspaper
    {
    /* Vous pouvez spécifier le nombre de colonnes voulues (ici 3)*/
    /* Ce code peut ne pas fonctionner avec internet explorer*/
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari et Chrome */
    column-count:3;
    }

     

    Et mettre tout simplement votre texte dans votre article comme ci-dessous (Edition d'un article/ Icone HTML)

    <div class="newspaper">Votre texte ici....</div>


    7 commentaires

  • Rotation d'un Div en CSS

    Par Papasti le 15 Septembre 2011 à 15:42

    Rien de tel qu'un exemple pour illustrer le sujet.

    Vous pouvez voir ci-dessous un div de couleur cyan et à bords arrondis qui a été tourné de 20°

     

    Voici un exemple de div avec une rotation de 20 °

     

    Pour réaliser ceci, il faut placer ce code dans la partie Ajouter du CSS (Menu Apparence -> Modifier le thème)

    #monelem
    {
    border-radius: 5px 5px 5px 5px;/* on fait un arrondi sur les angles */
    position:relative; /* on positionne le div à 150 px du bord gauche */
    left: 250px;
    font-size:18px; /* Taille des caractères */
    width:150px; /* Largeur du div */
    height:80px; /* Hauteur du div */
    background-color:cyan; /* Couleur du div */
    /* Rotation du div */
    transform:rotate(20deg);
    -ms-transform:rotate(20deg); /* Internet Explorer */
    -moz-transform:rotate(20deg); /* Firefox */
    -webkit-transform:rotate(20deg); /* Safari et Chrome */
    -o-transform:rotate(20deg); /* Opera */
    }

     

    Il ne reste plus qu'à placer votre balise div (que j'ai appelée monelem dans cet exemple) dans la partie HTML de votre article

    <div id="monelem">Voici un exemple de div avec une rotation de 20 &deg;</div>

     

    Rotation d'un Div en CSS

    Vous pouvez bien entendu placer
    une image dans votre <div>

     

     

    Voici un exemple de div avec une rotation selon deux plans

     

    Dans l'exemple ci-dessus, la méthode Rotate a été remplacée par la méthode Skew.
    Voyez sur le site de W3School pour plus d'informations.


    1 commentaire

  • Mettre une liste déroulante dans un article

    Par Papasti le 7 Septembre 2011 à 11:31

    Il peut être interessant de placer au sein d'un article une liste déroulante dont chaque ligne aura une action spécifique comme l'exemple ci-dessous :

    Vous pouvez aussi placer ce type de liste dans un module pour faire un accès rapide vers différentes pages de votre blog.

    Remarque: Il faut que le javascript soit activé sur votre blog pour que cela fonctionne

    Pour arriver à ce résultat, rien de plus simple:
    1 - Copier le code ci-dessous
    2- Editer votre article ou votre module simple
    3- Cliquez sur Editer le code source HTML (en mode normal ou expert)
    4- Collez le code
    5- Modifiez le contenu de la liste et les liens

    CODE

    <p><select name="menu_destination" onchange="window.open(this.value)">

           <optgroup label="Le Karat&eacute; Club Nieppois" >
                      <option value="http://kcn.eklablog.com/baby-karate-p144525">Baby Karat&eacute;</option>
                      <option value="http://kcn.eklablog.com/body-karate-p144557">Body Karat&eacute;</option>
                      <option value="http://kcn.eklablog.com/les-horaires-p144443">Horaires</option>
                      <option value="http://kcn.eklablog.com/les-tarifs-p144445">Tarifs</option>
           </optgroup>
           <optgroup label="Galleries">
                      <option value="http://papasti.info/gallery3/">Les Photos</option>
                      <option value="http://kcn.eklablog.com/videos-p165503">Vid&eacute;os du Club</option>
                      <option value="http://kcn.eklablog.com/telechargements-p157868">T&eacute;l&eacute;chargements</option>
            </optgroup> &lt;
    </select></p>

     

    Fonctionnement

    La balise HTML Select définit votre liste déroulante.
    La balise optgroup vous permet de regrouper les éléments et la balise option définit vos différentes lignes.

    Lorsque l'on choisit un élément de la liste, la fonction javascript window.open est appelée et reçoit comme argument la valeur contenue dans value (ici des liens).

    Adaptations

    Vous pouvez bien entendu modifier les attributs de style de la balise <select> comme ci dessous

    <p><select style="color: black; background-color: wheat; width: 100%; border-color: lightgray; border-style: ridge; border-width: 8px;" name="menu_destination" size="5" onchange="test(this.value)">

     

     

    Il est également possible d'utiliser cette balise pour d'autres choses comme ci-dessous.
    (vous pouvez retrouver les noms et codes couleurs sur:

    http://www.w3schools.com/html/html_colornames.asp

     


    60 commentaires


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