Mettre le menu par dessus une image par ThomasOtt1 - page 1

Bonjour, je tente désemparement d’afficher mon menu déroulant sur une image. Mais le texte du menu déroulant reste derrière l'image (banderole).

Voici mes fichier :

index.html

<DOCTYPE HTML>
<html>
         <link rel="stylesheet" href="corpsdepage.css" />
   <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="corpsdepage.css" 
<link rel="shortcut icon" href="image/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="image/logo.ico">
        <title>Géocaching</title>
    </head>
    <balise id="hautdepage"></balise>
    <body>
        <div id="bloc_page">
            <header>
                <div id="titre_principal">
                    <div id="logo">
                        <img src="image/logo.png" alt="Logo de Zozor" />
                        <h1>Géocaching</h1>    
                    </div>
                    <h2>La chasse au trésor 4.0 !</h2>
                </div>  
                 <div id="menu">
<object type="text/html" data="menu.html" width="10000%" height="10%"></object>
                </div>
            </header>

      
<object type="text/html" data="banierepub.html" width="100%" height="40%"></object>

            <section>
                <article>
                    <h1><img src="image/ico_epingle.png" alt="Catégorie voyage" class="ico_categorie" />Le géocaching</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec sagittis massa. Nulla facilisi. Cras id arcu lorem, et semper purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vel enim mi, in lobortis sem. Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis. Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam. Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat placerat convallis. Mauris in pretium urna. Cras laoreet molestie odio, consequat consequat velit commodo eu. Integer vitae lectus ac nunc posuere pellentesque non at eros. Suspendisse non lectus lorem.</p>
                    <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem. Quisque mollis ullamcorper diam vel faucibus. Vestibulum sollicitudin facilisis feugiat. Nulla euismod sodales hendrerit. Donec quis orci arcu. Vivamus fermentum magna a erat ullamcorper dignissim pretium nunc aliquam. Aenean pulvinar condimentum enim a dignissim. Vivamus sit amet lectus at ante adipiscing adipiscing eget vitae felis. In at fringilla est. Cras id velit ut magna rutrum commodo. Etiam ut scelerisque purus. Duis risus elit, venenatis vel rutrum in, imperdiet in quam. Sed vestibulum, libero ut bibendum consectetur, eros ipsum ultrices nisl, in rutrum diam augue non tortor. Fusce nec massa et risus dapibus aliquam vitae nec diam.</p>
                    <p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue. Sed auctor fringilla quam quis porttitor. Praesent vitae dignissim magna. Pellentesque quis sem purus, vel elementum mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas consectetur euismod urna. In hac habitasse platea dictumst. Quisque tincidunt porttitor vestibulum. Ut iaculis, lacus at molestie lacinia, ipsum mi adipiscing ligula, vel mollis sem risus eu lectus. Nunc elit quam, rutrum ut dignissim sit amet, egestas at sem.</p>
                </article>
<object type="text/html" data="aside.html" width="35%" height="100%"></object>
            </section>
            <footer>
<div id="wrapper">
<a href="#hautdepage"><img src="image/ico_top.png"></a>
</div>
<!--                 <div id="tweet">
                    <h1>Nombre de visite</h1>
                    <p><a href="https://info.flagcounter.com/lHPx"><img src="https://s05.flagcounter.com/count/lHPx/bg_FFFFFF/txt_000000/border_DB3725/columns_2/maxflags_10/viewers_3/labels_1/pageviews_0/flags_0/percent_0/" alt="Compteur de visite :" border="0"></a></p>
                </div> -->

                <div id="mes_amis">
                    <h1>Contact</h1>
                    <div id="listes_contacts">
                        <ul>
                            <li><a href="mailto:ott.thomas68@gmail.com">Par e-mail</a></li>
                            <li><a href="https://www.instagram.com/fcti68.geocaching/">Par instagram</a></li>
                            <li><a href="https://www.facebook.com/thomas.ott.68">Par Facebook</a></li>
                        </ul>
                        &nbsp;
                        &nbsp;
                        &nbsp;
                        &nbsp;
                        <ul>
                            <li><a href="https://www.geocaching.com/play/search">Sur le site officiel géocaching</a></li>
                            <li><a href="07.68.91.81.94">Par sms</a></li>
                            <li><a href="#">Par le biais de la page Contact</a></li>
                        </ul>

                    </div>
                </div>
                &nbsp;
                &nbsp;
                &nbsp;
                &nbsp;
                <p>© COPYRIGHT 2018 - Tout droits réservés Fcti68</p> 
            </footer>
        </div>
    </body>
