28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je ne trouve pas la solution à ce problème et j'espère qu'un QI plus élevé que le mien reussira là où pour l'instant j'échoue.

Je fais un menu en utilisant Jqueryslide menu (http://www.mezouar.com/test/index.html). Mais il n'apparait pas de la même façon selon qu'il soit sur Mac ou PC.

Sur Mac : il est très à gauche et il y a trop d'espace à droite
Sur PC: l'inverse. Il est trop à droite....

*{
margin: 0;
padding: 0;
}*
body {
color: #444;
font-family: Verdana, Arial, "Trebuchet MS", Tahoma, sans-serif;
line-height: 1.4em;
font-size: 0.8em;
margin: 0px;
}

a {
color: #09B5BA;
text-decoration: none;
}
a:hover {
color: #075153;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#content #wrap1 .fourth a:hover {
color: #14B9BD;
}
p {
margin: 0 0 15px 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
}
h1 { font: normal 3.7em "Trebuchet MS", Arial, Sans-Serif; color: #fff; }
h1 a {
color: #fff;
text-decoration: none;
}
h1 a:hover {
text-decoration: none;
}
#content #wrap1 {
height: auto;
margin-bottom: 10px;
}
sup { font-size: .3em; color: #DFCDA2; }
h2 {
color: #00B2B7;
font: bold 1.6em "Trebuchet MS", Arial, Sans-Serif;
border-bottom: 1px solid #ccc;
padding-top: 20px;
padding-bottom: 15px;
margin-bottom: 20px;
}
h3 {
color: #808080;
background: #D0E6E8;
padding: 3px 10px;
margin: 0 0 15px;
}



/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
width: 980px;
font: 9px Verdana, Arial, Helvetica, sans-serif;
position: absolute;
top: 205px;
left: 20px;
margin-right: auto;
margin-left: auto;
}

ul#navmenu li {
display: inline;
font-family: Verdana, Arial, Helvetica, sans-serif;
overflow: visible;
visibility: visible;
font-size: 9px;
line-height: 23px;
list-style: none;
float: left;
padding-right: 8px;
padding-left: 8px;
}
.navi {
display: block;
position: absolute;
}
.stylebtn1 {
margin-left: 8px;
}
.nav {
margin-right: auto;
margin-left: auto;
width: 980px;
}

ul#navmenu ul {
width: 150px;
display: none;
position: absolute;
top: 24px;
font-family: Verdana, Arial, Helvetica, sans-serif;
z-index: 2000;
font-size: 9px;
color: #00B2B7;
}

ul#navmenu ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
z-index: 2000;
overflow: visible;
}

ul#navmenu ul li {
width: 175px; /*For IE 7 lack of compliance*/
display: block !important;
display: inline;
z-index: 2000;
overflow: visible;
visibility: visible;
font: 9px Verdana, Arial, Helvetica, sans-serif;
text-align: left;
}

/* Root Menu */
ul#navmenu a {
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
color: #333333;
text-decoration: none;
height: 24px !important;
height: 1%;
z-index: 2000;
overflow: visible;
visibility: visible;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 25px;
font-weight: 400;
padding-right: 8px;
padding-left: 5px;
}
.pageSelect {
color: #00B2B7;
}
#content #header #navmenu .pageSelect a {
color: #00B2B7;
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
color: #00B2B7;
z-index: 2000;
overflow: visible;
visibility: visible;
height: 22px;
text-align: left;
float: left;
width: auto;
}
#content #header #navmenu .pageSelect li a:hover {
color: #FFFFFF;
}
.five {
width: auto;
height: auto;
margin-top: 15px;
}
.six {
width: 600px;
float: left;
height: 800px;
margin-right: 15px;
margin-left: 10px;
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-align: justify;
padding-left: 20px;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #FFFFFF;
color: #00B2B7;
z-index: 2000;
overflow: visible;
visibility: visible;
border-right: thin solid #CCCCCC;
font: 11px/23px Verdana, Arial, Helvetica, sans-serif;
border-bottom: thin solid #999999;
margin-left: -8px;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #3DC5C9;
color: #FFF;
border-left: thin solid #FFFFFF;
z-index: 2000;
overflow: visible;
visibility: visible;
font: 11px/22px Verdana, Arial, Helvetica, sans-serif;
border-right: thin solid #FFFFFF;
height: 22px;
text-align: left;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #FFFFFF;
color: #0AB6BA;
z-index: 2000;
overflow: visible;
visibility: visible;
border-right: thin solid #FFFFFF;
border-left: thin solid #FFFFFF;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #00B2B7;
color: #FFF;
z-index: 2000;
font: 11px/25px Verdana, Arial, Helvetica, sans-serif;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #00B2B7;
color: #FFFFFF;
z-index: 2000;
font: 10px Verdana, Arial, Helvetica, sans-serif;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #34C2C6;
color: #FFF;
z-index: 2000;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
z-index: 2000;
visibility: hidden;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
z-index: 2000;
color: #00B2B7;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
z-index: 2000;
}
#content {
width: 980px;
background: #fff;
border: 1px solid #333333;
padding-bottom: 15px;
height: auto;
text-align: center;
margin: 0px auto;
overflow: hidden;
}
#header #myslidemenu {
width: 940px;
margin-right: auto;
display: inline;
position: relative;
left: auto;
right: auto;
margin-left: auto;
}

