Comment centrer mon menu avec Kompozer
Fermé
mumu13
Messages postés
320
Date d'inscription
lundi 19 mars 2007
Statut
Membre
Dernière intervention
30 novembre 2017
-
24 mai 2013 à 21:11
mumu13 Messages postés 320 Date d'inscription lundi 19 mars 2007 Statut Membre Dernière intervention 30 novembre 2017 - 25 mai 2013 à 13:17
mumu13 Messages postés 320 Date d'inscription lundi 19 mars 2007 Statut Membre Dernière intervention 30 novembre 2017 - 25 mai 2013 à 13:17
A voir également:
- Comment centrer mon menu avec Kompozer
- Kompozer - Télécharger - Web Design
- Menu déroulant excel - Guide
- Menu démarrer windows 11 - Guide
- Canon quick menu - Télécharger - Utilitaires
- Menu demarrer - Guide
6 réponses
mumu13
Messages postés
320
Date d'inscription
lundi 19 mars 2007
Statut
Membre
Dernière intervention
30 novembre 2017
15
24 mai 2013 à 22:11
24 mai 2013 à 22:11
<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;
Utilisateur anonyme
24 mai 2013 à 22:32
24 mai 2013 à 22:32
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
Alex-
Messages postés
3027
Date d'inscription
jeudi 4 avril 2013
Statut
Membre
Dernière intervention
16 janvier 2023
960
24 mai 2013 à 22:39
24 mai 2013 à 22:39
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
mumu13
Messages postés
320
Date d'inscription
lundi 19 mars 2007
Statut
Membre
Dernière intervention
30 novembre 2017
15
25 mai 2013 à 08:07
25 mai 2013 à 08:07
Bonjour
Je vous remercie mais çà ne fonctionne pas mon menu reste bloquer à gauche
Je vous remercie mais çà ne fonctionne pas mon menu reste bloquer à gauche
mumu13
Messages postés
320
Date d'inscription
lundi 19 mars 2007
Statut
Membre
Dernière intervention
30 novembre 2017
15
25 mai 2013 à 13:17
25 mai 2013 à 13:17
<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>
