Bonjour !
un problème que je n'arrive pas à résoudre
le menu en jquery qui est positionné vers la gauche alors que je voudrais le placer vers la droite pour env. 100px
je vous donne le code :
jquery css
#jMenu {
display:table;
background-color: #FFF;
color: #036;
width:100px;
height: 30px;
padding: 0;
margin-top: 0;
margin-right: 60px;
margin-bottom: 0;
margin-left: 10px;
}
.fNiv {
width: 100px;
height: 30px;
font:Tahoma, Geneva, sans-serif;
margin-top: 0;
margin-right: 10px;
margin-bottom: 0;
margin-left: 10px;
}
/********************/
/** premier niveau **/
/********************/
#jMenu li {
display:table-cell;
margin:0;
//float:left;
color: #036;
}
#jMenu li a {
padding:10px;
display:block;
text-transform:lowercase;
cursor:pointer;
font-size:12px;
font-weight: bold;
background-color: #FFF;
color: #036;
}
/*******************/
/** second niveau **/
/*******************/
#jMenu li ul {
display:none;
position:absolute;
padding:0;
margin:0;
}
#jMenu li ul li {
display:block;
padding:0;
}
#jMenu li ul li.arrow {
height:6px;
border-bottom:none;
padding-bottom:10px;
background-image: url(../arrow_down.png);
background-repeat: no-repeat;
background-position: center center;
background-color: #FFF;
padding-top: 0;
padding-right: 0;
padding-left: 0;
}
#jMenu li ul li a {
font-size:11px;
text-transform:none;
padding:7px;
display:block;
background-color: #FFF;
}
#jMenu li ul li a.isParent {
background-repeat: no-repeat;
background-position: right center;
background-color: #FFF;
}
#jMenu li ul li a:hover {
text-decoration:none;
color:#FFF;
background-color:#006;
}
et le css de la page index
@charset "utf-8";
/* CSS Document */
* {
margin: 0px;
padding: 0px;
}
body {
font-family: verdana,sans-serif;
font-size:12px;
background-position:center;
position:relative;
background-repeat:no-repeat;
background-image:url(images/fond.jpg);
text-decoration:none;
background-attachment:fixed;
padding-top: 20px;
}
#contenu {
width:960px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
#bandeau {
margin:0;
padding: 0;
vertical-align: top;
width: 900px;
height: 100px;
}
#logo {
width: 900px;
height: 100px;
background-repeat:no-repeat;
background-image: url(images/logo_caf_go.png);
margin: 0 ; padding:0;
}
#zindex {
z-index: 0;
width: 960px;
height: 25px;
}
#menu {
width: 960px;
height: 25px;
padding: 0px 0px 0px 10px;
margin-left: 80px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #FFF;
}
#menu a:hover {
text-decoration:none;
color:#FFF;
background-color:#006;
}
/*MENUS*/
#jMenu {
margin:0;
padding:0;
z-index: 5;
width: 960px;
height: 25px;
}
#menudroit {
width: 91px;
height: 102px;
font-size: 0.9em;
float: left;
vertical-align:top;
margin-top: 50px;
margin-right: 10px;
}
#menudroit li {
list-style-type: none;
margin-bottom: 3px;
}
#menudroit li a {
text-decoration: none;
color: black;
font-size: 13px;
}
#menudroit a:hover {
text-decoration: none;
color: red;
}
/*jquery*/
#menubas {
width: 100px;
height: 20px;
line-height: 30px;
list-style: none;
margin: 150px 0px; padding:0;
text-decoration:none;
margin-left: 80px;
margin-right:80px;
}
#bloc_blanc_pa {
width:785px;
height:200px;
/*transparence*/
background: #222; /*#27282a*/
background-color: #FFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 5px 20px #b3bec7;
-webkit-box-shadow: 0px 5px 20px #b3bec7;
box-shadow: 0px 5px 20px #b3bec7;
padding-top: 20px;
padding-left: 50px;
padding-right: 25px;
margin-top: 50px;
margin-left: 20px;
clear: both;
}
.contenu_blocs {
width:700px;
height:200px;
padding: 0;
margin:0;
text-align:justify;
}
#bloc_diaporama {
width:630px;
height:200px;
/*transparence*/
background: #222; /*#27282a*/
background-color: #b0caed;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 5px 20px #b3bec7;
-webkit-box-shadow: 0px 5px 20px #b3bec7;
box-shadow: 0px 5px 20px #b3bec7;
padding-top: 0px;
padding-left: 0px;
padding-right: 25px;
margin-top: 40px;
margin-left: 80px;
margin-right:80px;
float: left;
margin-bottom: 0px;
top: 200px;
}
.slideshow {
height: 117px;
width: 400px;
}
.slideshow img { padding: 0px; border: 0px solid #ccc; background-color: #eee; }
MERCI
voici l'image du menu :
aussi, le problème de positionnement quand le sous menu s'ouvre - il dépasse la bande de menu principal...
une idée ?
un problème que je n'arrive pas à résoudre
le menu en jquery qui est positionné vers la gauche alors que je voudrais le placer vers la droite pour env. 100px
je vous donne le code :
jquery css
#jMenu {
display:table;
background-color: #FFF;
color: #036;
width:100px;
height: 30px;
padding: 0;
margin-top: 0;
margin-right: 60px;
margin-bottom: 0;
margin-left: 10px;
}
.fNiv {
width: 100px;
height: 30px;
font:Tahoma, Geneva, sans-serif;
margin-top: 0;
margin-right: 10px;
margin-bottom: 0;
margin-left: 10px;
}
/********************/
/** premier niveau **/
/********************/
#jMenu li {
display:table-cell;
margin:0;
//float:left;
color: #036;
}
#jMenu li a {
padding:10px;
display:block;
text-transform:lowercase;
cursor:pointer;
font-size:12px;
font-weight: bold;
background-color: #FFF;
color: #036;
}
/*******************/
/** second niveau **/
/*******************/
#jMenu li ul {
display:none;
position:absolute;
padding:0;
margin:0;
}
#jMenu li ul li {
display:block;
padding:0;
}
#jMenu li ul li.arrow {
height:6px;
border-bottom:none;
padding-bottom:10px;
background-image: url(../arrow_down.png);
background-repeat: no-repeat;
background-position: center center;
background-color: #FFF;
padding-top: 0;
padding-right: 0;
padding-left: 0;
}
#jMenu li ul li a {
font-size:11px;
text-transform:none;
padding:7px;
display:block;
background-color: #FFF;
}
#jMenu li ul li a.isParent {
background-repeat: no-repeat;
background-position: right center;
background-color: #FFF;
}
#jMenu li ul li a:hover {
text-decoration:none;
color:#FFF;
background-color:#006;
}
et le css de la page index
@charset "utf-8";
/* CSS Document */
* {
margin: 0px;
padding: 0px;
}
body {
font-family: verdana,sans-serif;
font-size:12px;
background-position:center;
position:relative;
background-repeat:no-repeat;
background-image:url(images/fond.jpg);
text-decoration:none;
background-attachment:fixed;
padding-top: 20px;
}
#contenu {
width:960px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
#bandeau {
margin:0;
padding: 0;
vertical-align: top;
width: 900px;
height: 100px;
}
#logo {
width: 900px;
height: 100px;
background-repeat:no-repeat;
background-image: url(images/logo_caf_go.png);
margin: 0 ; padding:0;
}
#zindex {
z-index: 0;
width: 960px;
height: 25px;
}
#menu {
width: 960px;
height: 25px;
padding: 0px 0px 0px 10px;
margin-left: 80px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #FFF;
}
#menu a:hover {
text-decoration:none;
color:#FFF;
background-color:#006;
}
/*MENUS*/
#jMenu {
margin:0;
padding:0;
z-index: 5;
width: 960px;
height: 25px;
}
#menudroit {
width: 91px;
height: 102px;
font-size: 0.9em;
float: left;
vertical-align:top;
margin-top: 50px;
margin-right: 10px;
}
#menudroit li {
list-style-type: none;
margin-bottom: 3px;
}
#menudroit li a {
text-decoration: none;
color: black;
font-size: 13px;
}
#menudroit a:hover {
text-decoration: none;
color: red;
}
/*jquery*/
#menubas {
width: 100px;
height: 20px;
line-height: 30px;
list-style: none;
margin: 150px 0px; padding:0;
text-decoration:none;
margin-left: 80px;
margin-right:80px;
}
#bloc_blanc_pa {
width:785px;
height:200px;
/*transparence*/
background: #222; /*#27282a*/
background-color: #FFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 5px 20px #b3bec7;
-webkit-box-shadow: 0px 5px 20px #b3bec7;
box-shadow: 0px 5px 20px #b3bec7;
padding-top: 20px;
padding-left: 50px;
padding-right: 25px;
margin-top: 50px;
margin-left: 20px;
clear: both;
}
.contenu_blocs {
width:700px;
height:200px;
padding: 0;
margin:0;
text-align:justify;
}
#bloc_diaporama {
width:630px;
height:200px;
/*transparence*/
background: #222; /*#27282a*/
background-color: #b0caed;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 5px 20px #b3bec7;
-webkit-box-shadow: 0px 5px 20px #b3bec7;
box-shadow: 0px 5px 20px #b3bec7;
padding-top: 0px;
padding-left: 0px;
padding-right: 25px;
margin-top: 40px;
margin-left: 80px;
margin-right:80px;
float: left;
margin-bottom: 0px;
top: 200px;
}
.slideshow {
height: 117px;
width: 400px;
}
.slideshow img { padding: 0px; border: 0px solid #ccc; background-color: #eee; }
MERCI
voici l'image du menu :
aussi, le problème de positionnement quand le sous menu s'ouvre - il dépasse la bande de menu principal...
une idée ?