Bonjour à tous et toutes,
J'ai créé un menu horizontal et on m'a répondu hier en m'expliquant comment centrer verticalement dans un bouton un texte sur 1 ligne ou 2 lignes avec line-height et le rajout d'une classe.
Aujourd'hui j'ai un autre problème avec ce menu, car j'aimerais qu'il soit centré dans ma page et non décalé à gauche comme aujourd'hui... J'ai bien trouvé quelques posts sur le sujet (avec une div notamment, mais je n'arrive pas à l'adapter à mon menu...)
Je vous repasse mon code pour info et modif si cele est possible :
Merci d'avance pour votre aide
Patpierre
J'ai créé un menu horizontal et on m'a répondu hier en m'expliquant comment centrer verticalement dans un bouton un texte sur 1 ligne ou 2 lignes avec line-height et le rajout d'une classe.
Aujourd'hui j'ai un autre problème avec ce menu, car j'aimerais qu'il soit centré dans ma page et non décalé à gauche comme aujourd'hui... J'ai bien trouvé quelques posts sur le sujet (avec une div notamment, mais je n'arrive pas à l'adapter à mon menu...)
Je vous repasse mon code pour info et modif si cele est possible :
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
font: 12px verdana, sans-serif;
text-align : center;
margin: 0;
padding: 0;
}
#menu
{
position: absolute;
width:85%;
height:auto;
list-style-type: none;
margin:auto;
padding:auto;
border: 0;
text-align: center;
}
#menu > li
{
float: left;
width: 105px;
font: 13px Garamond;
font-weight: bold;
margin: 1px;
padding: 0;
border: 0;
}
#menu li a{
display: block;
color: white;
background-color: #FF7519;
margin: 0;
height:25px;
line-height:25px;
padding: 3px 3px;
border:1px solid #FFFFFF;
border-radius:12px;
box-shadow:4px 4px 8px #999;
text-decoration: none;
}
#menu li a.ligne2{
line-height:13px;
}
#menu li a:hover {
background-color: rgb(175, 214, 1);
background-color: #EEE8AA;
font-weight: bold;
border:1px solid;
color: #8B4513;
}
#menu .menuderoulant
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menu .menuderoulant li
{
float: none;
margin: 0;
padding: 0;
width: 105px;
height: 28px;
font-weight: normal;
border-top: 1px solid;
border-right: 1px solid;
border-left: 1px solid;
}
#menu .menuderoulant li a
{
display: block;
color: #8B4513;
margin: 0;
border: 0;
border-radius:0px;
text-decoration: none;
background-color: #EEE8AA;
}
#menu .menuderoulant li a:hover
{
color: white;
font-weight: bold;
background-color: #FF7519;
}
#menu .menuderoulant li a:visited {
background-color: white;
}
#menu li:hover > .menuderoulant { display: block; }
</style></head>
<body><ul id="menu">
<li><a href="http://www.pierres-info.fr/la_vision/index.html">LA VISION </a>
<ul class="menuderoulant">
</ul></li>
<li><a href="http:/www.pierres-info.fr/les_outils/index.html">LES OUTILS</a>
<ul class="menuderoulant">
</ul></li>
<li><a href="http:/www.pierres-info.fr/la_taille_directe/index.html" class="ligne2">LA TAILLE DIRECTE</a>
<ul class="menuderoulant">
</ul></li>
<li><a href="http:/www.pierres-info.fr/le_modele/index.html">LE MODELE</a>
<ul class="menuderoulant">
<li><a href="#auréole">Les croquis</a></li>
<li><a href="#auréole">Le modèle vivant</a></li>
<li><a href="#auréole">Le modelage</a></li>
<li><a href="#auréole">Le moulage</a></li>
</ul></li
</ul></li>
<li><a href="http:/www.pierres-info.fr/copie_compas/index.html" class="ligne2">COPIE COMPAS</a>
<ul class="menuderoulant">
</ul></li>
<li><a href="http:/www.pierres-info.fr/copie_machine/index.html" class="ligne2">COPIE MACHINE</a>
<ul class="menuderoulant">
</ul></li>
<li><a href="http:/www.pierres-info.fr/le_statut_d_artiste/index.html" class="ligne2">LE STATUT D'ARTISTE</a>
<ul class="menuderoulant">
</ul></li>
</body></html>Merci d'avance pour votre aide
Patpierre