#header {
height: auto;
width: 980px;
text-align: center;
margin: 0px auto 15px;
}
#header p { margin: 30px 0 0; color: #D6E5EA; }
#logo {
width: 185px;
text-align: center;
height: 185px;
margin-right: auto;
margin-left: auto;
padding: 15px 0 10px 0px;
}

#langues {
float: right;
width: 250px;
text-align: right;
position: relative;
color: #000000;
margin-right: auto;
margin-left: auto;
margin-top: -45px;
}
#searchform p { margin: 0; }
#content #langues {
float: left;
}

#menu {
margin: 0;
padding: 0px;
text-align: center;
width: auto;
display: inline;
overflow: visible;
}
.espaceBas {
margin-bottom: 25px;
}

.third { font-size: .9em; float: left; width: 280px; margin: 0 30px 10px 10px; }
.last { float: right; margin: 0 10px 10px 0; }

.more { border-top: 1px solid #eee; padding: 5px 0 0 0; }

#prefooter {
width: 980px;
margin: 0 auto;
background: #fff;
font-size: 0.74em;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}

#footer {
width: 980px;
color: #808080;
font-size: 0.9em;
text-align: left;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
}
#footer a {
color: #444;
text-decoration: none;
}
.right { float: right; text-align: right; font-size: 1em; }
#footer .right a { margin: 0 0 0 2px; padding: 3px 10px; }
#footer .right a:hover {
background: #fff;
color: #444;
}
.espacegauche {
margin-left: 55px;
}
.html {
height: 25px;
width: 200px;
}
.hautBarre {
height: auto;
width: auto;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
line-height: 25px;

margin: 2px;
}
.Video {
font-size: 0.9em;
width: 520px;
height: 505px;
z-index: -3000;
padding-top: 40px;
background: #000000;
text-align: center;
float: left;
overflow: hidden;
margin-right: auto;
margin-left: 10px;
margin-top: 24px;
}
.fourth {
width: 400px;
text-align: justify;
float: right;
height: auto;
overflow: visible;
padding-right: 12px;
}
.style1 {color: #00B2B7}
.ligneDroite {
border-right: thin solid #999999;
margin-right: 2px;
}
.moreBlc {
color: #FFFFFF;
margin-left: 30px;
padding-right: 0;
padding-bottom: 0;
float: left;
font: 1em Verdana, Arial, Helvetica, sans-serif;
}
.20pxespGauche {
padding-top: 18px;
}
.divDroit {
float: right;

}
#top {
width: 980px;
color: #808080;
font-size: 10px;
text-align: left;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
}
#top ul {
}
#top a {
color: #333333;
text-decoration: none;
font: 10px Arial, Helvetica, sans-serif;
}
#top a:hover {
color: #00B2B7;
}
#top li {
display: inline;
margin-right: 7px;
padding-right: 7px;
}
.divTopdroit {
text-align: right;
float: right;
background: url(../img/barre_03.jpg) no-repeat right;
padding-right: 10px;
}
#top div {
float: left;
}
#top #topDroit {
float: right;
}
#top #topDroit li {
}
#footer img a {
text-decoration: none;
}
#footer div {
width: 200px;
height: auto;
}
#wrap1 .riyad #rates {
padding: 10px;
}
.txtTablo {
font: 0.8em Verdana, Arial, Helvetica, sans-serif;
color: #999999;
text-align: left;
padding-top: 5px;
border-top: thin groove #999999;
border-right: medium solid #FFFFFF;
margin-right: 5px;
margin-left: 5px;
}
#footer div li {
display: inline;
}
#footer #topDroit2 {
float: left;
}
#footer img {
text-decoration: none;
padding-right: 5px;
padding-left: 5px;
}
#footer li {
text-decoration: none;
}
#footer a {
text-decoration: none;
}
#footer div {
width: auto;
}
#footer img {
text-decoration: none;
}
.logoBas {
text-decoration: none;
margin-right: 13px;
}
.Txtnoir12 {
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}
#footer #logos {
width: 394px;
margin-top: -3px;
margin-right: auto;
margin-left: auto;
}
#prefooter #copyrigth {
width: auto;
margin-right: auto;
margin-left: auto;
}

Le css du jqueryslide

.jqueryslidemenu{
font: 10px/20px "Trebuchet", Verdana, sans-serif;
color: #666666;
text-align: left;
}

.jqueryslidemenu ul{
list-style-type: none;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
margin-right: auto;
margin-left: auto;
}


#content #wrap1 .riyad li {
list-style: none;
}
#content #wrap1 .riyad #select {
background: #D0E6E8;
color: #01464A;
padding: 15px;
font: 0.9em Verdana, Arial, Helvetica, sans-serif;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block; /*background of tabs (default state)*/
color: white;
border-right: thin solid #CCCCCC;
color: #666666;
text-decoration: none;
padding-top: 8px;
padding-right: 15px;
padding-left: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #666666;
}

.jqueryslidemenu ul li a:hover{
color: #05B9C0;
background: #FFFFFF;
}
.vertLigne {
font: 13px Verdana, Arial, Helvetica, sans-serif;
color: #05B9C0;
border-bottom: 1px solid #05B9C0;
padding-bottom: 3px;
text-align: left;
}
.carreRoom {
height: 225px;
width: 435px;
margin-bottom: 20px;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}



/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #05B9C0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 11px Verdana;
width: 154px;
margin: 0;
border-bottom: thin solid #05B9C1;
padding-right: 5px;
padding-bottom: 5px;
background: #FFFFFF;
color: #05B9C0;
border-right: thin solid #05B9C0;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #05B9C0;
color: #FFFFFF;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
.jqueryslidemenuVERT {
font: 10px "Trebuchet", Verdana, sans-serif;
width: 100%;
color: #05B9C0;
background: #FFFFFF;
margin-left: auto;
height: 24px;
margin-right: auto;
}
pre {
color: #05B9C1;
}
.jqueryslidemenu2 ul li a {
display: block; /*background of tabs (default state)*/
color: white;
text-decoration: none;
padding-top: 8px;
padding-right: 15px;
padding-left: 10px;
}
myslidemenu .jqueryslidemenu2 {
}
#content #header #myslidemenu .jqueryslidemenu2 a:hover {
}
#content #wrap1 .riyad .EspaceBas a {
color: #5C5C5C;
text-decoration: none;
}
#content #wrap1 .riyad .EspaceBas a:hover {
color: #05B9C1;
}
#content #wrap1 .riyad a:hover {
color: #05B9C0;
text-decoration: none;
}
.TitreNoir {
font: 16px Verdana, Arial, Helvetica, sans-serif;
color: #333333;
}
.style4 {color: #A6A6A6}
#prefooter #copyrigth a {
color: #919191;
text-decoration: none;
}
#prefooter #copyrigth a:hover {
color: #05B9C0;
}
#content #wrap1 #chambre {
height: 500px;
}
#content #wrap1 #colGauc {
width: 500px;
overflow: visible;
}
.Carrechiffre {
float: right;
width: 55px;
color: #2AC4CA;
}
screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
.st5 {
font: bold 13px Verdana, Arial, Helvetica, sans-serif;
color: #23C2C8;
text-align: right;
}
.VertgaucheRate {
font: 14px Georgia, "Times New Roman", Times, serif;
color: #05B9C0;
margin-top: 65px;
position: absolute;
width: 50px;
margin-left: -140px;
}
.COLgaucRates {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #06BAC1;
background: #AADFD0;
}
[if IE]>
<style type="text/css">
.mybuggyelement { zoom: 1;}
</style>
<![endif]
[if IE]>
<style type="text/css">
#mainContent, #sidebar1 { zoom: 1;}
</style>
<![endif]
#colGauc #sidebar1 {
margin: 35px;
}



Une âme charitable pourait-elle m'aider ? Merciii

Mélanie
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif