A voir également:
- Comment centrer mon menu avec Kompozer
- Kompozer - Télécharger - Web Design
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu démarrer classique - Guide
- Windows 11 menu contextuel classique - Guide
6 réponses
<style type="text/css" media="screen"> body {
margin: 0 auto;
padding: 0;
background: yellow none repeat scroll 0% 50%;
font-family: verdana,arial,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 80%;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
text-align: center;
width: 1000px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}<meta name="description" content="Ecole "><meta name="keywords" content="venez decouvrir le travail de vos enfants, les activites, sortie...."><meta #menu {
position: relative;
top: 0;
left: 0;
z-index: 100;
width: 100%;
margin-right:0 auto;
margin-left: 0 auto;
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
border: 3px solid blue;
margin: 1px;oh !! le bon gâteau qu'a fait maman
background: #ffffff none repeat scroll 0% 50%;
cursor: pointer;
text-align: center;
}
#menu dd {
border: 1px solid blue;
display: none;
}
#menu li {
background: #ffffff none repeat scroll 0% 50%;
text-align: center;
}
#menu li a, #menu dt a {
border: none;
color: #3333FF;
text-decoration: none;
display: block;
height: 100%;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eeeeee none repeat scroll 0% 50%;
}
#site {
border: 1px solid yellow;
padding: 5px;
position: absolute;
z-index: 1;
top: 70px;
left: 10px;<meta name="description" content="Ecole "><meta name="keywords" content="venez decouvrir le travail de vos enfants, les activites, sortie...."><meta color: #000000;
background-color: #dddddd;
}
p {
font-size: 1.3em;
}
h1 {
font-family: Times new roman;
font-size: 2.4em;
margin: 0 auto;
padding: 0;
background: yellow none repeat scroll 0% 50%;
font-family: verdana,arial,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 80%;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
text-align: center;
width: 1000px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}<meta name="description" content="Ecole "><meta name="keywords" content="venez decouvrir le travail de vos enfants, les activites, sortie...."><meta #menu {
position: relative;
top: 0;
left: 0;
z-index: 100;
width: 100%;
margin-right:0 auto;
margin-left: 0 auto;
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
border: 3px solid blue;
margin: 1px;oh !! le bon gâteau qu'a fait maman
background: #ffffff none repeat scroll 0% 50%;
cursor: pointer;
text-align: center;
}
#menu dd {
border: 1px solid blue;
display: none;
}
#menu li {
background: #ffffff none repeat scroll 0% 50%;
text-align: center;
}
#menu li a, #menu dt a {
border: none;
color: #3333FF;
text-decoration: none;
display: block;
height: 100%;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eeeeee none repeat scroll 0% 50%;
}
#site {
border: 1px solid yellow;
padding: 5px;
position: absolute;
z-index: 1;
top: 70px;
left: 10px;<meta name="description" content="Ecole "><meta name="keywords" content="venez decouvrir le travail de vos enfants, les activites, sortie...."><meta color: #000000;
background-color: #dddddd;
}
p {
font-size: 1.3em;
}
h1 {
font-family: Times new roman;
font-size: 2.4em;
Bonjour avec un peu de html ca aurait été un peu plus facile , mais j'ai essayé de me l'imaginer
si c'est pas bon se que je dit, donné moi aussi un partie du html
je suppose que menu est dans une balise <div></div>
une balise de ce type fait 100% du bloc qui la contient
je vois que votre body fait 1000px et est centré. Curieux d'avoir réduit body et ne pas avoir mi plutôt un bloc conteneur ...enfin chacun ça façon de coder.
je vois une largeur pour les dl à l'intérieur du menu de 12 em.
essayé ceci pour voir
si le cadre fait toute la largeur de la page, vous le réduisez en réduisant les pixel de width
le but est qu'il soit le moins large possible et que la position bien entendu des élément intérieur de change pas. Ensuite une fois au minimum avec le margin: auto; il sera centré
si c'est pas ça donnez moi du html que je voie un peu
si c'est pas bon se que je dit, donné moi aussi un partie du html
je suppose que menu est dans une balise <div></div>
une balise de ce type fait 100% du bloc qui la contient
je vois que votre body fait 1000px et est centré. Curieux d'avoir réduit body et ne pas avoir mi plutôt un bloc conteneur ...enfin chacun ça façon de coder.
je vois une largeur pour les dl à l'intérieur du menu de 12 em.
essayé ceci pour voir
#menu{
border: 2px solid red;
}
si le cadre fait toute la largeur de la page, vous le réduisez en réduisant les pixel de width
#menu{
border: 2px solid red;
width: 700px; /*là j'ai mi sa au hazard */
marin: auto;
}
le but est qu'il soit le moins large possible et que la position bien entendu des élément intérieur de change pas. Ensuite une fois au minimum avec le margin: auto; il sera centré
si c'est pas ça donnez moi du html que je voie un peu
bonsoir,
déjà il y a du html dans ton css (balise meta) ensuite il y a certaines déclarations qui ne sont pas fermées ensuite je ne pense pas que oh !! le bon gâteau qu'a fait maman soit une valeur css...
bref
je te conseille de démarrer ici:
http://css.mammouthland.net
déjà il y a du html dans ton css (balise meta) ensuite il y a certaines déclarations qui ne sont pas fermées ensuite je ne pense pas que oh !! le bon gâteau qu'a fait maman soit une valeur css...
bref
je te conseille de démarrer ici:
http://css.mammouthland.net
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<meta name="google-site-verification"
content="XX50xEAhSDAZ0utk8thZADqBKb2YiS4p9B__R4075ls">
<title>Accueil</title>
<meta
content="venez decouvrir le travail de vos enfants, les activites les sorties, fetes sorties..."
name="author">
<style type="text/css" media="screen">
body {
margin: 0 auto;
padding: 0;
background: yellow none repeat scroll 0% 50%;
font-family: verdana,arial,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 80%;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
text-align: center;
width: 1000px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}<meta name="description" content="Ecole "><meta name="keywords" content="venez decouvrir le travail de vos enfants, les activites, sortie...."><meta #menu {
position: relative;
top: 0;
left: 0;
z-index: 100;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
border: 3px solid blue;
margin: 1px;oh !! le bon gâteau qu'a fait maman
background: #ffffff none repeat scroll 0% 50%;
cursor: pointer;
text-align: center;
}
#menu dd {
border: 1px solid blue;
display: none;
}
#menu li {
background: #ffffff none repeat scroll 0% 50%;
text-align: center;
}
#menu li a, #menu dt a {
border: none;
color: #000099;
text-decoration: none;
display: block;
height: 100%;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eeeeee none repeat scroll 0% 50%;
}
#site {
border: 1px solid yellow;
padding: 5px;
position: absolute;
z-index: 1;
top: 70px;
left: 10px;<meta name="description" content="Ecole "><meta name="keywords" content="venez decouvrir le travail de vos enfants, les activites, sortie...."><meta color: #000000;
background-color: #dddddd;
}
p {
font-size: 1.3em;
}
h1 {
font-family: Times new roman;
font-size: 2.4em;
}
</style>
</head>
<body
style="height: 58px; color: rgb(0, 0, 102); background-color: white; background-image: url(misc274.gif);"
alink="#000099" link="#000099" vlink="#000099">
<div style="text-align: left;"><br>
</div>
<div style="text-align: center;">
<h1><img style="width: 130px; height: 115px;" alt="alyscamps"
src="alyscamps.jpg"> <small><span
style="font-family: Comic Sans MS;">BIENVENUE
SUR NOTRE SITE</span></small> <img
style="width: 143px; height: 111px;" alt="alyscamps"
src="alyscamps.jpg">
<script type="text/javascript"><!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i))
{document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//--></script></h1>
</div>
<div
style="margin-right: auto; margin-left: auto; position: relative; width: 839px;"
id="menu">
<dl style="font-weight: bold;">
<dt style="margin-left: 0px; width: 152px; height: 23px;"
onmouseover="javascript:show('smenu1');">PRESENTATION</dt>
<dd id="smenu1" onmouseover="javascript:show('smenu1');"
onmouseout="javascript:show('');">
<ul>
<li><a href="ecole.html">Ecole</a><br>
</li>
<li><a href="la%20cantine.html">La
cantine </a><br>
</li>
<li><a href="le%20reglement.html">Le
reglement </a><br>
</li>
<li><a href="les%20vacances.html">Les vacances </a><br>
</li>
<li><a href="LES%20PHOTOS.html">Photos</a><br>
</li>
<li><a href="liens.html">Liens</a><br>
</li>
</ul>
<br>
</dd>
</dl>
<dl>
<dt style="width: 146px; height: 23px;"
onmouseover="javascript:show('smenu2');"> <span
style="font-weight: bold;">CLASSE PETITS</span></dt>
<dd id="smenu2" onmouseover="javascript:show('smenu2');"
onmouseout="javascript:show('');">
<ul>
<li><a href="la%20classe.html"> La classe</a><br>
</li>
<li><a href="comptines%20des%20petits.html">Lescomptines </a><br>
</li>
<li><a href="travail%20des%20petits.html">Le travail</a><br>
</li>
<li><a href="motricite%20des%20petits.html">La motricité </a><br>
</li>
<li><a href="danse%20des%20petits.html">La danse</a><br>
</li>
</ul>
<br>
</dd>
</dl>
<dl>
<dt style="margin-left: 0px; width: 148px; height: 23px;"
onmouseover="javascript:show('smenu3');"><a href="la%20motricite.html"><span
style="font-weight: bold;">CLASSE MOYENS</span> </a></dt>
<dd id="smenu3" onmouseover="javascript:show('smenu3');"
onmouseout="javascript:show('');">
<ul>
<li><a href="Classe.html">La classe</a><br>
</li>
<li><a href="les%20comptines.html">Les
comptines</a><br>
</li>
<li><a href="travail.html">Le
travail</a><br>
</li>
<li><a href="la%20motricite.html">La
motricité</a><br>
</li>
<li><a href="les%20danses.html">La
danse</a><br>
</li>
</ul>
<br>
</dd>
</dl>
<dl style="font-weight: bold;">
<dt
style="margin-left: 0px; width: 147px; margin-top: 1px; height: 24px;"
onmouseover="javascript:show('smenu4');"><a href="classe" des=""
grands.html="">CLASSE GRANDS</a></dt>
<dd id="smenu4" onmouseover="javascript:show('smenu4');"
onmouseout="javascript:show('');">
<ul>
<li><a href="classe.html">la Classe</a><br>
</li>
<li><a href="Travail.html">Notre travail</a><br>
</li>
<li><a href="comptines.html">Les Comptines </a><br>
</li>
<li><a href="Motricit%E9.html">La Motricité</a><br>
</li>
<li><a href="Danse.html">La Danse</a><br>
</li>
</ul>
<br>
</dd>
</dl>
<dl>
<dt
style="margin-left: 0px; width: 148px; height: 23px; font-weight: bold;"
onmouseover="javascript:show('smenu5');"> <a href="Activit%E9s.html">ACTIVITES</a></dt>
<dd id="smenu5" onmouseover="javascript:show('smenu5');"
onmouseout="javascript:show('');">
<ul>
<li><a href="Coin%20cuisine.html">Coin Cuisine</a><br>
</li>
<li><a href="March%E9+no%EBl.html">Marché de Noël</a><br>
</li>
<li><a href="Chandeleur.html">La Chandeleur </a><br>
</li>
<li><a href="Les%20Rois.html">Les Rois</a><br>
</li>
<li><a href="Carnaval.html">Le Carnaval</a><br>
</li>
</ul>
<br>
</dd>
</dl>
<dl>
</dl>
</div>
<div style="">
<p><small><big><big><small><big><big><br>
</big></big></small></big></big></small></p>
<p> </p>
<p><small><big><big><small><big><big><br>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<meta name="google-site-verification"
content="XX50xEAhSDAZ0utk8thZADqBKb2YiS4p9B__R4075ls">
<title>Accueil</title>
<meta
content="venez decouvrir le travail de vos enfants, les activites les sorties, fetes sorties..."
name="author">
<style type="text/css" media="screen">
body {
margin: 0 auto;
padding: 0;
background: yellow none repeat scroll 0% 50%;
font-family: verdana,arial,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 80%;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
text-align: center;
width: 1000px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}<meta name="description" content="Ecole "><meta name="keywords" content="venez decouvrir le travail de vos enfants, les activites, sortie...."><meta #menu {
position: relative;
top: 0;
left: 0;
z-index: 100;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
border: 3px solid blue;
margin: 1px;oh !! le bon gâteau qu'a fait maman
background: #ffffff none repeat scroll 0% 50%;
cursor: pointer;
text-align: center;
}
#menu dd {
border: 1px solid blue;
display: none;
}
#menu li {
background: #ffffff none repeat scroll 0% 50%;
text-align: center;
}
#menu li a, #menu dt a {
border: none;
color: #000099;
text-decoration: none;
display: block;
height: 100%;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eeeeee none repeat scroll 0% 50%;
}
#site {
border: 1px solid yellow;
padding: 5px;
position: absolute;
z-index: 1;
top: 70px;
left: 10px;<meta name="description" content="Ecole "><meta name="keywords" content="venez decouvrir le travail de vos enfants, les activites, sortie...."><meta color: #000000;
background-color: #dddddd;
}
p {
font-size: 1.3em;
}
h1 {
font-family: Times new roman;
font-size: 2.4em;
}
</style>
</head>
<body
style="height: 58px; color: rgb(0, 0, 102); background-color: white; background-image: url(misc274.gif);"
alink="#000099" link="#000099" vlink="#000099">
<div style="text-align: left;"><br>
</div>
<div style="text-align: center;">
<h1><img style="width: 130px; height: 115px;" alt="alyscamps"
src="alyscamps.jpg"> <small><span
style="font-family: Comic Sans MS;">BIENVENUE
SUR NOTRE SITE</span></small> <img
style="width: 143px; height: 111px;" alt="alyscamps"
src="alyscamps.jpg">
<script type="text/javascript"><!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i))
{document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//--></script></h1>
</div>
<div
style="margin-right: auto; margin-left: auto; position: relative; width: 839px;"
id="menu">
<dl style="font-weight: bold;">
<dt style="margin-left: 0px; width: 152px; height: 23px;"
onmouseover="javascript:show('smenu1');">PRESENTATION</dt>
<dd id="smenu1" onmouseover="javascript:show('smenu1');"
onmouseout="javascript:show('');">
<ul>
<li><a href="ecole.html">Ecole</a><br>
</li>
<li><a href="la%20cantine.html">La
cantine </a><br>
</li>
<li><a href="le%20reglement.html">Le
reglement </a><br>
</li>
<li><a href="les%20vacances.html">Les vacances </a><br>
</li>
<li><a href="LES%20PHOTOS.html">Photos</a><br>
</li>
<li><a href="liens.html">Liens</a><br>
</li>
</ul>
<br>
</dd>
</dl>
<dl>
<dt style="width: 146px; height: 23px;"
onmouseover="javascript:show('smenu2');"> <span
style="font-weight: bold;">CLASSE PETITS</span></dt>
<dd id="smenu2" onmouseover="javascript:show('smenu2');"
onmouseout="javascript:show('');">
<ul>
<li><a href="la%20classe.html"> La classe</a><br>
</li>
<li><a href="comptines%20des%20petits.html">Lescomptines </a><br>
</li>
<li><a href="travail%20des%20petits.html">Le travail</a><br>
</li>
<li><a href="motricite%20des%20petits.html">La motricité </a><br>
</li>
<li><a href="danse%20des%20petits.html">La danse</a><br>
</li>
</ul>
<br>
</dd>
</dl>
<dl>
<dt style="margin-left: 0px; width: 148px; height: 23px;"
onmouseover="javascript:show('smenu3');"><a href="la%20motricite.html"><span
style="font-weight: bold;">CLASSE MOYENS</span> </a></dt>
<dd id="smenu3" onmouseover="javascript:show('smenu3');"
onmouseout="javascript:show('');">
<ul>
<li><a href="Classe.html">La classe</a><br>
</li>
<li><a href="les%20comptines.html">Les
comptines</a><br>
</li>
<li><a href="travail.html">Le
travail</a><br>
</li>
<li><a href="la%20motricite.html">La
motricité</a><br>
</li>
<li><a href="les%20danses.html">La
danse</a><br>
</li>
</ul>
<br>
</dd>
</dl>
<dl style="font-weight: bold;">
<dt
style="margin-left: 0px; width: 147px; margin-top: 1px; height: 24px;"
onmouseover="javascript:show('smenu4');"><a href="classe" des=""
grands.html="">CLASSE GRANDS</a></dt>
<dd id="smenu4" onmouseover="javascript:show('smenu4');"
onmouseout="javascript:show('');">
<ul>
<li><a href="classe.html">la Classe</a><br>
</li>
<li><a href="Travail.html">Notre travail</a><br>
</li>
<li><a href="comptines.html">Les Comptines </a><br>
</li>
<li><a href="Motricit%E9.html">La Motricité</a><br>
</li>
<li><a href="Danse.html">La Danse</a><br>
</li>
</ul>
<br>
</dd>
</dl>
<dl>
<dt
style="margin-left: 0px; width: 148px; height: 23px; font-weight: bold;"
onmouseover="javascript:show('smenu5');"> <a href="Activit%E9s.html">ACTIVITES</a></dt>
<dd id="smenu5" onmouseover="javascript:show('smenu5');"
onmouseout="javascript:show('');">
<ul>
<li><a href="Coin%20cuisine.html">Coin Cuisine</a><br>
</li>
<li><a href="March%E9+no%EBl.html">Marché de Noël</a><br>
</li>
<li><a href="Chandeleur.html">La Chandeleur </a><br>
</li>
<li><a href="Les%20Rois.html">Les Rois</a><br>
</li>
<li><a href="Carnaval.html">Le Carnaval</a><br>
</li>
</ul>
<br>
</dd>
</dl>
<dl>
</dl>
</div>
<div style="">
<p><small><big><big><small><big><big><br>
</big></big></small></big></big></small></p>
<p> </p>
<p><small><big><big><small><big><big><br>
