Superposer une image avec une barre de navigation verticale

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Superposer une image avec une barre de navigation verticale

Message par Papy Roosevelt Ven 24 Avr 2020 - 18:30

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.Habbonu.fr/

Description du problème

Bonjour,

Je suis en phpBB2 et j'aimerais savoir s'il est possible de superposer une image avec des boutons en vertical comme le démontre le screen ci-dessous, et qu'il soit bien centré pour une mise en page uniforme sur tout les types d'écran, si oui quel script pour rendre cela possible ? Smile

Superposer une image avec une barre de navigation verticale Script10

Merci d'avance Smile
Cordialement Papy Roosevelt,
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

Voir le profil de l'utilisateur http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Bryx Ven 24 Avr 2020 - 18:32

Hello,

Je vous invite à lire ce guide CSS et HTML :
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Cela répond exactement à votre exigence Smile

Bryx ::pourtoi::
Bryx

Bryx
****

Masculin
Messages : 330
Inscrit(e) le : 03/12/2017

Voir le profil de l'utilisateur https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Papy Roosevelt Ven 24 Avr 2020 - 18:54

Je vous remercie pour cette pépite, mais ça m'a l'air trop compliqué pour moi lol

Est-ce que vous auriez par tout hasard un script déjà conçu en flexbox, que je puisse modifier directement par mes propres soins, j'imagine qu'il y a deux scripts :

- Un script HTML
- Un script CSS

Gloups
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

Voir le profil de l'utilisateur http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Bryx Ven 24 Avr 2020 - 19:20

Je comprends, c'est du haut niveau Smile
Non, je plaisante. Un niveau de connaissance est requis pour ça.

Je m'occupe de vous faire une proposition, je reviens vers vous bientôt Smile
Je répondrais dans moins de six (6) jours. Sinon fait un UP Wink

Bryx ::pourtoi::
Bryx

Bryx
****

Masculin
Messages : 330
Inscrit(e) le : 03/12/2017

Voir le profil de l'utilisateur https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Bryx Ven 24 Avr 2020 - 19:40

Hello,

Finalement, j'ai fini c'était rapide Smile

Voici le CSS à mettre dans votre feuille de style depuis votre administration

Code:
/* Permet la mise en bloc et celle-ci retourne automatiquement à la ligne */
.annonce_de_mon_FA {display: flex; flex-direction: row; flex-wrap: wrap; flex-flow: flex-direction}

/* Bloc qui va sur la gauche en fonction de la taille est inférieur à 100 % */
.annonce_de_mon_FA .gauche {width: 40%}
.annonce_de_mon_FA .gauche img {max-width: 90%}

/* Bloc qui va sur la droite en fonction de la taille est inférieur à 100 % */
.annonce_de_mon_FA .droite {width: 60%}

Puis voici le code HTML pour votre page d'accueil

Code:
<div class="annonce_de_mon_FA">
   <div class="gauche">
      <img src="https://2img.net/h/zupimages.net/up/17/45/urxe.png" />
   </div>
   <div class="droite">
      <div style="center; border: 3px solid black;padding:00px;">
         <div style="center; background-image: url('https://i.servimg.com/u/f58/17/70/94/08/backgr10.png');order: 6px solid 0000;padding:12px;">
            <div style="text-shadow: 3px 3px 4px #0B0B61;">
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><span style="font-size: 13px;"><br /></span></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><strong style="font-size: 13px;"><span style="font-size: 16px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton18.png" /></span></strong></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><a href="http://www.habbonu.org/h12-activite" style="font-size: 15px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton21.png" /></a></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);">
                  <div style="text-align: center;"><a href="http://www.habbonu.org/h9-locaux"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton20.png" /></a></div>
                  <div style="text-align: center;"><br /></div>
               </div>
               <div style="text-align: center;"><a href="http://www.habbonu.org/h17-hierarchie-et-uniforme"><img src="https://i.servimg.com/u/f11/17/70/94/08/grade_10.png" /></a></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><strong style="font-size: 24px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton22.png" /></strong></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);">
                  <div align="center" style="font-size: 15px;"><strong style="font-size: 24px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton23.png" /><br /></strong></div>
                  <div align="center" style=""><br /></div>
               </div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><img src="https://2img.net/r/hpimg15/pics/635175141123111647994795.png" /></div>
            </div>
         </div>
      </div>
   </div>
</div>

Bryx ::pourtoi::


Dernière édition par Bryx le Ven 24 Avr 2020 - 19:41, édité 1 fois (Raison : Modification du code fourni :( il manquait une balise essentielle.)
Bryx

Bryx
****

Masculin
Messages : 330
Inscrit(e) le : 03/12/2017

Voir le profil de l'utilisateur https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Papy Roosevelt Ven 24 Avr 2020 - 20:45

Wouah quelle rapidité, c'est vraiment gentil de votre part Smile

Je sais que vous avez déjà fait beaucoup pour moi aujourd'hui Razz , mais je voudrais juste vous demander si c'est normal que les dimensions ne sont pas forcément les mêmes lorsqu'on change de navigateur :

GOOGLE CHROME :
Superposer une image avec une barre de navigation verticale Googl10

MICROSOFT EDGE :
Superposer une image avec une barre de navigation verticale Edge_e10

Et si jamais je veux faire pareil sur la même page en bas ou éventuellement sur une autre page, je dois recréer un nouveau code CSS et un nouveau code HTML, qu'est-ce qui est à changer dans se cas là ?

Là j'ai mis une vidéo mais si je suis amener à mettre à l'avenir une autre image ou faire pareil sur une autre page, il faut que je réadapte avec tout les "px"?

Merci d'avance,
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

Voir le profil de l'utilisateur http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Bryx Ven 24 Avr 2020 - 20:59

Je vous propose cette correction, est-ce que cela réajuste la page ?

Code:
/* Permet la mise en bloc et celle-ci retourne automatiquement à la ligne */
.annonce_de_mon_FA {height: 350px; display: flex; flex-direction: row; flex-wrap: wrap; flex-flow: flex-direction; align-items: stretch; align-content: stretch}

/* Bloc qui va sur la gauche en fonction de la taille est inférieur à 100 % */
.annonce_de_mon_FA .gauche {width: 70%}
.annonce_de_mon_FA .gauche img {max-width: 90%}

/* Bloc qui va sur la droite en fonction de la taille est inférieur à 100 % */
.annonce_de_mon_FA .droite {width: 30%}

Normalement, cela devrait faire réagir la page.

Bryx ::pourtoi::
Bryx

Bryx
****

Masculin
Messages : 330
Inscrit(e) le : 03/12/2017

Voir le profil de l'utilisateur https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Papy Roosevelt Ven 24 Avr 2020 - 21:57

Superposer une image avec une barre de navigation verticale Dimens10

Trop petit ^^

Se qui faudrait c'est un script qui permet de s'adapter automatiquement par rapport au cadre ou navigateur, c'est pas possible ça ? Smile
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

Voir le profil de l'utilisateur http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Bryx Ven 24 Avr 2020 - 23:45

J'ai réussi à l'adapté à la largeur de ton forum, voici le CSS

Code:
/* Permet la mise en bloc et celle-ci retourne automatiquement à la ligne */
.annonce_de_mon_FA {height: 350px; display: flex; flex-direction: row; flex-wrap: wrap; flex-flow: flex-direction}

/* Bloc qui va sur la gauche en fonction de la taille est inférieur à 100 % */
.annonce_de_mon_FA .gauche {width: 49%}

/* Bloc qui va sur la droite en fonction de la taille est inférieur à 100 % */
.annonce_de_mon_FA .droite {width: 51%}

Laissez-moi savoir si cela vous convient désormais.

Bryx ::pourtoi::
Bryx

Bryx
****

Masculin
Messages : 330
Inscrit(e) le : 03/12/2017

Voir le profil de l'utilisateur https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Papy Roosevelt Sam 25 Avr 2020 - 0:03

Presque Smile

Google :
Superposer une image avec une barre de navigation verticale Google10

Microsoft Edge :
Superposer une image avec une barre de navigation verticale Micros10
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

Voir le profil de l'utilisateur http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Bryx Sam 25 Avr 2020 - 0:19

Microsoft Edge, enfin cette version est obsolète pour le web.
Le Microsoft Edge sous Chromium affiche les même résultats que Google Chrome.

Voici une nouvelle proposition

Code:
/* Permet la mise en bloc et celle-ci retourne automatiquement à la ligne */
.annonce_de_mon_FA {height: 350px; display: flex; flex-direction: row; flex-wrap: wrap; flex-flow: flex-direction}

/* Bloc qui va sur la gauche en fonction de la taille est inférieur à 100 % */
.annonce_de_mon_FA .gauche {width: 50%; text-align: left}

/* Bloc qui va sur la droite en fonction de la taille est inférieur à 100 % */
.annonce_de_mon_FA .droite {width: 50%}

Bryx ::pourtoi::
Bryx

Bryx
****

Masculin
Messages : 330
Inscrit(e) le : 03/12/2017

Voir le profil de l'utilisateur https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Papy Roosevelt Sam 25 Avr 2020 - 2:55

Il manquait un pixel lol, j'ai du corriger en ajouter une image mais du coup lorsque d'autres utilisateurs arrivent sur le forum ils ne le voient pas comme moi, ( suivant aussi la taille des écrans des ordinateurs et des navigateurs) :

Mon écran (GOOGLE CHROME) :
Superposer une image avec une barre de navigation verticale Mon_zo10

Autre écran GOOGLE CHROME écran 1360 x 768 :
Superposer une image avec une barre de navigation verticale Captur10

FIREFOX :
Superposer une image avec une barre de navigation verticale Captur11


Normalement il y a un moyen pour que ça soit adaptable pour tout les types d'écrans, c'est que le bloc gris soit extensible de manière automatique et adaptable, comprend-tu ce que je demande Smile
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

Voir le profil de l'utilisateur http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Bryx Sam 25 Avr 2020 - 10:30

Hello,

Effectivement, je comprends parfaitement Smile

Voici une correction, c'était le mode flex qui été mal configuré.
C'est entièrement ma faute, normalement tout devrait être bon !

Code:
.annonce_de_mon_FA {height: 349px; display: flex}
.annonce_de_mon_FA .gauche {width: 560px}
.annonce_de_mon_FA .droite {width: 100%}

J'ai corrigé aussi les erreurs de CSS dans le HTML

Code:
<div class="annonce_de_mon_FA">
   <div class="gauche">
      <iframe style="width: 560px; height: 349px;" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/WN4d1IeYv_0?rel=0"></iframe>
   </div>
   <div class="droite">
      <div style="text-align: center; border: 3px solid black; padding: 0; height: 349px; color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);">
         <div style="text-align: center; background-image: url('https://i.servimg.com/u/f58/17/70/94/08/backgr10.png'); border: 6px solid 0000; padding:12px;">
            <div style="text-shadow: 3px 3px 4px #0B0B61;">
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><span style="font-size: 13px;"><br /></span></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><strong style="font-size: 13px;"><span style="font-size: 16px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton18.png" /></span></strong></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><a href="http://www.habbonu.org/h12-activite" style="font-size: 15px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton21.png" /></a></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);">
                  <div style="text-align: center;"><a href="http://www.habbonu.org/h9-locaux"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton20.png" /></a></div>
                  <div style="text-align: center;"><br /></div>
               </div>
               <div style="text-align: center;"><a href="http://www.habbonu.org/h17-hierarchie-et-uniforme"><img src="https://i.servimg.com/u/f11/17/70/94/08/grade_10.png" /></a></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><strong style="font-size: 24px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton22.png" /></strong></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);">
                  <div align="center" style="font-size: 15px;"><strong style="font-size: 24px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton23.png" /><br /></strong></div>
                  <div align="center" style=""><br /></div>
               </div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><img src="https://2img.net/r/hpimg15/pics/635175141123111647994795.png" /></div>
            </div>
         </div>
      </div>
   </div>
</div>

Bryx ::pourtoi::
Bryx

Bryx
****

Masculin
Messages : 330
Inscrit(e) le : 03/12/2017

Voir le profil de l'utilisateur https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Papy Roosevelt Sam 25 Avr 2020 - 16:18

Pas mal, ça m'a l'air déjà beaucoup plus uniforme sur différents écrans, il faudrait juste retirer 2 à 3 pixels vers le bas et ça sera plus que parfait  Wink

Superposer une image avec une barre de navigation verticale Screen10
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

Voir le profil de l'utilisateur http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Bryx Sam 25 Avr 2020 - 21:15

Bien entendu Smile

Voici le nouveau code HTML, j'ai réduit la hauteur du menu.

Code:
<div class="annonce_de_mon_FA">
   <div class="gauche">
      <iframe style="width: 560px; height: 349px;" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/WN4d1IeYv_0?rel=0"></iframe>
   </div>
   <div class="droite">
      <div style="text-align: center; border: 3px solid black; padding: 0; height: 343.1px; color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);">
         <div style="text-align: center; background-image: url('https://i.servimg.com/u/f58/17/70/94/08/backgr10.png'); border: 6px solid 0000; padding:12px;">
            <div style="text-shadow: 3px 3px 4px #0B0B61;">
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><span style="font-size: 13px;"><br /></span></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><strong style="font-size: 13px;"><span style="font-size: 16px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton18.png" /></span></strong></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><a href="http://www.habbonu.org/h12-activite" style="font-size: 15px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton21.png" /></a></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);">
                  <div style="text-align: center;"><a href="http://www.habbonu.org/h9-locaux"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton20.png" /></a></div>
                  <div style="text-align: center;"><br /></div>
               </div>
               <div style="text-align: center;"><a href="http://www.habbonu.org/h17-hierarchie-et-uniforme"><img src="https://i.servimg.com/u/f11/17/70/94/08/grade_10.png" /></a></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><strong style="font-size: 24px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton22.png" /></strong></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);">
                  <div align="center" style="font-size: 15px;"><strong style="font-size: 24px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton23.png" /><br /></strong></div>
                  <div align="center" style=""><br /></div>
               </div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><img src="https://2img.net/r/hpimg15/pics/635175141123111647994795.png" /></div>
            </div>
         </div>
      </div>
   </div>
</div>

Est-ce que cela vous semble correct désormais ?

Bryx ::pourtoi::
Bryx

Bryx
****

Masculin
Messages : 330
Inscrit(e) le : 03/12/2017

Voir le profil de l'utilisateur https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Papy Roosevelt Sam 25 Avr 2020 - 22:11

Excellent c'est parfait je te remercie énormément Yes

Par contre dans le script il y a des boutons y'a pas de lien, je sais pas comment on peux l'intégrer dedans.

Et Est-ce trop te demander pour une dernière requête d'intégrer dedans un script que lorsqu'on survole un bouton la couleur change (changement d'image), c'est à dire :

BOUTON DE BASE :
Superposer une image avec une barre de navigation verticale Introd10

BOUTON LORS DU SURVOLE :
Superposer une image avec une barre de navigation verticale Introd11
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

Voir le profil de l'utilisateur http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Bryx Sam 25 Avr 2020 - 22:21

Voici comment faire des liens :
- https://www.apprendre-html-et-css.com/liens_internes_externes_et_ancres.html

Pour l'image en survol, voici le code adéquat :
Code:
<img src="IMAGE.png" onmouseover="this.src='IMAGEHOVER.png'" onmouseout="this.src='IMAGE.png'" />

Bryx ::pourtoi::
Bryx

Bryx
****

Masculin
Messages : 330
Inscrit(e) le : 03/12/2017

Voir le profil de l'utilisateur https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Papy Roosevelt Sam 25 Avr 2020 - 22:56

Je te remercie Smile mais le problème c'est que je connais ces scripts mais je ne sais pas comment les intégrer correctement au code HTML.

Donc si je combine les deux ça fait :

Code:
<a href="https://www.habbonu.fr/h22-introduction"><img src="https://i95.servimg.com/u/f95/19/01/14/64/introd13.png" onmouseover="this.src='https://i95.servimg.com/u/f95/19/01/14/64/introd12.png'" onmouseout="this.src='https://i95.servimg.com/u/f95/19/01/14/64/introd13.png'" /> </a>

Ce qui fonctionne  Very Happy
Et pour l'intégrer dans mon code HTML c'est là où viens la complication  Confused  :

Code:
<div class="droite">
        
 <div style="text-align: center; border: 3px solid black; padding: 0; height: 343.1px; color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);">
          
 <div style="text-align: center; background-image: url('https://i.servimg.com/u/f58/17/70/94/08/backgr10.png'); border: 6px solid 0000; padding:12px;">
              
 <div style="text-shadow: 3px 3px 4px #0B0B61;">
                
 <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);">
 <span style="font-size: 13px;"><br /></span>
 </div>

C'est la dernière chose que je demande haha bounce Laughing
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

Voir le profil de l'utilisateur http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Bryx Dim 26 Avr 2020 - 0:07

C'est du bon travail !
Bravo, vous apprenez par vous-même Smile

En effet, le code suivant est parfait :
Code:
<a href="https://www.habbonu.fr/h22-introduction"><img src="https://i95.servimg.com/u/f95/19/01/14/64/introd13.png" onmouseover="this.src='https://i95.servimg.com/u/f95/19/01/14/64/introd12.png'" onmouseout="this.src='https://i95.servimg.com/u/f95/19/01/14/64/introd13.png'" /></a>

Maintenant, dans le code HTML suivant :
Code:
<div class="annonce_de_mon_FA">
   <div class="gauche">
      <iframe style="width: 560px; height: 349px;" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/WN4d1IeYv_0?rel=0"></iframe>
   </div>
   <div class="droite">
      <div style="text-align: center; border: 3px solid black; padding: 0; height: 343.1px; color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);">
         <div style="text-align: center; background-image: url('https://i.servimg.com/u/f58/17/70/94/08/backgr10.png'); border: 6px solid 0000; padding:12px;">
            <div style="text-shadow: 3px 3px 4px #0B0B61;">
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><span style="font-size: 13px;"><br /></span></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><strong style="font-size: 13px;"><span style="font-size: 16px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton18.png" /></span></strong></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><a href="http://www.habbonu.org/h12-activite" style="font-size: 15px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton21.png" /></a></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);">
                  <div style="text-align: center;"><a href="http://www.habbonu.org/h9-locaux"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton20.png" /></a></div>
                  <div style="text-align: center;"><br /></div>
               </div>
               <div style="text-align: center;"><a href="http://www.habbonu.org/h17-hierarchie-et-uniforme"><img src="https://i.servimg.com/u/f11/17/70/94/08/grade_10.png" /></a></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><strong style="font-size: 24px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton22.png" /></strong></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);">
                  <div align="center" style="font-size: 15px;"><strong style="font-size: 24px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton23.png" /><br /></strong></div>
                  <div align="center" style=""><br /></div>
               </div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><img src="https://2img.net/r/hpimg15/pics/635175141123111647994795.png" /></div>
            </div>
         </div>
      </div>
   </div>
</div>

On recherche l'image " introduction ", donc celle-ci :
Code:
<img src="https://i.servimg.com/u/f11/17/70/94/08/bouton18.png" />

On la remplace par le code qui comporte le lien et l'image et le sur volage de l'image :
Code:
<a href="https://www.habbonu.fr/h22-introduction"><img src="https://i95.servimg.com/u/f95/19/01/14/64/introd13.png" onmouseover="this.src='https://i95.servimg.com/u/f95/19/01/14/64/introd12.png'" onmouseout="this.src='https://i95.servimg.com/u/f95/19/01/14/64/introd13.png'" /></a>

Comprenez-vous pourquoi je vous donne des indications ?
Vous tentez et je vous aide dans la résolution.

Est-ce que c'est tout bon pour vous ?

Bryx ::pourtoi::
Bryx

Bryx
****

Masculin
Messages : 330
Inscrit(e) le : 03/12/2017

Voir le profil de l'utilisateur https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec une barre de navigation verticale

Message par Papy Roosevelt Dim 26 Avr 2020 - 1:17

Excellent ça fonctionne parfaitement, je dormirais moins bêtes ce soir, c'est vraiment magique l'informatique haha Razz

En tout cas je te remercie fortement pour tout le soutien que tu as pu donner de par tes compétences, c'est honorable, nous nous reverrons surement Very Happy
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

Voir le profil de l'utilisateur http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum