-
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">
-
Commentaires
21FloyMercredi 29 Juin 2022 à 00:29You need to take part in a contest for one of the best sites on the internet. I will recommend this blog! darknet markets https://mydarkmarket.comRépondre20GeeeenSamedi 8 Septembre 2018 à 01:41
Salut Papy,
Merci pour ce superbe menu, je t'ai mis en lien sur l'article. A l'accueil tu cliques sur le totem.
Vraiment un menu très intelligent,
Bonne soirée,
Geeeen
je te donne l'adresse de mon blog un message est affiché comme quoi l'adresse est invalide Le blog du miroirauxessences https://miroirauxessences.blog
Un p'tit coucou et un grand merci Mike !
Mis en place pour une visite plus... moderne ? sympa ? originale ? de toutes façons mieux qu'avant :
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.
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 !
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
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
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
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
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
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 ...!
J'allais aussi te le demander, j'ai essayé de le faire moi-même mais je dois pas être très doué !
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
YumekoHaa,^^ merci beaucoup, ça tombe bien, je recherche une manière de présenter au mieux mes articles. je vais l'essayer.
Bravo pour ce menu, ça donne un tres beau visuel
Association de fonctionnalité et esthétique à la fois !!!
bonne journée
Ajouter un commentaire
Test et mise au point
-
Visiteurs :
Connectés 2 Record 519 Aujourd'hui 57 Total 107079 
Radionomy
My Player
Grooveshark
Constance Vidéo
-
Créer mon blog