28172 sujets

CSS et mise en forme, CSS3

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



[!code=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;
}[!/code!]

et le css de la page index


[ code = css ]
@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; }
[ / code ]


MERCI !
Modifié par Blanca (23 Jan 2011 - 23:05)
Salut,
Tu pourrais éditer ton post et mettre ton code entre des balises code (voir bouton en bas)..
Là c'est illisible, tu risques de ne pas d'avoir bcp de réponses.
A+
en fait t'as cliqué sur le bouton mais il t'as mis la balise [ code ] (sans les espaces) tout à la fin de ton post, d'où la ligne avec une bordure verte juste à la fin.
sinon écris [ code = css ] au tout début du code et [ / code ] tout à la fin (encore une fois sans les espaces). Merci Smiley cligne
Et si tu as une page en ligne ça pourrait également être utile pour cerner le problème qui vient peut être de tes css mais aussi peut être des css par défaut de jquery.

Tu veux déplacer tout le menu ? Tu as essayé de rajouter
margin-left:100px;
dans le code css de ton menu ?
Heuu.. une page en ligne c'est une page sur internet... ce que tu es entrain de faire que je sache. L'avoir sur dreamweaver ne va pas beaucoup m'aider vu que je ne suis pas sur ton ordinateur.

Et plutot que la balise couleur qui ne sert à rien ici tu devrais *vraiment* utiliser la balise [ code=css ] qui colore ton texte d'une façon particulière et permet de visualiser d'emblée la syntaxe utilisée.
Et comme je te l'avais dis tu dois mettre les balise code que je t'ai donnée en retirant les espaces !!!

Un autre exemple pour être plus clair :
[!code=css!]ton code ici...... [!/code!]
Ou alors comme ici tu RETIRE LES POINTS D'EXCLAMATIONS !!!