</html>

menu.html

                    <link rel="stylesheet" href="corpsdepage.css" />
                        
                                     <div id="menu">
                    <ul>
                         <li><a href="#">Accueil</a></li>
                         <li><a href="#">Les types de caches</a>
                    <ul>
                         <li><a href="#">les traditionelles</a></li>
                        <li><a href="#">Les multi-caches</a></li>
                        <li><a href="#">Les mystery</a></li>
                    </ul>
                    </li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>

corpsdepage.css

/* Définition des polices personnalisées */

@font-face
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* Eléments principaux de la page */

body
{
    background: url('image/fond_jaune.png');
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
}

#bloc_page
{
    width: 900px;
    margin: auto;
}

section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}

/* Navigation */

#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
z-index: 10;
 }
#menu li {
 float:left;
 margin:auto;
 padding:0;
 margin-right: 15px;
 top:150px;left:200px;
 }
#menu li a {
    font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
    top:150px;left:200px;
 }
#menu li a:hover {
 color:#760001;
     border-bottom: 3px solid #760001;
 }
 #menu ul li ul {
 display:none;
 }
 #menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 }
 #menu li ul {
 position:absolute;
 }

/* Header */

header
{
    background: url('image/separateur.png') repeat-x bottom;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#titre_principal
{
    display: flex;
    flex-direction: column;
}

#logo
{
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

#logo img
{
    width: 88,5px;
    height: 90px;
}

header h1
{
    font-family: 'BallparkWeiner', serif;
    font-size: 2.5em;
    font-weight: normal;
    margin: 0 0 0 10px;
}

header h2
{
    font-family: Dayrom, serif;
    font-size: 1.1em;
    margin-top: 0px;
    font-weight: normal;
}



/* Bannière */

#banniere_image
{
    margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    background: url('image/sanfrancisco.jpg') no-repeat;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}

#banniere_description
{
    position: absolute;
    bottom: 0;
    border-radius: 0px 0px 5px 5px;
    width: 99.5%;
    height: 33px;
    padding-top: 15px;
    padding-left: 4px;
    background-color: rgba(24,24,24,0.8);
    color: white;
    font-size: 0.8em;
    
}

.bouton_rouge
{
    height: 25px;
    position: absolute;
    right: 5px;
    bottom: 5px;    
    background: url('image/fond_degraderouge.png') repeat-x;
    border: 1px solid #760001;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    padding: 3px 8px 0px 8px;
    color: white;
    text-decoration: none;
}

.bouton_rouge img
{
    border: 0;
}

/* Corps */

section
{
    display: flex;
    margin-bottom: 20px;
}

article, aside
{
    text-align: justify;
}

article
{
    margin-right: 20px;
    flex: 3;
}

.ico_categorie
{
    vertical-align: middle;
    margin-right: 8px;
}

article p
{
    font-size: 0.8em;
}

aside
{
    flex: 1.2;
    position: relative;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: 0.9em;
}

#fleche_bulle
{
    position: absolute;
    top: 100px;
    left: -12px;
}

#photo_fcti68
{
    text-align: center;
}

#photo_fcti68 img
{
    border: 1px solid #181818;
}

aside img
{
    margin-right: 5px;
}

/* Footer */
#wrapper 
{ 
    text-align: center; 
    background:  url('image/separateur.png') repeat-x top, url('image/ombre.png') repeat-x top;
 }

padding-top: 25px;
}*/

footer p, footer ul
{
    font-size: 0.8em;
}

footer h1
{
    font-size: 1.1em;
}


#tweet
{
    width: 28%;
}

#mes_photos
{
    width: 35%;
}

#mes_amis
{
    width: 20 %;
}

#mes_photos img
{
    border: 1px solid #181818;
    margin-right: 2px;
}

#listes_contacts
{
    display: flex;
    justify-content: space-between;
    margin-top: 0;
}

#mes_amis ul
{
    list-style-image: url('ico_liensexterne.png');
    padding-left: 2px;
}

#mes_amis a
{
    text-decoration: none;
    color: #764409;
}

Et voici le bug en photo :

Bon, je pense que vous l'avez vu.... Le menu se cache sous la banniere. Si quelqu'un peux m'aider sa sera super cool !!

Merci a ceux qui prendrons le temps de m'aidez et bonne soirée !

Frogweb a écrit:

Salut,

je pense que le fait que ton menu soit dans une balise object perturbe le bon fonctionnement de la solution proposée.
Mais pourquoi avoir fait un <object> ?

En passant : <balise id="hautdepage"></balise> cette balise n'existe pas et est en dehors de <body>.

ça c'est non, jamais :
    

Ligne 284 de la CSS, le % doit être collé à la valeur
ligne 116, width: 88,5px. Les demi-pixels ça n'existe pas. Et même si c'était le cas ça serait un point et pas une virgule.
Ligne 58 : z-index ne fonctionne qu'avec des éléments positionnés.
Ligne 65 : même motif, top, right, bottom et left ne fonctionne qu'avec position

D'autres petites erreurs encore.
Je te conseille fortement de valider ton code si tu veux que ton site de comporte correctement.

Deja <balise id="hautdepage"></balise> me sert a remonter en haut de la page. Sans, sa ne marche pas donc il marche meme s'il est en dehors de <body>. J'ai supp le groupe de mot hautdepage car il ne sert a rien. Mais j'ai laissez <balise id=""></balise>

Ensuite pour les espaces   tu veux que je fasse comment alors ?

Pour les autre bug que tu a remarqué j'ai du coup changé sauf ligne 65, je dois supprimer quoi? Et du coup pour mon pb je fais comment ?

-
Edité par ThomasOtt1 18 octobre 2018 à 21:33:19

ThomasOtt1

17 octobre 2018 à 21:43:43

Lucky13

17 octobre 2018 à 23:01:54

Hello,

Sans avoir testé, essais de mettre un z-index: 99999 à ton menu.

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Antonin Z

18 octobre 2018 à 6:59:50

Yes, un position:relative et z-index comme décrit au dessus.

En gros le z-index permet de dire qui sera afficher en premier plan ou en second plan.
Et évidemment si tu as plusieurs niveau de plan, tu peux ajouter autant d'indice que nécessaire en sachant que le z-index le plus grand sera au dessus des autres.

Exemple

A {z-index: 1}; B{z-index:2}; C{z-index:3}

C passera au dessus de B et de A
B passera au dessus de A
A sera ... Seul, caché par B et C ! :'(

18 octobre 2018 à 12:08:25

Antonin Z a écrit:

Yes, un position:relative et z-index comme décrit au dessus.

En gros le z-index permet de dire qui sera afficher en premier plan ou en second plan.
Et évidemment si tu as plusieurs niveau de plan, tu peux ajouter autant d'indice que nécessaire en sachant que le z-index le plus grand sera au dessus des autres.

Exemple

A {z-index: 1}; B{z-index:2}; C{z-index:3}

C passera au dessus de B et de A
B passera au dessus de A
A sera ... Seul, caché par B et C !

Sa ne marche pas. rien ne change

-
Edité par ThomasOtt1 18 octobre 2018 à 12:17:27

Frogweb

18 octobre 2018 à 12:32:12

Salut,

je pense que le fait que ton menu soit dans une balise object perturbe le bon fonctionnement de la solution proposée.
Mais pourquoi avoir fait un <object> ?

En passant : <balise id="hautdepage"></balise> cette balise n'existe pas et est en dehors de <body>.

ça c'est non, jamais :
    

Ligne 284 de la CSS, le % doit être collé à la valeur
ligne 116, width: 88,5px. Les demi-pixels ça n'existe pas. Et même si c'était le cas ça serait un point et pas une virgule.
Ligne 58 : z-index ne fonctionne qu'avec des éléments positionnés.
Ligne 65 : même motif, top, right, bottom et left ne fonctionne qu'avec position

D'autres petites erreurs encore.
Je te conseille fortement de valider ton code si tu veux que ton site de comporte correctement.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

18 octobre 2018 à 12:49:22

Mettre le menu par dessus une image

Mettre le menu par dessus une image

Supprimer

Modérer

Signaler le message aux modérateurs