Problème centre menu css
Fermé
flyad
-
22 oct. 2012 à 18:09
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 23 oct. 2012 à 10:07
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 23 oct. 2012 à 10:07
A voir également:
- Problème centre menu css
- Menu déroulant excel - Guide
- Windows 11 menu démarrer classique - Guide
- Centre de messagerie - Guide
- Canon quick menu - Télécharger - Utilitaires
- Réinitialiser menu démarrer windows 10 - Guide
4 réponses
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
22 oct. 2012 à 20:07
22 oct. 2012 à 20:07
Salut
tu donne un width ( que tu calcul en fonction de ton menu , dans ton exemple le width tournerait autour de 400px )
et tu met le margin auto au ul
tu modifie cette ligne quoi ;-)
a+
tu donne un width ( que tu calcul en fonction de ton menu , dans ton exemple le width tournerait autour de 400px )
et tu met le margin auto au ul
tu modifie cette ligne quoi ;-)
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}
a+
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
22 oct. 2012 à 21:13
22 oct. 2012 à 21:13
c est que tu as du faire une erreur ! ;-)
voila le code complet
voila le code complet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
RAD ZONE Webcreation
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#cssmenu
{
height: 37px;
display: block;
padding: 0;
margin: 20px auto;
border: 1px solid #000000;
border-radius: 5px
}
#cssmenu>UL
{
list-style: none inside;
padding: 0;
margin: auto;
width: 400px;
}
#cssmenu>UL>LI
{
list-style: none inside;
padding: 0;
margin: 0;
float: left;
display: block;
position: relative;
}
#cssmenu>UL>LI>A
{
outline: none;
display: block;
position: relative;
padding: 12px 20px;
font: bold 13px/100% Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}
#cssmenu>UL>LI:first-child>A
{
border-radius: 5px 0 0 5px
}
#cssmenu>UL>LI>A:after
{
content: '';
position: absolute;
border-right: 1px solid #000000;
top: -1px;
bottom: -1px;
right: -2px;
z-index: 99;
}
#cssmenu UL LI.has-sub:hover>A:after
{
top: 0;
bottom: 0;
}
#cssmenu>UL>LI.has-sub>A:before
{
content: '';
position: absolute;
top: 18px;
right: 6px;
border: 5px solid transparent;
border-top: 5px solid #FFF;
}
#cssmenu>UL>LI.has-sub:hover>A:before
{
top: 19px;
}
#cssmenu UL LI.has-sub:hover>A
{
background: #3F3F3F;
border-color: #3F3F3F;
padding-bottom: 13px;
padding-top: 13px;
top: -1px;
z-index: 999;
}
#cssmenu UL LI.has-sub:hover>UL, #cssmenu UL LI.has-sub:hover>DIV
{
display: block;
}
#cssmenu UL LI.has-sub>A:hover
{
background: #3F3F3F;
border-color: #3F3F3F;
}
#cssmenu UL LI>UL, #cssmenu UL LI>DIV
{
display: none;
width: 500px;
position: absolute;
top: 38px;
padding: 10px 0;
background: #3F3F3F;
border-radius: 0 0 5px 5px
z-index: 999;
}
#cssmenu UL LI>UL
{
width: 200px;
}
#cssmenu UL LI>UL LI
{
display: block;
list-style: none inside;
padding: 0;
margin: 0;
position: relative;
}
#cssmenu UL LI>UL LI A
{
outline: none;
display: block;
position: relative;
margin: 0;
padding: 8px 20px;
font: 10pt Arial, Helvetica, sans-serif;
color: #FFF;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
/*]]>*/
</style>
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active '>
<a href='index.html'><span>Home</span></a>
</li>
<li class='has-sub '>
<a href='#'><span>Products</span></a>
<ul>
<li>
<a href='#'><span>Product 1</span></a>
</li>
<li>
<a href='#'><span>Product 2</span></a>
</li>
</ul>
</li>
<li>
<a href='#'><span>About</span></a>
</li>
<li>
<a href='#'><span>Contact</span></a>
</li>
</ul>
</div>
</body>
</html>
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
22 oct. 2012 à 22:00
22 oct. 2012 à 22:00
??? quelles couleurs ?, il n y en as pratiquement pas dans ton css , et celle qui y sont sont visible ( sub background ect )!
PS: attention avec les couleurs CSS3 en rgba , IE < 9 ne les lis pas !
voila un code qui passe ce probleme
pour un rgba(0,0,0,0.4)
mais bon la on s eloigne :-)
pareil pour le decalage ?? je ne vois pas de quoi tu parle ?? par rapport au code que tu as donne , je n en vois pas ?
a+
PS: attention avec les couleurs CSS3 en rgba , IE < 9 ne les lis pas !
voila un code qui passe ce probleme
pour un rgba(0,0,0,0.4)
background:none; background-color:rgba(0,0,0,0.4); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); zoom:1;
mais bon la on s eloigne :-)
pareil pour le decalage ?? je ne vois pas de quoi tu parle ?? par rapport au code que tu as donne , je n en vois pas ?
a+
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
23 oct. 2012 à 10:07
23 oct. 2012 à 10:07
Avec ton premier code sachant que j'ai un style.css a pars du fichier html
;-)) et je le devine comment si tu ne le donne pas ! c est donc dans ce css externe que quelque chose provoque ces problemes !
il faut regarder les heritages CSS avec firebug pour trouver !
a+
22 oct. 2012 à 21:08