Besoin d'aide pour développer ce genre de chose

Question

Fogiel

17 Feb 2015 à 23:17

Bonjour,

je suis nouveau, et débutant dans le html, css
j'ai pu voir un menu déroulant magnifique et je souhaiterais l'utiliser, j'ai appuyé sur F12 afin de récupérer le langage html mais ça ne fonctionne pas, il y a surement du css et je ne sais pas comment le déchiffrer dans la commande F12

Est-il possible de me le coder s'il vous plait, voici le lien : http://yidille.free.fr/plux/valign/uploads/yidille-menu-gallerie.html
(je crois qu'il faut faire un copier/coller parce que le lien ne doit pas fonctionner)

PS : pas besoin de me coder tous les onglets Smiley smile

juste 2 ou 3 me suffiront, après j'aurais plus qu'a travailler un peu ! Smiley cligne

Merci,

Fogiel
Modifié par Fogiel (17 Feb 2015 - 23:24)

audrasjb

18 Feb 2015 à 00:05

Bonjour et bienvenue sur le forum, Fogiel Smiley smile

Fogiel a écrit :
mais ça ne fonctionne pas, il y a surement du css et je ne sais pas comment le déchiffrer dans la commande F12

Pourtant, l'ensemble du code est contenu au sein de la balise <style> dans la partie <head> de la page. Tu peux le voir en affichant le code source HTML de la page comme tu l'as fait.

Fogiel a écrit :
Est-il possible de me le coder s'il vous plait […] PS : pas besoin de me coder tous les onglets juste 2 ou 3 me suffiront, après j'aurais plus qu'a travailler

Vraiment désolé, mais pour ça, c'est non.

Comme l'expliquent les règles du forum, Alsacreations est une communauté d'entraide, pas de travail à ta place. Si tu as une question exacte à poser, un problème d'affichage, un démarche que tu ne comprends pas, toute question est la bienvenue, mais les membres du forum ne te donneront pas le tout prêt à l'emploi.

Observe bien le code de la page mise en lien, reproduis-le sur une page HTML de test, et reviens vers nous si l'implémentation te pose problème Smiley smile

senteur_honrable

18 Feb 2015 à 00:34

audrasjb a écrit :
Bonjour et bienvenue sur le forum, (...)

Bonjour audrasjb,

le langage subliminal de Fogiel est clair : à terme, le code-source ne sera plus accessible sur les pages web.

Je t'invite à croire que cela n'est pas si idiot que ça.

Et, l'impossibilité du code est déjà accessible ...

Le sais-tu ?
Modifié par senteur_honrable (18 Feb 2015 - 02:45)

audrasjb

18 Feb 2015 à 13:11

Ce que je ne comprends pas, c'est surtout ton langage subliminal à toi Smiley rolleyes

senteur_honrable a écrit :
à terme, le code-source ne sera plus accessible sur les pages web.

De quoi parle-tu exactement ? Du code-source de la page d'exemple (pourquoi ne serait-il plusaccessible un jour, qu'est-ce que tu en sais) ? De son code-source à lui (il n'a pas encore donné le moindre lien) ?

senteur_honrable a écrit :
Je t'invite à croire que cela n'est pas si idiot que ça.

Quoi donc ? Qu'est-ce qui est idiot (ou pas) ? On ne comprend rien ! Je n'ai jamais dit que sa demande était idiote, juste qu'elle était hors-charte du forum.

senteur_honrable a écrit :
Et, l'impossibilité du code est déjà accessible ...

Mais… ON NE COMPREND RIEN À CE QUE TU ÉCRIS !
Ça veut dire quoi en français «l'impossibilité du code estdéjà accessible» ?

senteur_honrable a écrit :
Le sais-tu ?

/soupir

Franchement, senteur_honrable, j'espère que ce n'est pas ta façon de t'exprimer dans le cadre de la vie de tous les jours et de tes activités professionnelles, parce que tout ceci est incompréhensible, et souvent hors-sujet complet. Désolé d'y aller un peu plus fort que précédemment mais la coupe est pleine me concernant Smiley ohwell

Modifié par audrasjb (18 Feb 2015 - 13:12)

Freez

18 Feb 2015 à 13:55

@senteur_honrable Je partage le point de vue de audrasjb, à force de prendre ce ton narquois de donneur de leçon et de vous exprimer dans langage que l'on a du mal à déchiffrer (à cause de vos sous entendus incompréhensibles et de blagues qui ne font souvent rire que vous), plus personne n'a envie de vous répondre.

Vous mettez de la distance entre vous et vos interlocuteurs/lecteurs dans un forum forum de partage de connaissance et entraide. Rendez-vous compte que c'est complètement décalé, un peu de remise en question ne fait pas de mal. Vous pouvez toujours tourner en dérision mes propos mais je préfère vous avertir avant que tout le monde se mette à vous boycotter (ce qui n'est vraiment pas le but ici).
Modifié par Freez (18 Feb 2015 - 13:57)

SolidSnake

18 Feb 2015 à 14:45

audrasjb a écrit :
Mais… ON NE COMPREND RIEN À CE QUE TU ÉCRIS !
Ça veut dire quoi en français «l'impossibilité du code estdéjà accessible» ?

Ah je croyais que j'étais mal réveillé, mais donc ça ne venait pas de moi ! Smiley rolleyes

Bon histoire de ne pas troller pour rien, voilà un petit lien qui pourrait aider à faire le menu

Fogiel

18 Feb 2015 à 16:43

Merci pour toutes vos réponses,
SolidSnake, c'est gentils pour ton lien, mais je dois payer 13$ pour avoir les menu déroulant ^^

Je comprends que vous ne puissiez pas travailler pour moi, c'est même une évidence finalement... c'est pour cela que je vais vous envoyer mon problème lorsque je copie le code source (F12) du lien que je vous ai donné.

Pour éviter les confusions ou de s'éloigner trop du sujet, pouvez vous, s'il vous plait faire vos remarques personnelles entre-vous, ailleurs que dans mon post, merci de votre compréhension Smiley cligne

Stéphanie W.

18 Feb 2015 à 16:50

Bonjour,

En voilà une sélection, certains devraient être gratuits.

Pour le reste effectivement, merci d'éviter le hors sujet, @senteur_honrable il me semble que tu as déjà été prévenu plusieurs fois en public et en mp.

Fogiel

18 Feb 2015 à 17:04

voila mon code :

<html>
<body>
<div id="galerie-menu">
<nav>
<a href="#" tabindex="1" title="Hit It , Dare !">
<<pseudo:before>></<pseudo:before>>
<img src="http://lorempixel.com/400/300/sports/1/" alt="sport 1">
</a>
<a href="#" tabindex="1" title="About To">
<<pseudo:before>></<pseudo:before>>
<img src="http://lorempixel.com/400/300/sports/2/" alt="sport 2">
</a>
<a href="#" tabindex="1" title="Speed & last">
<<pseudo:before>></<pseudo:before>>
<img src="http://lorempixel.com/400/300/sports/3/" alt="sport 3">
</a>
<a href="#" tabindex="1" title="Surf">
<<pseudo:before>></<pseudo:before>>
<img src="http://lorempixel.com/400/300/sports/4/" alt="sport 4">
</a>
<a href="#" tabindex="1" title="Trial at your Own">
<<pseudo:before>></<pseudo:before>>
<img src="http://lorempixel.com/400/300/sports/5/" alt="sport 5">
</a>
<a href="#" tabindex="1" title="Sunset">
<<pseudo:before>></<pseudo:before>>
<img src="http://lorempixel.com/400/300/sports/6/" alt="sport 6">
</a>
<a href="#" tabindex="1" title="Get In, Dive !">
<<pseudo:before>></<pseudo:before>>
<img src="http://lorempixel.com/400/300/sports/7/" alt="sport 7">
</a>
<a href="#" tabindex="1" title="I Can Fly !">
<<pseudo:before>></<pseudo:before>>
<img src="http://lorempixel.com/400/300/sports/8/" alt="sport 8">
</a>
<a href="#" tabindex="1" title="Run Right">
<<pseudo:before>></<pseudo:before>>
<img src="http://lorempixel.com/400/300/sports/9/" alt="sport 9">
</a>
<a href="#" tabindex="1" title="Play & Respond">
<<pseudo:before>></<pseudo:before>>
<img src="http://lorempixel.com/400/300/sports/10/" alt="sport 10">
</a>
</nav>
</div>
</body>
</html>

Et quand je l'ouvre dans mon navigateur (Chrome) je vois les images les unes a coté des autres comme un pêle-mêle.

lddsoft

18 Feb 2015 à 17:31

Bonjour,

Ce code n'est un secret pour personne, le voici :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>menu galerie et slide en css, memoire du focus </title>
 <style media="screen">
	#galerie-menu {display:inline-block;width:670px;;height:300px;border:solid;position:relative;}
	#galerie-menu a, #galerie-menu:hover a:focus {float:right;height:300px;max-width:30px;overflow:hidden;
	transition:2s;box-shadow:0 0 3px black;position:relative;z-index:2;display:inline-block;color:white;text-decoration:none;}
	#galerie-menu a:first-child {position:absolute;left:0;max-width:400px;z-index:1;}
	#galerie-menu a:hover, #galerie-menu a:focus, #galerie-menu a:hover:focus {max-width:400px;}
	#galerie-menu a:before {content:attr(title);position:absolute;left:0;bottom:0;
	transform:rotate(-90deg);
	transform-origin: 18px ;
	font-size:30px;text-shadow:0 0 3px yellow;width:300px;height:1.2em;background:rgba(100,100,0, 0.3);text-align:center;box-shadow:0 0 5px white;}
</style>
</head>
<body>
	<h1>Demo</h1>
	<div id="galerie-menu">
		<nav>
		<a href="#" tabindex="1" title="Hit It , Dare !"><img src="http://lorempixel.com/400/300/sports/1/"  alt="sport 1"  /></a>
		<a href="#" tabindex="1" title="About To"><img src="http://lorempixel.com/400/300/sports/2/"  alt="sport 2"  /></a>
		<a href="#" tabindex="1" title="Speed & last"><img src="http://lorempixel.com/400/300/sports/3/"  alt="sport 3"  /></a>
		<a href="#" tabindex="1" title="Surf"><img src="http://lorempixel.com/400/300/sports/4/"  alt="sport 4"  /></a>
		<a href="#" tabindex="1" title="Trial at your Own"><img src="http://lorempixel.com/400/300/sports/5/"  alt="sport 5"  /></a>
		<a href="#" tabindex="1" title="Sunset"><img src="http://lorempixel.com/400/300/sports/6/"  alt="sport 6"  /></a>
		<a href="#" tabindex="1" title="Get In, Dive !"><img src="http://lorempixel.com/400/300/sports/7/"  alt="sport 7"  /></a>
		<a href="#" tabindex="1" title="I Can Fly !"><img src="http://lorempixel.com/400/300/sports/8/"  alt="sport 8"  /></a>
		<a href="#" tabindex="1" title="Run Right"><img src="http://lorempixel.com/400/300/sports/9/"  alt="sport 9"  /></a>
		<a href="#" tabindex="1" title="Play & Respond"><img src="http://lorempixel.com/400/300/sports/10/" alt="sport 10" /></a>
		</nav>
	</div>
	
	<p>d'autres test et demos de Gcyrillus sur :<a href="http://yidille.free.fr/plux/valign/">yidille</a></p>
	<p>Cedits images images : <a href="http://lorempixel.com/images.php" target="blank">lorempixum.com</a></p>
	<p>Adaptation et prefixage proprietaire CSS avec :  https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js  </p>
	
	<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
	
</body>
</html>

Le style est incorporé et il ne faut surtout pas oublié la partie script juste avant la balise de fermeture du body Smiley cligne

.
A toi de transformer la page à ta guise ...
Modifié par lddsoft (18 Feb 2015 - 17:46)

gc-nomade

18 Feb 2015 à 23:40

Bonjour,

Si ce menu t’intéresse vraiment, tu as un tuto dessus là : http://openclassrooms.com/courses/creez-votre-menu-interactif-en-images-en-html-css (les archives ne sont plus accesible, mais le code est a copier coller).

Sinon, tu as effectivement tout le CSS nécessaire dans le code source Smiley cligne

Fogiel

19 Feb 2015 à 13:21

merci infiniment a vous pour vos réponses, je clos le sujet car il à été résolu, merci encore, vous gérez ! Smiley cligne

Sujet clos

Questions générales et questions de débutants

Besoin d'aide pour développer ce genre de chose