Problème CSS avec menu flottant
celoux
-
Clark971 -
Clark971 -
Bonjour,
j'ai suivi un tuto sur https://openclassrooms.com/fr/courses
le souci c'est que j'ai beau faire à l'identique, mon corps vient se mettre sous les menus et pas moyen de le mettre en haut à droite !
voici mon code: (qui est le même que le site)
/*
Design d'exemple du Site du Zér0
Réalisé par zaz, venom et mateo21
<lien url="https://openclassrooms.com/fr/">http://www.siteduzero.com</lien>
*/
body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/fond.png");
}
/* L'en-tête */
#en_tete
{
width: 760px;
height: 100px;
background-image: url("images/banniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}
/* Le menu */
#menu
{
float: left;
width: 120px;
}
.element_menu
{
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
margin-bottom: 20px;
}
/* Quelques effets sur les menus */
.element_menu h3
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}
.element_menu a
{
color: #B3B3B3;
}
.element_menu a:hover
{
background-color: #B3B3B3;
color: black;
}
/* Le corps de la page */
#corps
{
margin-left: 140px;
margin-bottom: 20px;
padding: 5px;
color: #B3B3B3;
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
}
#corps h1
{
color: #B3B3B3;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#corps h2
{
height: 30px;
background-image: url("images/titre.png");
background-repeat: no-repeat;
padding-left: 30px;
color: #B3B3B3;
text-align: left;
}
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
#pied_de_page
{
padding: 5px;
clear: both;
text-align: center;
color: #B3B3B3;
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
}
j'ai suivi un tuto sur https://openclassrooms.com/fr/courses
le souci c'est que j'ai beau faire à l'identique, mon corps vient se mettre sous les menus et pas moyen de le mettre en haut à droite !
voici mon code: (qui est le même que le site)
/*
Design d'exemple du Site du Zér0
Réalisé par zaz, venom et mateo21
<lien url="https://openclassrooms.com/fr/">http://www.siteduzero.com</lien>
*/
body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/fond.png");
}
/* L'en-tête */
#en_tete
{
width: 760px;
height: 100px;
background-image: url("images/banniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}
/* Le menu */
#menu
{
float: left;
width: 120px;
}
.element_menu
{
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
margin-bottom: 20px;
}
/* Quelques effets sur les menus */
.element_menu h3
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}
.element_menu a
{
color: #B3B3B3;
}
.element_menu a:hover
{
background-color: #B3B3B3;
color: black;
}
/* Le corps de la page */
#corps
{
margin-left: 140px;
margin-bottom: 20px;
padding: 5px;
color: #B3B3B3;
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
}
#corps h1
{
color: #B3B3B3;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#corps h2
{
height: 30px;
background-image: url("images/titre.png");
background-repeat: no-repeat;
padding-left: 30px;
color: #B3B3B3;
text-align: left;
}
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
#pied_de_page
{
padding: 5px;
clear: both;
text-align: center;
color: #B3B3B3;
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
}
A voir également:
- Problème CSS avec menu flottant
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide