Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Navigation en colonne, positionnement libre

    Partagez
    MasculinAge : 31Message(s) : 31698

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Ven 29 Nov 2013 - 17:39
    Rappel du premier message :

    Navigation en colonne - positionnement libre


    Dans cette astuce l'objectif est de changer l'affichage de la navigation pour qu'elle ne soit plus en ligne mais en colonne, les liens affichés les uns en dessous des autres. La navigation restera cependant celle d'origine et ses liens pourront être modifiés via le panneau d’administration (ajout du calendrier, du portail, etc...). De même, les connectés auront les liens de profil et messagerie que les invités n'auront pas. Bref, vous l'avez compris, la barre barre restera identique dans son contenu que la navigation classique mais son positionnement change, les liens seront les uns en dessous des autres et le bloc qui les contiendra pourra être placé où vous le souhaitez (par défaut dans le code il sera collé au bord gauche de la page.

    Exemple de résultat (le lien "membre" étant survolé) :





    FémininAge : 21Message(s) : 180
    Saia
    le Lun 23 Déc 2013 - 22:45
    Merci!!!!!


    MasculinAge : 23Message(s) : 28
    pops44
    le Mar 24 Déc 2013 - 0:05
    Merci
    MasculinAge : 16Message(s) : 80
    Kai Turindo
    le Mar 24 Déc 2013 - 21:26
    MERCI. Oh mon dieu je cherchais partout. *Q*
    MasculinAge : 44Message(s) : 80
    servity
    le Mer 25 Déc 2013 - 1:44
    Merci pour ce tutoriel.


    MasculinAge : 25Message(s) : 56
    Arfgang
    le Jeu 26 Déc 2013 - 12:53
    Pile ce qu'il me fallait, merci


    FémininAge : 21Message(s) : 133

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Afterglow.winter
    le Jeu 26 Déc 2013 - 18:22
    Merci :)


    How do you get up from an all time low?
    MasculinAge : 21Message(s) : 253

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    shibari
    le Sam 28 Déc 2013 - 11:48
    tks




    Merci Dakota pour ce kit.
    FémininAge : 34Message(s) : 34
    Henoch
    le Sam 28 Déc 2013 - 15:21
    ça à l'air sympa merci!
    FémininAge : 25Message(s) : 97

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Lilly31
    le Dim 29 Déc 2013 - 12:05
    Merci :)


    FémininAge : 20Message(s) : 194
    Pastomaniac
    le Lun 30 Déc 2013 - 0:14
    Thanks.


    FémininAge : 33Message(s) : 270
    Venise
    le Jeu 2 Jan 2014 - 14:22
    merci capitaine
    MasculinAge : 24Message(s) : 18
    -Jukai.
    le Dim 5 Jan 2014 - 12:37
    Merci du partage Wink
    MasculinAge : 25Message(s) : 36

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    N3MO
    le Mer 8 Jan 2014 - 17:49
    merci pour le partage je continue mon fouinage Very Happy

    Par contre il y a un petit bug ici:
    Code:
    #navig a /* personnalise les liens */
    {
      display: block; /* met les liens en colonne */
      margin-bottom: -20px; /* enleve l'espacement par defaut des liens entre eux */
      background: #ffffff; /* couleur de fond des liens */
      border-bottom: 1px solid #e6e6e6; /* bordure basse des liens */
      padding: 3px 10px; /* marge interieure des liens */
      text-align: center; /* alignement du texte */
      text-transform: uppercase; /* met le texte en majuscule */
      transition: 1s; /* realise une transition lente avec l effet au survol */
      -moz-transition: 1s;
      -htm-transition: 1s;
      -o-transition: 1s;
      -webkit-transition: 1s;
    }

    Il faut enlever à la ligne margin-bottom l'apostrophe" l'espacement"
    MasculinAge : 18Message(s) : 135
    Neymar
    le Mer 8 Jan 2014 - 19:46
    Merci du Partage généreuse personne ~
    FémininAge : 20Message(s) : 54
    Toshiki
    le Jeu 9 Jan 2014 - 17:33
    merci
    FémininAge : 23Message(s) : 18

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Zuny
    le Ven 10 Jan 2014 - 14:37
    Merci Razz
    FémininAge : 14Message(s) : 76

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    JasLo
    le Sam 11 Jan 2014 - 16:24
    Je cherchais un code comme celui-là!
    FémininAge : 26Message(s) : 98
    Souky Mitsu
    le Sam 11 Jan 2014 - 18:37
    Parfait ! C'est-ce que je cherchais héhé. Merci :)
    FémininAge : 27Message(s) : 486
    Shalyma
    le Sam 11 Jan 2014 - 20:26
    Merci pour ce truc ^^



    Merci Marie Chérie pour le kit!
    FémininAge : 24Message(s) : 67
    Amera
    le Mar 14 Jan 2014 - 18:55
    Merci beaucoup !


    FémininAge : 23Message(s) : 24
    Hayden Joy
    le Mer 15 Jan 2014 - 18:59
    Merci !
    FémininAge : 20Message(s) : 22
    Chou.
    le Mer 15 Jan 2014 - 20:20
    Merci , merci <3


    FémininAge : 23Message(s) : 6
    Ninchat
    le Jeu 16 Jan 2014 - 18:03
    J'aime beaucoup ! Merci
    FémininAge : 23Message(s) : 3
    Zeyro
    le Sam 18 Jan 2014 - 0:45
    Testons cela ! Merciii
    FémininAge : 26Message(s) : 39
    Faraday
    le Jeu 23 Jan 2014 - 11:18
    Merci!
    Contenu sponsorisé
    Aujourd'hui à 3:28

      La date/heure actuelle est Sam 3 Déc 2016 - 3:28