Problème de menu sur mediawiki 1.24.1

Question

nifou

17 Aug 2016 à 14:07

Bonjour à tous!

Je suis débutante, en gros je n'ai jamais fais de codage de ma vie depuis la semaine dernière Smiley langue

J'ai fais un menu déroulant qui semble marcher très bien sur "sublime", ainsi que sur "codepen" mais lorsque je le met sur mon hébergement il ne veut pas se mettre en haut de la page... C'est l'enfer.

Peut être qu'il y a une erreur ? ou que je devrais mettre un bandeaux en fond pour mieux le déplacer?

voici mon code:

<html>

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<style type="text/css">

body {
color:black;
background-color:white;
background-image:url("http://2016.igem.org/File:Fond_blanc.png");
background-attachment:fixed;
}

*
body {
front-family: "Trebuchet MS", Greorgia ;
margin : 30px ;
padding :30px ;margin: 0;
padding: 0;
text-align: center;
font-family: Tahoma, sans-serif;
}

div#container {
margin-left: auto;
margin-right: auto;
width: 1200px;
text-align: left;
}

div#top {
position: fixed;
width: 1200px;
height: 100px;
}

div#bandeau {
top:-10px;
width: 1200px;
height: 200px;
background-color:#FFFFFF;
}

#menu-demo2, #menu-demo2 ul{
padding:0;
margin:0px;
list-style:none;
text-align:CENTER;
}
#menu-demo2 li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}
#menu-demo2 ul li:hover{
border-radius:0;
}
#menu-demo2 ul li:nth-child(6){
border-radius:0 0 8px 8px;
}
#menu-demo2 ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu-demo2 li:first-child{
background-color: #FFFFFFF;

}

#menu-demo2 li:nth-child(2){
background-color: #FFFFFFF;

}
#menu-demo2 li:nth-child(3){
background-color: #FFFFFF;

}
#menu-demo2 li:nth-child(4){
background-color: #FFFFFF;

}
#menu-demo2 li:nth-child(5){
background-color: #FFFFFF;

}
#menu-demo2 li:nth-child(6){
background-color: #FFFFFF;

}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:#FFD700;
}
#menu-demo2 li:nth-child(2) li{
background:#FFA500;
}
#menu-demo2 li:nth-child(3) li{
background:#BC8F8F;
}
#menu-demo2 li:nth-child(4) li{
background:#F08080;
}
#menu-demo2 li:nth-child(5) li{
background:#ADD8E6;
}
#menu-demo2 li:nth-child (6) li{
background:#00CED1;
}

/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 20px;
color:#fff;
font-family:"Trebuchet SM";
}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#000;
}

/*logo de communication en bas du menu à droite*/
#logocom a{
text-decoration:none;
display:block;
padding:8px 2px;
}

#logocom{
list-style-type= none;
display: inline;
position: relative;
padding:1px;
top: 30px;
left: 400px;

}

.logotwitterfb {
list-style-type= none;
width: 20px;
height: 20px;
}

#grayscale img {
list-style-type= none;
display: inline;
position: relative;
}

.grayscale img
{
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
}

.grayscale img:hover
{
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
}
.hue-rotate img
{
filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);
-moz-filter: hue-rotate(180deg);
-o-filter: hue-rotate(180deg);
-ms-filter: hue-rotate(180deg);
}
.hue-rotate img:hover
{
filter: hue-rotate(0);
-webkit-filter: hue-rotate(0);
-moz-filter: hue-rotate(0);
-o-filter: hue-rotate(0);
-ms-filter: hue-rotate(0);
}
</style>

<head>
<link rel="stylesheet" type="text/css" href="include/css/style.css" />
<title>Titre</title>
</head>

<body>
<div id="container">
<div id="top">
<div id="bandeau"><a href=" http://2016.igem.org/Team:Pasteur_Paris " id=mainpage><img class="GIF" alt="http://imagizer.imageshack.us/a/img922/9439/1kY2Ez.gif" src="http://imagizer.imageshack.us/a/img922/9439/1kY2Ez.gif" height="100px" width="130px"></img></a>

<div><a href=" http://2016.igem.org/Team:Pasteur_Paris " id=mainpage><img src="http://2016.igem.org/wiki/images/9/97/LOGO-definitif.png" class="space" width="135"></img></a></div>
</div>
</div>
</div>

<div>
<ul id="menu-demo2">
<li><a href=" http://2016.igem.org/Team:Pasteur_Paris/Project "><img src="http://2016.igem.org/wiki/images/a/a5/Science.png" height="40px" width="40px"><b></b><FONT color=#8B8378><br>Project</br></FONT></a >
<ul>
<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>
<li><a href="#">lien sous menu 1</a></li>
</ul>
</li>
<li><a href=" http://2016.igem.org/Team:Pasteur_Paris/ArtDesign "><img src="http://2016.igem.org/wiki/images/archive/8/89/20160811173826%21Design..png" height="40px" width="40px"><b></b><FONT color=#8B8378><br>Art /Design </br></FONT></a>
<ul>
<li><a href="#">Lien sous menu 2</a></li>
<li><a href="#">Lien sous menu 2</a></li>
<li><a href="#">Lien sous menu 2</a></li>
<li><a href="#">Lien sous menu 2</a></li>
</ul>
</li>
<li><a href=" http://2016.igem.org/Team:Pasteur_Paris/Science "><img src="http://2016.igem.org/wiki/images/archive/a/af/20160811084846%21WetLab.png" height="40px" width="40px" alt=""><b></b><FONT color=#8B8378><br>Science </br></FONT></a>
<ul>
<li><a href="#">lien sous menu 3</a></li>
<li><a href="#">lien sous menu 3</a></li>
<li><a href="#">lien sous menu 3</a></li>
<li><a href="#">lien sous menu 3</a></li>
</ul>
</li>
<li><a href=" http://2016.igem.org/Team:Pasteur_Paris/Law "><img src="http://2016.igem.org/wiki/images/7/7b/Law.png " height="40px" width="40px"><b></b><FONT color=#8B8378><br>Law Part</br> </FONT></a> <ul>
<li><a href="#">Lien sous menu 4</a></li>
<li><a href="#">Lien sous menu 4</a></li>
<li><a href="#">Lien sous menu 4</a></li>
<li><a href="#">Lien sous menu 4</a></li>
</ul>
</li>
<li><a href=" http://2016.igem.org/Team:Pasteur_Paris/HumanPractice "><img src="http://2016.igem.org/wiki/images/f/f5/HP.png " height="40px" width="40px"><b></b><FONT color=#8B8378><br>Human Practice</br></FONT></a> <ul>
<li><a href="#">lien sous menu 5</a></li>
<li><a href="#"> lien sous menu 5</a></li>
<li><a href="#"> lien sous menu 5</a></li>
<li><a href="#"> lien sous menu 5</a></li>
</ul>
</li>

<li><a href=" http://2016.igem.org/Team:Pasteur_Paris/Parts "><img src="http://2016.igem.org/wiki/images/e/e7/BB.png " height=" class="space"40px" width="40px"><b></b><FONT color=#8B8378><br>BioBricks</br></FONT> </a>
<ul>
<li><a href="#">lien sous menu 6</a></li>
<li><a href="#"> lien sous menu 6</a></li>
<li><a href="#"> lien sous menu 6</a></li>
<li><a href="#"> lien sous menu 6X </a></li>
</ul>
</li>

<div id="logocom">
<section class="grayscale">
<li><a href=" https://twitter.com/igem_pasteur " target="_blank"><img class="logotwitterfb" src="http://2016.igem.org/wiki/images/a/af/Twitter_institut_pasteur_2016.jpg"/></a> </li> </a>
</li>

<li >
<a href=" https://www.facebook.com/igem.pasteur/" target="_blank"><img class="logotwitterfb" src="http://2016.igem.org/wiki/images/6/6c/FB_institut_pasteur_2016.jpg"/></a>
</li>

<li >
<a href="http://www.pasteur.fr/fr/enseignement/stages-etudiants/igem" target="_blank"><img class="logotwitterfb" src="http://2016.igem.org/wiki/images/6/6d/LOGO_Pasteur_2016.png"/></a>
</li>

<li>
<a href=" mailto:igem.pasteur@gmail.com " target="_blank"><img class="logotwitterfb" src="http://2016.igem.org/wiki/images/4/47/Email_Pasteur_2016.jpg"/></a>
</li>
</section>
</div>
</ul>

</div>
</body>

Sujet clos

CSS et mise en forme, CSS3

Problème de menu sur mediawiki 1.24.1