• Menu-image avec légende

    Suite à une demande sur le fourum Ekla, voici un menu sous forme de mur d'images,
    avec liens et légende au survol curseur. Ici le mur est réduit à 2 colonnes,
    mais il peut s'élargir sur 3 ....(zoomer/dézoomer avec le navigateur ctrl+molette)
    Pour voir sur une page entière cliquer ici. 
    Pour modifier la largeur du mur-image, modifier la valeur de "width" ici = 80% :

    <div class="code" style="min-height: 700px;">
    <div class="container-a4" style="width: 80%; min-height: 700px; margin: 0 auto;">
    <ul class="caption-style-4">


    « Menu CCS effet spiraleApi Youtube en JS »

  • Commentaires

    19
    Dimanche 20 Décembre 2015 à 13:54

    Bonjour et félicitations pour ce tuto.

    Quelques remarques :
    1/ Attention : dans le code, on a vite fait de s'emmêler entre width et height (tantôt mis dans cet ordre, tantôt dans l'ordre inverse)
    2/ J'ai souhaité retirer le sous-titre avec lien, afin de mettre le lien sur l'image entière. J'ai le sentiment d'y être parvenu sur PC, mais le résultat devient très aléatoire sur tablette, selon l'endroit où on clique sur l'image. J'ai l'impression que, sur tablette, le lien ne fonctionne que sur une partie de l'image et non sur la totalité (alors que cela fonctionne bien partout, sur PC). J'en viens à me demander si les valeurs que j'ai données à margin-left et margin-top (dans .caption-text a) sont les bonnes. En fait, j'avoue ne pas très bien savoir comment les définir...
    3/ enfin, pourriez-vous m'indiquer les modifications à apporter au code pour obtenir le visuel initial, à savoir photos avec cadre blanc et espacées entre elles ?
    D'avance merci.

    18
    Jeudi 17 Décembre 2015 à 13:34

    Salut Mike , tuto et résultat hyper sympa, j'avais dans l'idée justement de créer une belle galerie agréable à l'oeil pour mes dessins et peintures et avec ce tuto voilà qui est fait ... Reste plus qu'à s'y mettre (va y avoir du boulot ^^) .... Merci Mike !

    17
    Samedi 24 Octobre 2015 à 10:16
    Bien le bonjour,
    et bien des bravos Mike !!
    C'est visuellement très sympa, et p'têt même qu'un jour je tenterai l'essai, des fois que j'arrive à le transformer ;-)
    Très bonnes suites, merci pour ces excellents partages
    16
    Mardi 2 Décembre 2014 à 15:16

    Coucou Mike. Je poste un commentaire et pour moi tout va bien pour poster sur cet article.

    Je parle en tant que visiteur bien sûr.

    Amicalement. Dani

    15
    Lundi 29 Septembre 2014 à 10:17
    Bonjour Mike, je souhaiterais présenter mes articles avec des liens cliquables sur les images. Je ne comprends rien au css et html mais je suis douée pour copier-coller...

    Voici le lien de mon blog:http://lacuisinettedelaurette.eklablog.com/

    Si tu peux m'aider ce serait vraiment sympa...
    14
    Mercredi 24 Septembre 2014 à 01:10

    cool site

    13
    Lundi 26 Mai 2014 à 20:27
    Merci beaucoup !!!
    12
    Lundi 26 Mai 2014 à 20:07

    @Yumeko,
    bah, oui....c'est tout bon comme ça ! ...impec !!!!

    11
    Lundi 26 Mai 2014 à 19:20

    ha oui, enfait on peu ajouter de texte sur l'édit carrement. Donc comme GmZ tu proposes, il suffit de mettre la police du texte clicable à 0px, et ajouter un sous titre en dessous. tout en chipotant le margin-top pour que l'image entier soit clicable^^
    Je vous dis quoi si j'ai un bon rendu.

    ..........................................................................................

    Haaa ^^. c'est bon pour moi. chaque image est entièrement cliquable, et j'ai un sous-titre. Nickel^^. Merci beaucoup pour l'aide précieuse.

    Bonne fin de journée.

    Yumeko

    10
    Lundi 26 Mai 2014 à 18:29

    Alors, évidemment mes "modifs codes" s'appliquent au code initial....
    Puisqu'on modifie la taille et la position du lien image, l'affichage s'en retrouve décalée.
    Mais ce titre-lien ne sert plus à rien visuellement, puisque c'est l'image qui fait office de lien (heu..c'est imagé).
    Donc on réduit la taille de police à 0px (font-size:0px;)
    Et on place un sous-titre sous le titre-image, qui remplacera le lien
    (<h1>Titre image</h1> <p><span style="color: #c0c0c0;">Sous-titre<a ......</p>)

    Ce qui donne pour MarcL:

    /*-----Code-CSS-----*/

    .caption-text a {

    height: 225px;

    width: 150px;

    margin-left: -50%;

    margin-top: -90%;

    z-index: 5;

    position: absolute;

    font-size: 0px;/*----taille police lien 0px -----*/

    }

    <!---------Code-html-à-modifier--on-ajoute-un-sous-titre--ci-dessous-en-jaune---------------------->

    <div class="caption-text">

    <h1>Géodésique</h1>

    <p><span style="color: #c0c0c0;">Lampe Géode design<a href="http://parametriclab.eklablog.com/dome-geodesique-lampe-design-a107665324" sl-processed="1"><span style="color: #c0c0c0;">Lampe Géode design</span></a></span></p>

    </div>

    ...je regarde pour Yumeko

    9
    Lundi 26 Mai 2014 à 17:41
    Bonjour,

    Oui j'ai le même problème.

    ^^
    8
    Lundi 26 Mai 2014 à 17:28
    Merci !

    J'ai essayé d'adapter ça à mon format : .caption-text a {
    height: 225px;
    width: 150px;
    margin-left:-50%;
    margin-top:-0%;
    z-index: 5;
    position: absolute;
    }​

    Et le lien ne marche que sur ou en-dessous du text. Si je remet margin-top à -50% ça marche mais le text passe au-dessus du titre, or il était cool en dessous :p
    7
    Lundi 26 Mai 2014 à 17:11

    Bon, à la demande générale .....mais ça limitera à 1 lien par image...!!!
    Avec le code actuel, nombre illimité de liens  par image.

    En ajoutant ce code CSS (on agrandit la taille du lien, même taille que l'image, et on recentre):

    .caption-text a {

     height: 300px;

     width: 400px;

      margin-left:-50%;

      margin-top:-50%;

     z-index: 5;

     position: absolute;}

    ....dites-moi si c'est bon, comme ça ...!

    6
    Lundi 26 Mai 2014 à 16:37
    J'allais aussi te le demander, j'ai essayé de le faire moi-même mais je dois pas être très doué !
    5
    Lundi 26 Mai 2014 à 15:36
    bonjour, j'ai une suggestion à faire. ce ne serait pas mieux si on pouvait cliquer sur la photo et non sur le petit texte avant d’accéder à l'article indiquer par la photo?
    Bonne journée
    Yumeko
    4
    Lundi 26 Mai 2014 à 02:35
    Haa,^^ merci beaucoup, ça tombe bien, je recherche une manière de présenter au mieux mes articles. je vais l'essayer.
    3
    Mardi 20 Mai 2014 à 10:01

    Thanks a lot !!

     

    En plus ça renvoie sur mon blog ! :D

    2
    Mardi 20 Mai 2014 à 08:53

    ...thank ! money

    1
    Mardi 20 Mai 2014 à 08:40

    Bravo pour ce menu, ça donne un tres beau visuel
    Association de fonctionnalité et esthétique à la fois !!!
    bonne journée



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


Version standard

Poursuivre l'affichage en version standard (ordinateur),

cliquer ci-dessous

Clic ici

(Puis fermer cette fenêtre, en haut à droite)