Bonjour à tous ,

j'ai un petit problème sur mon site web.

Le sous  menu déroulant dans le bas de page" footer" se retrouve hors de la page ce qui est bizarre c'est que la page web se déroule quand je visite sur mobile.

table

{

  border-collapse: collapse;
        border-spacing: 5px 8px; 
}

head {text-align: center;}



body {background-repeat: no-repeat;
background-size: cover;

}

p{color:white;
font-size: 40px;
text-align: center;
}

h1{color:#F0FFFF;
font-style: italic;
text-align: center;
}

footer{margin-left: auto;
    margin-right: auto;}

#menu{
        width: 30%;
        margin: 0;
        padding: 10px 0 0 0;
        list-style: none;
        background: #111;
        background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
        background: -webkit-linear-gradient(#444, #111);
        background: -o-linear-gradient(#444, #111);
        background: -ms-linear-gradient(#444, #111);
        background: linear-gradient(#444, #111);
        -moz-border-radius: 50px;
        border-radius: 50px;
        -moz-box-shadow: 0 2px 1px #9c9c9c;
        -webkit-box-shadow: 0 2px 1px #9c9c9c;
        box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
        float: left;
        padding: 0 0 10px 0;
        position: relative;

}

#menu a{
        float: left;
        height: 25px;
        padding: 0 25px;
        color: #999;
        text-transform: uppercase;
        font: bold 12px/25px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;

}

#menu li:hover > a{
        color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
        color: #fafafa;
}

#menu li:hover > ul{
        display: block;
}

/* Sous-menu */

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align:center;
vertical-align:middle;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ /* IE6 */
        height: 10px;
        width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
        height: 10px;
        width: 150px;
}

#menu ul a:hover{
        background: #0186ba;
        background: -moz-linear-gradient(#04acec,  #0186ba);
        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background: -webkit-linear-gradient(#04acec,  #0186ba);
        background: -o-linear-gradient(#04acec,  #0186ba);
        background: -ms-linear-gradient(#04acec,  #0186ba);
        background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Rétablissement du flottement */
#menu:after{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}



.roundedImage{
    overflow:hidden;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    width:512px;
    height:384px;
    margin-left: auto;
    margin-right: auto;
}

voici ci dessus mon code css

<!DOCTYPE>

<html>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width"/>

 
    
        <title>Mes créations d'artisan verriers</title>
        
        <link rel="stylesheet" href="zoom.css"/>

<head>

    
<ul id="menu">
        <li><a href="index.php">Accueil</a></li></ul>

        

</head>


<body>
        
<h1>Pipe écume</h1><br />
	<div class="roundedImage"><a href="monsite2/pipe/1.JPG"><img src="monsite3/pipe/1.jpg"></a></div><br /><p>19 Eur</p> 


<h1>Pipe Volcanique</h1><br />
    		
    	<div class="roundedImage"><a href="monsite2/pipe/2.JPG"><img src="monsite3/pipe/2.jpg" alt></a></div><br /><p>19 Eur</p> 
    	
    
    
<h1>Pipe Océanique</h1><br />
 <div class="roundedImage"><a href="monsite2/pipe/3.JPG"><img src="monsite3/pipe/3.jpg" alt></a></div><br /><p>19 Eur</p> 

<h1>Pipe Volcanique Phosphorescente</h1><br />
            
       <div class="roundedImage"><a href="monsite2/pipe/4.JPG"><img src="monsite3/pipe/4.jpg" alt></a></div><br /><p>19 Eur</p> 
        
    	
    
    
</body>

<footer>
<ul id="menu">
	<li><a href="#">Page</a>
		<ul>
			<li><a href="pipe1.php>">page 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
		</ul>
	</li>
        


 <BODY BACKGROUND="html/photos/skull1.jpg">
 	</footer>
</html>

et voici le code Html

-
Edité par FélixLefebure 5 août 2018 à 16:57:31

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : problême affichage)