• Codes en vrac

  • Infobulle Améliorée

    Par Nagalia le 3 Juin 2014 à 00:55

    Vous savez probablement déjà que l'on peu afficher des infobulles sur son blog en réutilisant un script de la plateforme. Si vous ne le saviez pas, je vous conseil de regarder l'article suivant, cela pourra toujours vous être utile.

    => http://fanstasy-graph.eklablog.net/infobulle-a27953875

    Cependant, bien que l'on puisse les personnaliser un peu grace au CSS, elles requiert que le JS soit activé sur le blog, et le contenu est inaccessible. Impossible de faire de copié collé, ou d'y insérer des liens.

    Je vous propose de résoudre ce problème en créant vos propres infobulles en full CSS, auxquelles vous pourrez également ajouter des transition pour avoir un affichage un peu plus sympa.

    Survolez moi......je fais apparaitre une infobulle !
    HTML

    Sans plus attendre, voici la structure HTML

    <div class="infoBulle">ELEMENT VISIBLE<span class="infoBulle">CONTENU INVISIBLE</span></div>

    Votre élément visible peut aussi bien être du texte, un lien ou une image. Vous pouvez également mettre ce que vous voulez dans le contenu invisible, texte image ou lien ;) Ce code vous permet donc de traiter tous les cas... sauf si vous voulez placer votre infobulle dans un texte comme ci-dessous:

    Voici un texte contenant une infobulleAfficher une définition.

    Même en spécifiant que div.infoBulle est un élément inline, je n'arriverais pas à ce résultat sur EklaBlog. En effet, l'éditeur HTML place automatiquement les balises <p> autour du texte, et n'autorise pas la présence d'un autre élément de type block (même s'il change de type) dans un paragraphe.
    Ainsi, si j'écris :

    <p> Du texte <div style="display:inline;"> Une boite </div> et du texte </p>

    Cela sera corrigé à l'édition en :

    <p> Du texte </p> <div style="display:inline;" > Une boite </div> <p> et du texte </p>

    J'aurais donc deux paragraphes et ma boite entre les deux.

    Pour régler ce problème, il faut utiliser une balise qui est par défaut de type inline. Par exemple <em> (italique) <strong> (gras) ou <a> (lien)

    Si vous utiliser l'une de ces balises à la place de <div>, vous ne pourrez pas l'utiliser à nouveau à l'intérieur du <span>. Privilégiez donc le premier code (avec <div> et <span>) tant que vous pouvez.

    Dans mon exemple, j'ai choisi la balise <strong> Ce qui me donne le code suivant :

    <strong class="infoBulle">Mon texte visible<span class="infoBulle">Je ne <em>peux pas<em> réutiliser la balise <a href="#">strong</a></span></strong>

    CSS

    Passons au CSS. Je vais travailler sur mon premier code avec div (vous n'aurez qu'à arranger un peu si vous devez changer de balise). La première chose à faire est de définir les deux états de la balise span (et donc de l'infobulle), c'est à dire visible et invisible.

    div span.infoBulle{
       visibility:hidden; /*masque l'infobulle*/
       position: absolute; /*permet de la faire sortir de div */
       margin-top: -Xpx; /*déplace vers le haut*/
       margin-left: -Xpx; /*déplace vers la gauche*/
       propriété : valeur; /*personnalisez*/
    }

    Voici l'état invisible.
    Modifier le X de margin-top et margin-left pour placer votre infobulle à côté, au dessus ou en dessous du texte visible.

    div.infoBulle:hover span.infoBulle {
       visibility: visible;
    }

    Et voici l'état visible. Il suffit de mettre visibility :visible;

    Avec ces deux codes vous devriez avoir votre texte invisible qui apparait et disparait. Passons donc à la partie un peu plus fun : la personnalisation. Nous allons placer tout nos styles dans div span.infoBulle. Ça peut sembler un peu étrange étant donné que c'est l'état invisible, mais cela nous garantie que nous aurons tout au moment d'afficher l'infobulle. 
    Je vous laisse personnaliser ça comme vous voulez, et je passe directement aux transitions. Si vous voulez des effets différents, je vous invite à lire les deux articles suivants :

    => Transition
    => Transform

    Dans mes exemples, j'ai utiliser rotate, scale ainsi que la propriété opacité que vous devriez connaitre (sinon, allez jeter un oeil à cet article)

    div span.infoBulle{
       visibility:hidden;
       position: absolute;
       margin-top: -30px;
       margin-left: -30px;
       background:  black;
       color: silver;
       transform:  scale(0) rotate(20deg);
       opacity: 0;
       transition: 300ms;
    }

    La partie grisée est normalement déjà présente dans votre CSS. Il s'agit du code donné plus haut pour le fonctionnement de l'infobulle.

    scale(0) me permet de réduire la taille de l'infobulle jusqu'à la rendre invisible
    rotate(20deg) tourne l'infobulle de 20°
    opacity: 0 baisse l'alpha de l'infobulle jusqu'à la rendre invisble

    Soyons bien d'accord, ce que je viens de rajouter n'a pas pour but de cacher l'infobulle, car elle l'est déjà grâce à visibility : hidden. En revanche, cela me permet, avec transition, de l'afficher et de la masquer d'une façon un peu plus classe ;) C'est ce que je vais définir dans le deuxième code, celui qui rend l'infobulle visible :

    div.infoBulle:hover span.infoBulle {
       visibility: visible;
       transform:  scale(1) rotate(0deg);
       opacity: 1;
    }

    scale(1) redonne à mon infobulle sa taille normale
    rotate(0) lui redonne la replace à l'horizontale
    opacity:1 la rend visible

    Toutes ces modification sont effectuées en 300ms, ce qui permet de faire une transition entre les deux états.

    Pourquoi visible: hidden ?

    Il est vrai que dans cet exemple j'aurais pu m'en passer, puisque je réduit sa taille à 0*0px. Mais dans tous les autres cas, même si vous mettez opacity: 0, l'élément est toujours accessible sur la page. Je vous conseil donc de le laisser, ça vous évitera d'avoir des problèmes d'affichages si vous vous trompez dans vos propriétés.


    24 commentaires

  • Menu déroulant

    Par Nagalia le 20 Mai 2014 à 21:29

     

    Pour suive ce tutoriel, vous avez besoin d'un minimum de connaissance en HTML et en CSS, nous n'utiliserons pas de JS.

    HTML


    On va créer notre menu sous la forme de listes imbriquées. La première liste contiendra les titres visibles, et les sous-listes seront les onglets visibles au survol.
    1- Créez une div avec un id pour pouvoir plus facilement travailler dessus en CSS

    <div id="menu_deroulant">

    </div>

    2- Créez votre première liste (les titres visibles)

    <div id="menu_deroulant">
         <ul>
              <li>
                   Titre 1
              </li>
              <li>
                   Titre 2
              </li>
              <li>
                   Titre 3
              </li>
         </ul>
    </div>

    3- Enfin, créez vos sous listes qui apparaitrons au survol

    <div id="menu_deroulant">
         <ul>
              <li>Titre 1
                   <ul>
                        <li> Onglet 1 </li>
                        <li> Onglet 2 </li>
                        <li> Onglet 3 </li>
                   </ul>
              </li>
              <li>Titre 2
                   <ul>
                        <li> Onglet 1 </li>
                        <li> Onglet 2 </li>
                        <li> Onglet 3 </li>
                   </ul>
              </li>
              <li>Titre 3</li>
         </ul>
    </div>

    4- N'oubliez pas d'ajouter vos liens

    <div id="menu_deroulant">
         <ul>
              <li>Titre 1
                   <ul>
                        <li> <a href="#">Onglet 1</a> </li>
                        <li> <a href="#">Onglet 2</a> </li>
                        <li> <a href="#">Onglet 3</a> </li>
                   </ul>
              </li>
              <li>Titre 2
                   <ul>
                        <li> <a href="#">Onglet 1</a> </li>
                        <li> <a href="#">Onglet 2</a> </li>
                        <li> <a href="#">Onglet 3</a> </li>
                   </ul>
              </li>
              <li><a href="#">Titre 3</a></li>
         </ul>
    </div>

     

    CSS


    Ne modifiez pas le code suivant, il permettra à votre menu de fonctionner correctement.

    #menu_deroulant ul {
              margin:0;
              padding:0;
              list-style-type:none; }
    #menu_deroulant li { 
              float:left; }
    #menu_deroulant li:hover ul li { 
              float:none; }
    #menu_deroulant ul li ul { 
              display:none; }
    #menu_deroulant ul li:hover ul {
              display:block;}
    #menu_deroulant li ul {
              position:absolute;
              z-index: 10; }

    Passons maintenant à la personnalisation :

    La "barre" contenant vos titres visibles.

    #menu_deroulant{
              height: Xpx;  /*définissez sa hauteur*/
              propriété : valeur;  /*personnalisez*/
    }

    Le code suivant correspond à vos titres visibles.

    #menu_deroulant ul li a,
    #menu_deroulant ul li {
              display:block;
              propriété : valeur;  /*personnalisez*/
    }

    Code pour les onglets visibles au survol.

    #menu_deroulant ul li ul li a,
    #menu_deroulant ul li ul li{
              display:block;
              propriété : valeur;  /*personnaliser*/
    }

      

    Placement dans l'en-tête


    Mettez votre HTML dans un module simple. Puis modifier votre id dans le css de la manière suivante :

    #menu_deroulant{
              height: Xpx;  /*définissez sa hauteur*/
              propriété : valeur;  /*personnalisez*/
              position: absolute;
              top: Xpx ; /*position par rapport au haut de la page*/
              left: Xpx; /*position par rapport au bord gauche de la page*/
    }

    "position: absolute" rend votre menu indépendant par rapport aux autres éléments de la page. Déplacez le ensuite en changeant les valeurs de "top" et "left"

    Pour plus d'information, je vous renvoie à l'article suivant :
    => http://fanstasy-graph.eklablog.net/contenu-hors-des-articles-a30141132


    89 commentaires

  • Fixer un menu au défilement

    Par Nagalia le 12 Février 2014 à 20:04

    Pour fixer simplement votre menu, vous pouvez utiliser la propriété "position: fixed;" en CSS. En revanche, si votre menu est par exemple placé sous le header, vous voudriez pouvoir le fixer seulement une fois qu'il se trouve en haut de la page.
    Pour cela, il faut utiliser du JavaScript.

    /!\ Le JS doit être activé sur votre blog

    Commencez par créer votre menu en HTML (définissez le par un ID) , et placez le dans un module simple.

    <div id="menuNavigation">MON MENU, AVEC DU TEXTE, DES LIENS ET DES IMAGES</div>

    Grâce au css, vous allez pouvoir le placer où vous voulez sur votre page, et modifier sont apparence. Dans cet exemple, je vais le placer sous mon #header, d'une hauteur de 250px.
    Placez le en "position: absolute;"
    => [Tuto] Contenu hors des articles

    #menuNavigation { position: absolute;
          top: 250px; /*hauteur du header*/
          width: 800px; /*largeur du menu*/
          left: 50%; /*place le bord gauche au centre*/
          margin-left: -400px; /*décale la moitié du menu vers la gauche pour le placer au centre*/
          propriété : valeur;
    }

    Nous avons maintenant besoin de définir sont apparence quand il doit être "fixe". Je vais donc simplement ajouter une classe à mon id, et le définir en "position:fixed" (pour le fixer), ainsi qu'en "top: 0px;" pour le coller en haut de la page. Vous pouvez bien sûr ajouter d'autres propriétés pour changer sont apparence.

    #menuNavigation.fixe { position: fixed;
          top: 0px;
          propriété : valeur;
    }

    Maintenant, passons au javascript, que vous placez dans le même module que votre menu.
    Un script JS se place toujours entre les balises <script> JS </script>
    Nous allons utiliser window.onload pour exécuter notre script à la fin du chargement de la page.

    Commençons par définir nos variables : nous auront besoin bien évidemment de notre #menu, et si vous ne voulez pas vous embêter à calculer quand il doit se fixer, nous allons également récupérer #header.

    window.onload=function(){
          var menu = document.querySelector("#menuNavigation");
          var header = document.querySelector("#header");
    }

    Nous devons ensuite récupérer la taille de la fenêtre du client, et savoir de combien il a "scrollé" la page.

    function scrolled(){
          var windowHeight = document.body.clientHeight,
          currentScroll = document.body.scrollTop || document.documentElement.scrollTop;
    }

    Sachant cela, nous pouvons changer la classe de notre menu si la page a été "scrollée" de la hauteur du header. Toujours dans la fonction "scrolled" on ajoute l'instruction suivant :

    menu.className = (currentScroll >= header.offsetHeight) ? "fixe" : "";

    menu, c'est la variable représentant notre #menu.
    className est une commande JS permettant de modifier la classe d'un élément. Ici, nous ajoutons la classe .fixe à #menuNavigation
    currentScroll est le défilement de la page (scroll)
    header est la variable représentant #header
    offsetHeight est une commande permettant de récupérer la hauteur d'un élément (ici #header)

    Pour traduire cela, si le défilement de la page est supérieur ou égal à la hauteur du #header, la classe de #menuNavigation devient .fixe
    Notre menu prend donc les paramètres de #menu.fixe

    Pour finir ce code, nous devons ajouter un EventListener, sans quoi nous ne pouvons pas récupérer le défillement (scroll) de la page.

    addEventListener("scroll", scrolled, false);

    Voici le JS complet

    <script>// <![CDATA[
    window.onload=function(){
          var menu = document.querySelector("#menuNavigation");
          var header = document.querySelector("#header");
          function scrolled(){
                var windowHeight = document.body.clientHeight,
                currentScroll = document.body.scrollTop || document.documentElement.scrollTop;

                menu.className = (currentScroll >= header.offsetHeight) ? "fixe" : "";
          }
          addEventListener("scroll", scrolled, false);
    }
    // ]]></script>

    L'exemple ici est de fixer un menu en fonction du défilement de la page, mais vous pouvez utiliser cette technique pour modifier n'importe quel élément en fonction de votre position sur la page ;)


    18 commentaires

  • Signature codée

    Par Nagalia le 16 Juin 2012 à 23:14

    Après une demande, voilà un tuto pour faire une signature en css et html à mettre sur les forum. 
    /! Vérifiez que le forum accepte que les membres utilisent le html. 



    C'est joli, certes, mais comment on fait ça? Pour les EklaBloger, nous avons la chance de pouvoir créer une page html et de l'héberger directement:
    "Contenu => Gérer les fichier => Nouveau fichier" et nommez le "signature.html"
    /! Javascript activé!
    Pour les autres, sortez votre bloc note, notepad, ou un quelconque autre logiciel d'édition de texte. N'oubliez pas d'enregistrer en .html

    Nous allons créer une page html de A à Z voici donc la structure de base:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <script type="text/javascript">
    CONTENU JS
      </script>
           
      <style type="text/css">
    CONTENU CSS
      </style>
    </head>

        <body>
           
    CONTENU HTML     
            
        </body>
    </html>
     

    On va commencer par le javascript

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <script type="text/javascript">

    //<!--
                    function change_onglet(name)
                    {
    document.getElementById('onglet_'+anc_onglet)
    .className = 'onglet_0 onglet';
    document.getElementById('onglet_'+name).
    className = 'onglet_1 onglet';
    document.getElementById('contenu_onglet_'+anc_onglet)
    .style.display = 'none';
    document.getElementById('contenu_onglet_'+name).
    style.display = 'block';
                            anc_onglet = name;
                    }
            //-->   </script>
           
      <style type="text/css">
    CONTENU CSS
      </style>
    </head>

        <body>
           
    CONTENU HTML     
            
        </body>
    </html>
     

    Et on ne touche à rien!
    Ensuite, CSS:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript">

            //<!--
                    function change_onglet(name)
                    {
    document.getElementById('onglet_'+anc_onglet)
    .className = 'onglet_0 onglet';
    document.getElementById('onglet_'+name).
    className = 'onglet_1 onglet';
    document.getElementById('contenu_onglet_'+anc_onglet)
    .style.display = 'none';
    document.getElementById('contenu_onglet_'+name).
    style.display = 'block';
                            anc_onglet = name;
                    }
            //-->
                   </script>

           
      <style type="text/css">
    .onglet,
    .onglet_0 {display:inline-block;
              PROPRIETE: VALEUR; }

     .contenu_onglet{display:none;
              height : Xpx; /* HAUTEUR */
              width : Xpx; /*LARGEUR*/
              overflow : auto;
              PROPRIETE: VALEUR;
    }

    </style>

    </head>

        <body>

    CONTENU HTML 

    </body>

    </html>

     

    Modifiez ce qui est en rouge pour personnaliser votre signature.
    Enfin, le HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript">

            //<!--
                    function change_onglet(name)
                    {
    document.getElementById('onglet_'+anc_onglet)
    .className = 'onglet_0 onglet';
    document.getElementById('onglet_'+name).
    className = 'onglet_1 onglet';
    document.getElementById('contenu_onglet_'+anc_onglet)
    .style.display = 'none';
    document.getElementById('contenu_onglet_'+name).
    style.display = 'block';
                            anc_onglet = name;
                    }
            //-->
                   </script>

      <style type="text/css">

    .onglet,
    .onglet_0 {display:inline-block;
              PROPRIETE: VALEUR; }

    .contenu_onglet{display:none;
              height : Xpx; /* HAUTEUR */
              width : Xpx; /*LARGEUR*/
              overflow : auto;
              PROPRIETE: VALEUR;}

    </style>

    </head>

        <body>

            <div class="onglets">
    <span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">ONGLET 1</span>
    <span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">ONGLET 2</span>
    <span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">ONGLET 3</span>
            </div>

              <div class="contenu_onglet" id="contenu_onglet_1er">
              CONTENU DU 1ER ONGLET
              </div>

              <div class="contenu_onglet" id="contenu_onglet_2eme">
              CONTENU DU 2EME ONGLET
              </div>

              <div class="contenu_onglet" id="contenu_onglet_3eme">
              CONTENU DU 3EME ONGLET
              </div>

            <script type="text/javascript">
            //<!--
                    var anc_onglet = '1er';
                    change_onglet(anc_onglet);
            //-->
            </script> 

    </body>

    </html> 

    Modifiez "ONGLET 1" "ONGLET 2" et "ONGLET 3" par les titre de vos onglet. Si vous voulez rajouter des onglet, il suffit de rajouter cette ligne:

    <span class="onglet_0 onglet" id="onglet_4eme" onmouseover="javascript:change_onglet('4eme');">ONGLET 4</span>

    sous

    <span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">ONGLET 3</span>

    et cette ligne

    <div class="contenu_onglet" id="contenu_onglet_4eme">
              CONTENU DU 4EME ONGLET
              </div>

    sous

    <div class="contenu_onglet" id="contenu_onglet_3eme">
              CONTENU DU 3EME ONGLET
              </div>

    Si c'est votre 5eme onglet, remplacez 4 par 5 etc...

    Tout à la fin du code, il y a un petit passage de js en plus qui nous permet d'afficher la signature. "1er" indique que l'onglet visible par défaut est le premier. Si vous voulez qu'on voit d'abord le 2eme onglet, remplacez "1er" par "2eme"

    C'est bien beau tout ça, mais comme j'y met en signature? Au moyen d'une iframe ;)
    Enregister votre signature et hébergez là et récupérez l'adresse. Collez l'adresse dans ce code, puis mettez le dans votre signature:

    <iframe style="width: LARGEURpx; height: HAUTEURpx; display: block; margin-left: auto; margin-right: auto;" src="URL" frameborder="no" scrolling="no" width="320" height="240"></iframe>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript">

            //<!--

                    function change_onglet(name)

                    {

    document.getElementById('onglet_'+anc_onglet)

    .className = 'onglet_0 onglet';

    document.getElementById('onglet_'+name).

    className = 'onglet_1 onglet';

    document.getElementById('contenu_onglet_'+anc_onglet)

    .style.display = 'none';

    document.getElementById('contenu_onglet_'+name).

    style.display = 'block';

                            anc_onglet = name;

                    }

            //-->

                   </script>

           

      <style type="text/css">

    .onglet,

    .onglet_0 {display:inline-block;

              width: 150px;

              background: #a34626; 

              margin:auto;

              margin-bottom: -1px;

              padding:3px;

              border:1px solid black;

              border-top: 4px solid black;

              border-radius: 10px 10px 0 0;

              font-family : Impact;

              letter-spacing: 3px;

              text-align: center;

              -webkit-transition: 300ms;

              -moz-transition: 300ms;

              transition: 300ms;

    }

     

    .onglet:hover {background: #bd5f2b

          }

     .contenu_onglet{ font-size : 14px ; 

              background: #a34626;

              border-radius : 20px;

              border: 1px solid #000000;

              border-left: 6px solid black;

              border-right: 6px solid black;

              box-shadow: 0 0 10px black, inset 0 0 10px black;

              padding: 10px;                

              display:none;

              height : 200px;

              width : 600px; 

              overflow : auto;

              color: #e7c3b7;

              text-shadow : 1px 1px 0px black; 

    }

          .cadre { border-radius: 10px;

              background: rgba(0, 0, 0, 0.3);

              width: 400px;

              height: 187px;

              float: right;

              text-align: left;

              padding: 5px;

              box-shadow: 0 0 10px #ee7837, inset 0 0 5px black;

              overflow : auto; 

    }

    .contact {border: 1px solid black;

              border-left: 3px solid black;

              border-right: 3px solid black;

              background: rgba(238, 120, 55, 0.6);

              padding: 5px;

              margin-top: 10px;

              color: black

    }

          a {color: black;

              text-decoration: none;

              text-shadow: none;

              font-weight:bold;

          }

    </style>

    </head>

        <body>

            <div class="onglets">

    <center><span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">SIGNATURE</span>

    <span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">ANCIENS KITS</span>

    <span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">MOI</span>

    </center>

            </div>

              <center> <div class="contenu_onglet" id="contenu_onglet_1er">

    <img src="http://ekladata.com/LL_FFgnJyGMVWv_TAg6rnfpIIhk.png" alt=""><br/></div>

              <center> <div class="contenu_onglet" id="contenu_onglet_2eme">

                  <img src="http://ekladata.com/1RsvO8ELdqRX3DnRps1urL-MPSI.jpg"/><br/>

                  <img src="http://ekladata.com/qEqY2wyUKiY7IpIDa6ZhyGWFwJQ.png"/>

    </div>

              <center> <div class="contenu_onglet" id="contenu_onglet_3eme">

                  <div style="float:left"><img src="http://ekladata.com/d1b3rsARkHy-JOObf5r016zv8Ok.png"/><div class="contact"><a href="http://fanstasy-graph.eklablog.net">Blog</a> | <a href="http://nagalia.deviantart.com/">Deviantart</a></div></div>

                  <div class="cadre"><p>Je suis Nagalia!<br/>

                      16 ans, terminale S et voulant devenir web-designeuse ^^

                      <br/><br/>

                      J'adore dessiner, des personnages de manga ou fantastique genre des elfes. En fait, je dessine beaucoup des personnages sortant tout droit de mon imagination de folle XD Genre Nagalia, une elfe noire complètement sadique :P Bref voilà pour la petite histoire sur l'origine de mon pseudo. Vous l'aurez deviné, je suis fan d'héroïque fantasy!<br/>

                      Il faut également préciser que je suis une veritable accro au graph!<br/><br/>

                      Bref, vous voyez qu'on peut mettre vraiment ce qu'on veut dans cette signature, et sans aucune limite de caractère ;)</p> </div></div>

             <script type="text/javascript">

            //<!--

                    var anc_onglet = '3eme';

                    change_onglet(anc_onglet);

            //-->

            </script>             

    </body>

    </html>

     

     


    132 commentaires

  • Flèche haut et bas de page

    Par Nagalia le 7 Juin 2012 à 17:48

    Ce tutoriel vous apprend à mettre des petits liens sur le côté de la page qui renvoient en haut ou en bas.

    - Commencez par créer les images qui vous servirons de liens (je vous conseille de faire deux flèches, c'est assez compréhensible pour les visiteurs)

    - Une fois que vous avez vos flèches, mettez le code suivant dans un module simple (de cette façon, il apparaitra sur toutes les pages de votre blog)

    <div id="fleche">
       <a href="#header"> 
          <img src="http://img15.hostingpics.net/pics/856927monte.png" />
       </a>
       <a href="#footer">
          <img src="http://img15.hostingpics.net/pics/952333descnd.png" />
       </a>
    </div>

    Ce code fonctionne. Vous pouvez remplacer les liens par les url de vos image. Le premier correspond à la flèche du haut, et le deuxième à celle du bas.

    Le lien #header renvoie vers la bannière, donc le haut de la page
    Le lien #footer renvoie vers le pied de page, donc en bas 

    Validez votre HTML, et publiez votre menu. Vous devriez maintenant avoir deux flèches dans votre module. Il faut donc les "sortir" de ce module pour les afficher sur un côté de la page.

    Passons donc au CSS :

    #fleche {position: fixed;
             top: 50%;
             left: 3%;
    } 

    fleche est le nom du groupe qui contient mes deux images et les liens.

    la propriété position: fixed permet de sortir la flèche du module et de la fixer sur la page

    top et left permettent de positionner les flèches sur la page. Vous pouvez changer les valeurs en rouge pour changer leur position.
    Par exemple :

    •Pour center verticalement: top: 50%;
    •Pour le mettre tout à gauche: left: 0%;
    •Pour le mettre tout à droite: left: 100%

    Note: Vous pouvez également utiliser des valeurs en px ou em


    135 commentaires


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