Comment centrer mon menu avec Kompozer
Bonjour,
Je fais un site avec Kompozer mais j'ai un petit soucis je n'arrive pas à centrer mon menu comment puis je faire
Merci pour votre aide
--
Je fais un site avec Kompozer mais j'ai un petit soucis je n'arrive pas à centrer mon menu comment puis je faire
Merci pour votre aide
--
6 réponses
-
Bonjour, avez vous un bout de code à donner ?
-
<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;
-
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
#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 -
Bonjour
Je vous remercie mais çà ne fonctionne pas mon menu reste bloquer à gauche
-
<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>
