Menu horizontale décalé en fonction de la résolution

souka Membre non connecté

Booster Minigun

Le 03/07/2015 à 16h25

re bonjour,

le site est en maintenance pour l'instant tu n'aura pas accée par contre je te donne les css

global.css je pense que tu a besoin de celui ci

Code CSS :

/* --------------------------------------
global.css
 Contient les classes globales au site, peuvent etre utilisees partout.
--------------------------------------*/ 
 
 
/* La mise en forme du texte
-------------------------------------------*/
 
/* --- Les liens du site --- */
 
 
.bgtitre{
background-image:url(images/bgtitre.png);
 
}
 
 
 
 
 
 
 
 
 
a {
color: #ff0000;
text-decoration: none;
}
 
a:hover {
transition: color 0.4s ease-in 0s;
color: #ffffff;
text-decoration: underline;
}
 
/* --- Les liens des utilisateurs --- */
a.admin { color: #00ff00; }
a.modo { color: #0055ff; }
a.member { color: #ff0000; }
 
hr {background:#666666;}
/* --- Les differentes tailles de polices --- */
.smaller { font-size: 10px; }
.small { font-size: 12px; }
.big { font-size: 16px; }
.bigger { font-size: 18px; }
.biggest { font-size: 20px; }
 
/* --- Les titres (balise h) --- */
h1 { font-size: 21px; }
h2 { font-size: 19px; }
h3 { font-size: 18px; }
h4 { font-size: 17px; }
h5 { font-size: 16px; }
h6 { font-size: 15px; }
 
/* --- Les Titres bbcode --- */
.formatter-title { display: inline; }
h3.formatter-title, h4.formatter-title { border-bottom: 1px solid #ff0000; }
 
/* Titre 1 */
h1.formatter-title { color:#666666; }
/* Titre 2 */
h2.formatter-title { margin-left: 20px; color:#999999; }
/* Sous titre 1 */
h3.formatter-title { margin-left: 40px; color:#cccccc; }
/* Sous titre 2 */
h4.formatter-title { margin-left: 60px; }
 
/* --- Les liens vers wikipedia --- */
a.wikipedia-link:before {
content: url('../../default/images/wikipedia_icon.png');
vertical-align: middle;
padding-right: 2px;
}
 
a.wikipedia-link { border-bottom: 1px dotted; }
 
 
/* -- Mise en forme du contenu --
--------------------------------------*/
 
/* --- Affichage du mini calendrier --- */
.calendar-block {
position: absolute;
border: 1px solid #999999;
bottom: 0;
left: 100px;
z-index: 100;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
border-radius: 3px;
}
 
.calendar-block .date-picker {
margin: 0px;
width: 172px;
table-layout: fixed;
}
 
.calendar-block .date-picker select {
border: none;
font-size: 10px;
padding: 3px 0px;
}
 
.calendar-block .date-picker select,
.calendar-block .date-picker select:focus { 
box-shadow: none;
max-width: 75px;
}
 
.calendar-block .date-picker th {
padding: 1px 0px;
background: #FFFFFF;
}
 
.calendar-block .date-picker th a { color: #666666; }
.calendar-block .date-picker tbody tr {
text-align: center;
padding: 0px;
}
.calendar-block .date-picker td {
height: 23px;
padding: 1px 2px;
}
 
.calendar-block .date-picker tbody tr:first-child { font-weight: bold; }
.calendar-block .date-picker tbody tr:last-child { border-bottom: none; }
 
.calendar-block .date-picker tbody tr:first-child td { border-top: 1px solid #999999; }
.calendar-block .date-picker tbody tr td:first-child { border-left: none; }
.calendar-block .date-picker tbody tr td:last-child { border-right: none; }
 
.calendar-block .date-picker tbody tr td.calendar-none { background: #FFFFFF; }
.calendar-block .date-picker tbody tr td.calendar-today { background: #B5E5B9; }
.calendar-block .date-picker tbody tr td.calendar-event { background: #DBE5EE; }
.calendar-block .date-picker tbody tr td.calendar-weekend { background: #FFE3B6; }
 
/* --- les blocs bbcode --- */
.bbcode-block {
position: absolute;
text-align: center;
padding: 6px 4px;
bottom: 2px; 
z-index: 100;
background: #F3F3F3;
border-radius: 3px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
border: 1px solid #AAAAAA;
}
 
.bbcode-block a {
cursor: pointer;
text-decoration: none;
}
 
/* --- Le selecteur de couleur --- */
.color-picker {
position: absolute;
z-index: 100;
}
 
.color-picker .bbcode-block { left: 80px; }
 
.color-picker .bbcode-block table {
border-collapse: collapse;
margin: auto;
border: none;
}
 
.color-picker td {
padding: 0px;
border: 1px solid #F3F3F3;
}
 
.color-picker td a {
display: block;
width: 14px;
height: 14px;
}
 
/* --- les blocs de quote, de code ou caches --- */
.formatter-blockquote, .formatter-code, .formatter-hide {
display: block;
width: 93%;
padding: 2px 0px;
font-weight: bold;
margin: auto;
}
.blockquote, .code, .hide {
overflow: auto;
max-height: 500px;
border: 1px solid #bfbfbf;
border-radius: 3px;
color: #efefef;
padding: 8px;
margin: 0px 25px;
}
 
.blockquote{
color:#efefef;
position:relative;
padding-left: 20px;
background:none;
}
 
.blockquote:before {
position: absolute;
display: block;
left: 3px;
top: 10px;
margin-top: -5px;
font-family: FontAwesome;
content: "F10e";
font-size: 11px;
font-weight: 300;
}
 
.code{
color:#666666;
padding-left: 20px;
background: rgba(255,255,255,0.8);
background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%, rgba(56, 56, 56, 0.18) 100%);
}
 
.hide {
cursor: pointer;
height: 10px; 
overflow: hidden;
}
 
.hide2 { 
visibility: hidden;
overflow: auto;
}
 
/* --- les autres element bbcode --- */
.indent { margin-left: 30px; }
 
.formatter-acronym { cursor: help; }
 
.formatter-block {
margin: 5px 20px; 
padding: 5px; 
border: 1px solid #efefef;
display: block;
overflow: hidden;
}
 
.formatter-fieldset { margin: 10px; padding:5px; border: 1px solid #ff0000; }
 
.formatter-ul { text-align: left; }
 
/* --- les listes numerotees --- */
.code ol { margin-left: 3em; }
 
/* --- La recherche de membre (AJAX) --- */
.xmlhttprequest-result-search {
overflow: auto;
min-height: 40px;
width: 100px;
overflow: auto;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;  
padding: 2px;
margin: 2px 0px 0px 0px;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01);
}
 
/* --- La barre de progression --- */
.progressbar-container {
background: #F5F5F5;
margin: 4px 0px 10px;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
position: relative;
}
.progressbar-container .progressbar-infos {
line-height: 13px;
font-size: 11px;
text-align: center;
width: 100%;
position: absolute;
}
.progressbar {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.progressbar[style*="width: 100"] {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
 
.progressbar-container .progressbar {
height: 13px;
background-color: #8ECF67;
transition: width .6s ease;
}
 
/* --- Le systeme de notation --- */
.notation,
.static-notation { display: inline-block; }
 
.notation .star,
.static-notation .star { 
color: #E3CF7A; 
font-size: 14px; 
padding-right: 5px; 
text-decoration: none;
}
 
 
/* -- Les Icones specifiques PHPBoost de FontAwesome --
-------------------------------------------*/
 
.fa-syndication:before { color: #ffffff; }
.fa-success:before { color: #478948; }
.fa-forbidden:before { color: #BA4B49; }
.fa-error:before { color: #BA4B49; }
.fa-warning:before { color: #C19954; }
.fa-ban:before { color: #BA4B49; }
.fa-unban:before { color: #478948; }
.fa-male:before { color: #8DC3E9; }
.fa-female:before { color: #F49CC4; }
.fa-online:before { color: #52D132; }
.fa-offline:before { color: #E05759; }
 
li.small-block .fa-stack { height: 2.34em; }
 
.fa-circle-alert {
z-index: 1;
position: absolute;
top: -3px;
left: 20px;
font-size: 1.32em;
}
 
.fa-circle-alert span {
display: block;
position: absolute;
top: 4px;
width: 100%;
margin: 0 auto;
color: white;
font-size: 0.7em;
text-align: center;
}
 
 
/* -- Les differents menus --
--------------------------------------*/
 
.dynamic-menu { 
position: relative;
width:100%;
 
}
 
/* --- Niveau 1 --- */
.dynamic-menu ul {
border-right-color: #000;
border-left-color: #3C3C3C;
margin: 0;
padding: 0;
border: none;
list-style-type: none;
z-index: 0;
}
 
.dynamic-menu > ul > li {
 
position: relative;
display: inline-block !important;
}
 
.dynamic-menu li a,
.dynamic-menu li span {
text-decoration: none;
display: block;
white-space: nowrap;
padding: 6px 12px;
font-size: 13px;
color:#999999;
 
}
 
.dynamic-menu li a:hover {
color:#efefef;
transition: color 0.3s ease-out 0s;
 
}
 
.dynamic-menu li span:hover {
color:#000000;
transition: color 0.3s ease-out 0s;
background-color:#FF0000;
}
 
.dynamic-menu > ul > li:hover { color:#efefef;
}
 
.dynamic-menu > ul > li > a,
.dynamic-menu > ul > li > a:hover {
text-decoration: none;
font-weight: 300;
}
 
/* --- Niveau 2 --- */
.dynamic-menu li ul {
position: absolute;
top: -99999em;
opacity: 0;
margin: 0 !important;
transition: opacity .2s ease-in-out,top 0 ease-in 0s;
 
color: #666666;
font-size: 11px;
background: #232323;
border:1px solid #ff0000;
z-index: 102;
}
 
.dynamic-menu li:hover > ul {
opacity: 1;
top: 100%;
transition: opacity .2s ease-in-out, top 0s ease-in 0s;
}
 
.dynamic-menu li li {
clear: both;
display: block;
width: 100%;
margin: 0;
padding: 0;
white-space: nowrap;
text-align: left;
position: relative;
}
 
.dynamic-menu li li a,
.dynamic-menu li li span {
font-size: 12px;
display: block;
text-decoration: none;
padding: 5px 15px;
outline: none;
color:#999999;
}
 
.dynamic-menu li li a:hover {
background-color:#FF0000;
cursor: pointer;
text-decoration: none;
color:#ffffff;
},
.dynamic-menu li li span:hover {
color:#ff0000;
transition: color 0.3s ease-out 0s;
}
 
.dynamic-menu ul li.extend > a,
.dynamic-menu ul li.extend > span { padding-right: 18px; }
 
.dynamic-menu ul li.extend > a:after,
.dynamic-menu ul li.extend > span:after {
position: absolute;
display: block;
right: 7px;
top: 50%;
margin-top: -5px;
font-family: FontAwesome;
content: "F0DA";
font-size: 11px;
font-weight: 300;
}
 
.dynamic-menu a img,
.dynamic-menu span img {
max-width: none;
padding-right: 6px;
vertical-align: -4px;
}
 
/* --- Niveau 3 --- */
.dynamic-menu li li ul {
left: 100%;
z-index: 101;
}
 
.dynamic-menu li li:hover > ul { top: -1px; }
 
/* --- Menus groupes --- */
.dynamic-menu.group > ul {
font-size: 0;
}
 
.dynamic-menu.group > ul > li {
border-radius: 0;
border-right: 1px solid #F9F9F9;
border-left: 1px solid #BBBBBB;
}
 
.dynamic-menu.group > ul > li:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-left: 1px solid rgba(0, 0, 0, 0.1)
}
 
.dynamic-menu.group > ul > li:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid rgba(0, 0, 0, 0.1)
}
 
/* --- Menus de navigation --- */
nav.dynamic-menu {
margin: 0 auto 5px;
}
 
nav.dynamic-menu h5 {
text-align: center;
padding: 6px;
font-weight: bold;
font-size: 12px;
color: #666666;
}
 
nav.dynamic-menu h5:hover {
color: #efefef;
background: #EAEDEE;
cursor: default;
}
 
nav.dynamic-menu li ul { min-width: 160px; }
 
 
/* --- Menus des modules --- */
menu.dynamic-menu { margin: 5px; }
 
menu.dynamic-menu ul li ul {
margin-left: 0 !important;
margin-top: 1px !important;
}
 
menu.dynamic-menu > ul > li {
position: relative;
display: inline-block !important;
display: inline;
padding: 0;
color: #666666;
background-image: linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, rgba(56,56,56,0.18) 100%);
background-color: #FFFFFF;
border: 1px solid #999999;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #B3B3B3;
border-radius: 4px;
cursor: pointer;
text-align: center;
}
 
menu.dynamic-menu > ul > li:hover { background-color: #EEEEEE; }
 
menu.dynamic-menu > ul > li.current {
background-image: linear-gradient(to top,  rgba(255,255,255,0.18) 0%, rgba(56,56,56,0.18) 100%);
background-color: #F0F0F0;
border-top-color: #B3B3B3;
}
 
menu.dynamic-menu > ul > li > a { padding: 4px 12px; color:#121212; }
menu.dynamic-menu > ul > li > a > i { font-size: 1.1em; }
 
menu.dynamic-menu li li:hover > ul { top: -7px; }
 
menu.dynamic-menu li ul li a, menu.dynamic-menu li ul li span {
color: #666666;
font-size: 11px;
padding: 3px 12px;
}
 
menu.dynamic-menu li ul li a i,
menu.dynamic-menu li ul li span i {
font-size: 14px;
vertical-align: -2px;
width: 16px;
display: inline-block;
margin-right: 4px;
text-align: center;
}
 
menu.dynamic-menu li ul li a i:before,
menu.dynamic-menu li ul li span i:before {
display: block;
width: 16px;
}
 
menu.dynamic-menu ul li.extend > a:after,
menu.dynamic-menu ul li.extend > span:after { margin-top: -6px; }
 
/* --- Menu de droite --- */
.dynamic-menu.right ul {
right: -1px;
left: auto;
}
 
.dynamic-menu.right li li ul {
right: 100%;
left: auto;
}
 
/* --- Separateur --- */
.dynamic-menu ul li.separator {
background: #E8EDF3;
height: 1px;
}
 
.dynamic-menu.right ul li.extend > a:before,
.dynamic-menu.right ul li.extend > span:before {
position: absolute;
display: block;
left: 5px;
top: 50%;
margin-top: -5px;
font-family: FontAwesome;
content: "F0D9";
font-size: 11px;
font-weight: 300;
}
 
.dynamic-menu.right ul li.extend > a:after,
.dynamic-menu.right ul > span:after {
content: "";
}
 
/* --- Menu Vertical - Scrolling ---*/
 
ul.vertical-scrolling-menu li { width:100%; }
 
ul.vertical-scrolling-menu h5:after{
position: absolute;
display: block;
right: 50%;
top: 75%;
margin-top: -5px;
font-family: FontAwesome;
content: "F0DD";
font-size: 11px;
font-weight: 300;
}
 
aside#menu-right ul.vertical-scrolling-menu h5:before{
position: absolute;
display: block;
left: 5px;
top: 50%;
margin-top: -5px;
font-family: FontAwesome;
content: "F0D9";
font-size: 11px;
font-weight: 300;
}
aside#menu-right ul.vertical-scrolling-menu h5:after{
content: "";
}
aside#menu-left ul.vertical-scrolling-menu h5:after{
content: "f0da";
right: 5px;
top: 50%;
}
 
ul.vertical-scrolling-menu h5{
background:#121212;
border-radius:6px;
color:#999999;
}
 
ul.vertical-scrolling-menu h5:hover{
background:#121212;
color:#ffffff;
}
aside#menu-left ul.vertical-scrolling-menu li:hover > ul,
aside#menu-right ul.vertical-scrolling-menu li:hover > ul {
border-radius:6px;
border:1px solid #ff0000;
}
 
aside#menu-left ul.vertical-scrolling-menu li:hover > ul { left:100%; top:-6px;}
aside#menu-right ul.vertical-scrolling-menu li:hover > ul { right:100%; top:-6px; }
 
aside#menu-right ul.vertical-scrolling-menu li li ul { left:auto;}
 
ul.vertical-scrolling-menu li.first-level { padding-left: 20px; }
 
aside#menu-right ul.vertical-scrolling-menu li.extend > a:before,
aside#menu-right ul.vertical-scrolling-menu li.extend > span:before {
position: absolute;
display: block;
left: 5px;
top: 50%;
margin-top: -5px;
font-family: FontAwesome;
content: "F0D9";
font-size: 11px;
font-weight: 300;
}
 
aside#menu-right ul.vertical-scrolling-menu li.extend > a:after,
aside#menu-right ul.vertical-scrolling-menu li.extend > span:after {
content: "";
}
 
/* --- Menu Horizontal - Scrolling --- */
 
ul.horizontal-scrolling-menu {
 
 
width:1000px;
margin-top:-25px;
margin-left:2px;
display:table;
background:#000;
padding:0 0px;
background-color: #333333;
}
 
ul.horizontal-scrolling-menu li {
 
display: block;
padding: 0;
 
}
.separation{
margin-left:210px;
margin-top:-95px; 
 
 
}
 
.separation2{
margin-left:240px;
margin-top:-130px; 
 
 
}
 
.separation3{
margin-left:365px;
margin-top:-125px; 
 
 
}
.fbfooter{
 
margin-left:405px;
margin-top:-130px; 
 
}
.footertitre{
font-size:18px;
text-align:left;
margin-left:490px;
}
 
.adresse{
font-size:12px;
margin-left:490px;
 
}
ul li.first-level-extend > a:after,
ul li.first-level-extend > span:after {
 
 
position: absolute;
display: block;
right: 0;
top: 45%;
margin-top: -5px;
font-family: FontAwesome;
content: "F0DD";
font-size: 11px;
font-weight: 300;
}
 
/*ul.horizontal-scrolling-menu > li:hover:last-child > ul {
right:0;
}
 
ul.horizontal-scrolling-menu > li:last-child li:hover ul {
left:auto;
right:100%;
}*/
 
/* --- Menu Horizontal - Scrolling aside#left --- */
 
aside#menu-left ul.horizontal-scrolling-menu > li:hover:last-child > ul,
aside#menu-left ul.horizontal-scrolling-menu > li:hover > ul,
aside#menu-left ul.horizontal-scrolling-menu > li:last-child li:hover ul {
right:auto;
left:100%;
top:-6px;
}
 
aside#menu-left ul li.first-level-extend > a:after,
aside#menu-left ul li.first-level-extend > span:after {
position: absolute;
display: block;
right: 5px;
top: 50%;
margin-top: -5px;
font-family: FontAwesome;
content: "F0DA";
font-size: 11px;
font-weight: 300;
}
 
aside#menu-left ul.horizontal-scrolling-menu > li {
width:100%;
text-align:right;
padding-right:5px;
}
 
/* --- Menu Horizontal - Scrolling aside#right --- */
 
aside#menu-right ul.horizontal-scrolling-menu > li:hover:last-child > ul,
aside#menu-right ul.horizontal-scrolling-menu > li:hover > ul,
aside#menu-right ul.horizontal-scrolling-menu > li:last-child li:hover ul,
aside#menu-right ul.horizontal-scrolling-menu > li li ul{
left:auto;
right:100%;
top:-6px;
}
 
aside#menu-right ul.horizontal-scrolling-menu > li {
width:100%;
}
 
aside#menu-right ul li.first-level-extend > a:before,
aside#menu-right ul li.first-level-extend > span:before {
position: absolute;
display: block;
left: 5px;
top: 50%;
margin-top: -5px;
font-family: FontAwesome;
content: "F0D9";
font-size: 11px;
font-weight: 300;
}
 
aside#menu-right ul li.first-level-extend > a:after,
aside#menu-right ul li.first-level-extend > span:after {
content: "";
}
 
 
/* --- Menu Horizontal --- */
nav.menu-horizontal {
padding:5px;
background:#121212;
border-radius:6px;
}
 
nav.menu-horizontal ul {
display:table;
margin:auto;
}
 
nav.menu-horizontal ul li { display: inline;}
 
nav.menu-horizontal ul li a{padding:5px;}
 
nav.menu-horizontal ul li:hover a{ color:#efefef}
 
nav.menu-horizontal ul img { margin-right: 5px; }
 
/* --- Menu Vertical --- */
h3.menu-vertical-0 {
text-align: center;
font-size: 12px;
font-weight: bold;
margin-top: -2px;
padding-bottom: 2px;
}
 
ul.menu-vertical a,
ul.menu-vertical span { color: #666666; }
 
ul.menu-vertical {
text-align: left;
margin: 0 !important;
}
 
ul.menu-vertical h3 {
font-size:15px;
}
 
ul.menu-vertical ul h3 {
font-size:13px;
}
 
ul.menu-vertical ul {
text-indent:10px;
}
 
ul.menu-vertical ul ul{
text-indent:20px;
}
 
ul.menu-vertical li { list-style-type: none; }
 
ul.menu-vertical img { margin-right: 5px; }
 
ul.menu-vertical li a,
ul.menu-vertical li span {
padding:2px 10px;
display:block;
list-style-type: none;
color:#999999;
}
 
ul.menu-vertical li a:hover{ color:#efefef;}
ul.menu-vertical li span:hover {color:#ff0000;}
 
ul.menu-vertical-0 li a,ul.menu-vertical-0 li span { color: #999999; }
 
ul.menu-vertical-1 li a,ul.menu-vertical-1 li span { color: #cccccc; }
 
ul.menu-vertical-2 li a,ul.menu-vertical-2 li span {
color: #cccccc;
font-style: italic;
}
 
ul.menu-vertical-3 li { font-style: normal; }
 
ul.menu-vertical-3 li a,ul.menu-vertical-3 li span {
color: #778899;
font-size: 80%;
}
 
/* --- menu de flux --- */
.feed-list {
list-style-type: none;
text-align: left;
margin: 5px 0px;
}
 
.feed-list li{
margin-bottom:4px;
position:relative;
padding-bottom:5px;
}
 
.feed-list li a{
padding:2px 4px;
margin-bottom:13px;
}
 
.feed-list li p{
text-align:center;
background:rgba(0,0,0,0.6);
color:#f0f0f0;
position:absolute;
bottom:0;
margin:0;
width:100%;
}
 
 
/* -- Les message d erreurs --
--------------------------------------*/
 
div.message-helper-small { width: 50% }
 
.error, .notice, .warning, .success, .question { 
height: auto;
padding: 10px 10px 10px 40px;
margin: 5px auto 15px auto;
line-height: 20px;
border: 1px dotted #FFFFFF;
border-radius: 4px;
position: relative;
display: block;
text-align: left;
}
 
.error:before, .notice:before, .warning:before, .success:before, .question:before {
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 2em;
position: absolute;
left: 6px;
top: 7px;
width: 28px;
text-align: center;
}
 
.error:before { content: "f00d"; }
.error, .error:before { color: #BA4B49; }
.notice:before { content: "f12a"; }
.notice, .notice:before { color: #888888; }
.warning:before { content: "f071"; }
.warning, .warning:before { color: #C19954; }
.success:before { content: "f00c"; }
.success, .success:before { color: #478948; }
.question:before { content: "f128"; }
.question, .question:before { color: #3B88AE; }
 
.question { border-color: #3B88AE; }
.notice { border-color: #888888; }
.warning { border-color: #C19954; }
.error { border-color: #BA4B49; }
.success { border-color: #478948; }
 
 
/* -- Le maintenance --
--------------------------------------*/
 
div#message-maintain {
position: absolute;
left:40%;
top: 40px;
opacity: 0.98;
text-align: center;
}
 
div#message-maintain > div { 
margin: 0px auto;
background: #000000;
width: 310px;
}
 
div#release { margin-top: 20px; }
 
/* -- Systeme d Upload --
--------------------------------------*/
.upload-address-bar {
background: #FAFAFA;
border: 1px solid #DDDDDD;
border-radius: 3px;
color: #444444;
margin: 0px 25px; 
padding: 6px;
}
 
.upload-address-bar-links {
float: right;
margin: 0 25px 25px 25px;
}
 
.upload-address-bar-links a { margin-left: 10px; }
 
#empty-folder { width: 70%; }
 
.upload-elements-container { margin: 0 0 0 20px; }
 
.upload-elements-file,
.upload-elements-repertory { 
float: left; 
margin: 10px;
}
 
.upload-elements-repertory { height: 60px; }
 
/* --- Deplacement des fichiers --- */
.upload-selected-cat {
background: #F5FBFF;
border: 1px solid #2C5169;
}

merci d'avance

souka Membre non connecté

Booster Minigun

Le 03/07/2015 à 17h03

#145060

EDIT:

J'ai compris le problème firefox était a 100% de zoom et chrome 110% ce qui déforme mon menu du coup je vais essayé d'ajouté fixe ou de trouver ce qu'il faut ajouter pour qu'il soit fixe

donc le menu se trouve dans design.css

Code CSS :

.bgtitre{
background-image:url(images/bgtitre.png);
 
}
 
.bg-annonce{
background-color: #202020;
 
}
.titre-annonce{
 
color:#FFFFFF;
}
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }
 
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }
 
.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }
 
.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
 
 
 
 
 
 
 
 
p,h3,h4,pre {
  text-align: left;
  max-width: 540px;
  margin: 0 auto 20px;
  }
 
.rslides {
  margin: 0 auto 40px;
  }
 
#slider2,
#slider3 {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  margin: 0 auto;
  }
 
.rslides_tabs {
  list-style: none;
  padding: 0;
 
  -moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  font-size: 18px;
  list-style: none;
  margin: 0 10 50px;
  max-width: 200px;
  padding: 0px 0;
 
  width: 50%;
  }
 
.rslides_tabs li {
  display: inline;
  float: none;
  margin-right: 1px;
  }
 
.rslides_tabs a {
  width: auto;
  line-height: 20px;
  padding: 9px 20px;
  height: auto;
  background: transparent;
  display: inline;
  }
 
.rslides_tabs li:first-child {
  margin-left: 0;
  }
 
.rslides_tabs .rslides_here a {
 
  }
 
a {
  color: #fff;
  text-decoration: none;
  }
 
#download {
  background: #333;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  display: block;
  font-size: 20px;
  font-weight: bold;
  margin: 60px auto;
  max-width: 500px;
  padding: 20px;
  }
 
#download:hover {
  background: rgba(255,255,255,.15);
  }
 
.footer {
  font-size: 11px;
  }
 
/* Callback example */
 
h3 {
  font: 20px/30px "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  color: #fff;
  }
 
.events {
  list-style: none;
  }
 
.callbacks_container {
  margin-bottom: 50px;
  position: relative;
  float: left;
  width: 100%;
  }
 
.callbacks {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }
 
.callbacks li {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  }
 
.callbacks img {
  display: block;
  position: relative;
  z-index: 1;
  height: auto;
  width: 100%;
  border: 0;
  }
 
.callbacks .caption {
  display: block;
  position: absolute;
  z-index: 2;
  font-size: 20px;
  text-shadow: none;
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .8);
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 20px;
  margin: 0;
  max-width: none;
  }
 
.callbacks_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 52%;
  left: 0;
  opacity: 0.7;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  background: transparent url("themes/themes.gif") no-repeat left top;
  margin-top: -45px;
  }
 
.callbacks_nav:active {
  opacity: 1.0;
  }
 
.callbacks_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
  }
 
#slider3-pager a {
  display: inline-block;
}
 
#slider3-pager img {
  float: left;
}
 
#slider3-pager .rslides_here a {
  background: transparent;
  box-shadow: 0 0 0 2px #666;
}
 
#slider3-pager a {
  padding: 0;
}
 
@media screen and (max-width: 600px) {
  h1 {
    font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
  .callbacks_nav {
    top: 47%;
    }
  }
 
 
 
 
 
 
 
 
 
 
/*--------------------------------------
design.css
Contient les conteneurs de mise en page.
Le design.css permet de mettre en forme votre site web avec le design de votre choix
--------------------------------------*/ 
body {
/*position: relative;*/
min-height: 100%;
background: #ffffff url(images/global.png)  no-repeat fixed center top;
color: #ffffff;
font-size: 13px;
font-family: "Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif;
}
 
/* -------------------------------------- */
/* Conteneur global */
div#global {
width: 1000px;
margin: 0px auto 20px;
 
/*--------------------------------------
background:#ffffff;
 
box-shadow:0 0 3px 2px rgba(0,0,0,0.2);
 
--------------------------------------*/
 padding:10px;
}
 
/* Entête */
header#header {
background: #333333 url(images/header.png) no-repeat center;
width: 100%;
margin: auto;
height: 229px;
}
 
div#top-header {
margin-left:400px;
}
 
div#top-header form { margin-left: auto; }
 
div#sub-header { min-height: 25px;}
 
div#site-infos {
position:absolute;
top:-5000px;
display: flex;
display: -webkit-flex;
display: -ms-flex;
max-width: 940px;
margin: 20px 20px 0px 20px;
}
 
div#site-logo {
margin-right: 20px;
background: url('images/logo.png') no-repeat;
width: 90px;
}
 
div#site-name-container {
margin-top: 10px;
flex: 1;
-webkit-flex: 1;
-ms-flex: auto;
height: 108px;
overflow: hidden;
}
 
a#site-name {
color: #F9FCFF;
font-size: 50px;
font-weight: bold;
line-height: 1em;
text-shadow: 0px 0px 0 rgb(0,0,0), 1px 0px 0 rgb(-255,-255,-255), 2px 0px 1px rgba(0,0,0,0.1), 2px 0px 1px rgba(0,0,0,0.2), 0px 0px 1px rgba(0,0,0,.1);
letter-spacing: 1.1pt;
text-decoration: none;
white-space: nowrap;
}
 
span#site-slogan {
display: block;
color: #FFFFFF;
font-size: 12px;
padding-left: 4px;
letter-spacing: 1.5pt;
}
 
/* Compteur de visites */
div#compteur {
color: #E9ECD9;
position: absolute;
top: 50px;
right: 0px;
font-size: 11px;
margin-right: 15px;
text-align: right;
}
 
/* Menu gauche */
aside#menu-left {
float: left;
width: 200px;
margin-right: 5px;
}
 
/* Menu droit */
aside#menu-right {
float: right;
width: 200px;
margin-left: 5px;
}
 
/* Taille du conteneur de page en fonction des menus droite et gauche */
aside#menu-left + div#main { float:left; width:775px; }
aside#menu-right + div#main { float:left; width:775px; }
aside#menu-left + aside#menu-right + div#main { float:left; width:570px; }
 
/* Contenu de la page */
div#main { width:auto; }
 
/* Contenu central */
div#main-content {
padding: 20px 10px;
background: #121212;
border-radius:12px
}
 
/* Barre d'outils */
#actions-links-menu { float:right; margin: 0 5px 5px 5px; }
 
/* Barre de lien rapide */
nav#breadcrumb { text-indent: 10px; margin: 0px 0px 20px 10px; }
nav#breadcrumb ol { list-style: none; margin: 0; }
nav#breadcrumb ol li { display: inline; }
nav#breadcrumb ol li:not(.current):after { content: '/'; color: #616161; } /* Séparateur de lien */
 
/* Emplacement au dessus et en dessous du contenu de la page */
div#top-content { margin: 0px auto; }
div#bottom-content { margin: 8px 0; }
 
/* Bloc au dessus du pied de page */
div#top-footer { clear: both; padding: 5px 0px; }
 
/* Pied de page */
 
footer#footer a{ color:#666666;}
 
footer#footer {
background-color:#333333;
/*bottom: 0px;
position: absolute;*/
clear: both;
width: 100%;
height:220xp; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
}
 
footer#footer .footer-content {
margin: 20px auto 0 auto;
width: 1000px;
padding-bottom: 20px;
border-bottom: 2px groove #444444;
}
 
footer#footer .footer-infos {
margin-left:450px;
min-height: 40px;
padding-top: 10px;
}
 
footer#footer .footer-infos span { color: #FFFFFF; font-size: 10px; }
 
 
/* horinaja default */
.horinaja ul{position:relative;}
.horinaja ul li{background:transparent;display:block;top:0;}
/* horinaja pagination */
ol.horinaja_pagination{height:40px;margin: 0 auto;position:relative;background:transparent;padding:5px 0 0 0;clear:both;}
ol.horinaja_pagination li{float:left;height:40px;display:block;}
ol.horinaja_pagination li a{height:30px;display:block;background:transparent;float:left;color:white;font-weight:bold;text-align:center;
font-size:12px;padding: 10px 0 0 0;cursor:pointer;}

il y a bien un

div#top-header {
margin-left:390px;
}

mais si je met par exemple 390px il devient centré sous chrome mais plus sous firefox et ie

Édité par souka Le 03/07/2015 à 17h05

souka Membre non connecté

Booster Minigun

Le 10/07/2015 à 15h41

#145104

Bonjour,

en faite j'ai bien un problème de css que je n'arrive pas a régler

si j'utilise l'outil développement de firefox ( vue adaptative voila ce que cela fait )

je voudrais que mon menu horizontal reste aligné sur le reste du site même pour les petites résolutions un peut comme phpboost.fr lorsque l'on zoom le menu reste dans l'axe

merci d'avance si vous avez une idée

le lien du site

www.scnrugby.fr il est encore en maintenance

taille 1920

100

taille 1280

1280

taille 800

800

voici mes css

Global.css

Code CSS :

/* --------------------------------------
        global.css
 Contient les classes globales au site, peuvent etre utilisees partout.
--------------------------------------*/ 
 
 
/* La mise en forme du texte
-------------------------------------------*/
 
        /* --- Les liens du site --- */
 
 
.bgtitre{
background-image:url(images/bgtitre.png);
 
}        
 
 
 
 
 
 
 
 
 
a {
    color: #ff0000;
    text-decoration: none;
}
 
a:hover {
    transition: color 0.4s ease-in 0s;
    color: #ffffff;
    text-decoration: underline;
}
 
        /* --- Les liens des utilisateurs --- */
a.admin { color: #00ff00; }
a.modo { color: #0055ff; }
a.member { color: #ff0000; }
 
hr {background:#666666;}
        /* --- Les differentes tailles de polices --- */
.smaller { font-size: 10px; }
.small { font-size: 12px; }
.big { font-size: 16px; }
.bigger { font-size: 18px; }
.biggest { font-size: 20px; }
 
        /* --- Les titres (balise h) --- */
h1 { font-size: 21px; }
h2 { font-size: 19px; }
h3 { font-size: 18px; }
h4 { font-size: 17px; }
h5 { font-size: 16px; }
h6 { font-size: 15px; }
 
/* --- Les Titres bbcode --- */
.formatter-title { display: inline; }
h3.formatter-title, h4.formatter-title { border-bottom: 1px solid #ff0000; }
 
/* Titre 1 */
h1.formatter-title { color:#666666; }
/* Titre 2 */
h2.formatter-title { margin-left: 20px; color:#999999; }
/* Sous titre 1 */
h3.formatter-title { margin-left: 40px; color:#cccccc; }
/* Sous titre 2 */
h4.formatter-title { margin-left: 60px; }
 
/* --- Les liens vers wikipedia --- */
a.wikipedia-link:before {
    content: url('../../default/images/wikipedia_icon.png');
    vertical-align: middle;
    padding-right: 2px;
}
 
a.wikipedia-link { border-bottom: 1px dotted; }
 
 
/* -- Mise en forme du contenu --
--------------------------------------*/
 
/* --- Affichage du mini calendrier --- */
.calendar-block {
    position: absolute;
    border: 1px solid #999999;
    bottom: 0;
    left: 100px;
    z-index: 100;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
 
.calendar-block .date-picker {
    margin: 0px;
    width: 172px;
    table-layout: fixed;
}
 
.calendar-block .date-picker select {
    border: none;
    font-size: 10px;
    padding: 3px 0px;
}
 
.calendar-block .date-picker select,
.calendar-block .date-picker select:focus { 
    box-shadow: none;
    max-width: 75px;
}
 
.calendar-block .date-picker th {
    padding: 1px 0px;
    background: #FFFFFF;
}
 
.calendar-block .date-picker th a { color: #666666; }
.calendar-block .date-picker tbody tr {
    text-align: center;
    padding: 0px;
}
.calendar-block .date-picker td {
    height: 23px;
    padding: 1px 2px;
}
 
.calendar-block .date-picker tbody tr:first-child { font-weight: bold; }
.calendar-block .date-picker tbody tr:last-child { border-bottom: none; }
 
.calendar-block .date-picker tbody tr:first-child td { border-top: 1px solid #999999; }
.calendar-block .date-picker tbody tr td:first-child { border-left: none; }
.calendar-block .date-picker tbody tr td:last-child { border-right: none; }
 
.calendar-block .date-picker tbody tr td.calendar-none { background: #FFFFFF; }
.calendar-block .date-picker tbody tr td.calendar-today { background: #B5E5B9; }
.calendar-block .date-picker tbody tr td.calendar-event { background: #DBE5EE; }
.calendar-block .date-picker tbody tr td.calendar-weekend { background: #FFE3B6; }
 
/* --- les blocs bbcode --- */
.bbcode-block {
    position: absolute;
    text-align: center;
    padding: 6px 4px;
    bottom: 2px; 
    z-index: 100;
    background: #F3F3F3;
    border-radius: 3px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid #AAAAAA;
}
 
.bbcode-block a {
    cursor: pointer;
    text-decoration: none;
}
 
/* --- Le selecteur de couleur --- */
.color-picker {
    position: absolute;
    z-index: 100;
}
 
.color-picker .bbcode-block { left: 80px; }
 
.color-picker .bbcode-block table {
    border-collapse: collapse;
    margin: auto;
    border: none;
}
 
.color-picker td {
    padding: 0px;
    border: 1px solid #F3F3F3;
}
 
.color-picker td a {
    display: block;
    width: 14px;
    height: 14px;
}
 
/* --- les blocs de quote, de code ou caches --- */
.formatter-blockquote, .formatter-code, .formatter-hide {
    display: block;
    width: 93%;
    padding: 2px 0px;
    font-weight: bold;
    margin: auto;
}
.blockquote, .code, .hide {
    overflow: auto;
    max-height: 500px;
    border: 1px solid #bfbfbf;
    border-radius: 3px;
    color: #efefef;
    padding: 8px;
    margin: 0px 25px;
}
 
.blockquote{
    color:#efefef;
    position:relative;
    padding-left: 20px;
    background:none;
}
 
.blockquote:before {
    position: absolute;
    display: block;
    left: 3px;
    top: 10px;
    margin-top: -5px;
    font-family: FontAwesome;
    content: "F10e";
    font-size: 11px;
    font-weight: 300;
}
 
.code{
    color:#666666;
    padding-left: 20px;
    background: rgba(255,255,255,0.8);
    background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%, rgba(56, 56, 56, 0.18) 100%);
}
 
.hide {
    cursor: pointer;
    height: 10px; 
    overflow: hidden;
}
 
.hide2 { 
    visibility: hidden;
    overflow: auto;
}
 
/* --- les autres element bbcode --- */
.indent { margin-left: 30px; }
 
.formatter-acronym { cursor: help; }
 
.formatter-block {
    margin: 5px 20px; 
    padding: 5px; 
    border: 1px solid #efefef;
    display: block;
    overflow: hidden;
}
 
.formatter-fieldset { margin: 10px; padding:5px; border: 1px solid #ff0000; }
 
.formatter-ul { text-align: left; }
 
/* --- les listes numerotees --- */
.code ol { margin-left: 3em; }
 
/* --- La recherche de membre (AJAX) --- */
.xmlhttprequest-result-search {
    overflow: auto;
    min-height: 40px;
    width: 100px;
    overflow: auto;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;  
    padding: 2px;
    margin: 2px 0px 0px 0px;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01);
}
 
/* --- La barre de progression --- */
.progressbar-container {
    background: #F5F5F5;
    margin: 4px 0px 10px;
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
}
.progressbar-container .progressbar-infos {
    line-height: 13px;
    font-size: 11px;
    text-align: center;
    width: 100%;
    position: absolute;
}
.progressbar {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.progressbar[style*="width: 100"] {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;    
}
 
.progressbar-container .progressbar {
    height: 13px;
    background-color: #8ECF67;
    transition: width .6s ease;
}
 
/* --- Le systeme de notation --- */
.notation,
.static-notation { display: inline-block; }
 
.notation .star,
.static-notation .star { 
    color: #E3CF7A; 
    font-size: 14px; 
    padding-right: 5px; 
    text-decoration: none;
}
 
 
/* -- Les Icones specifiques PHPBoost de FontAwesome --
-------------------------------------------*/
 
.fa-syndication:before { color: #ffffff; }
.fa-success:before { color: #478948; }
.fa-forbidden:before { color: #BA4B49; }
.fa-error:before { color: #BA4B49; }
.fa-warning:before { color: #C19954; }
.fa-ban:before { color: #BA4B49; }
.fa-unban:before { color: #478948; }
.fa-male:before { color: #8DC3E9; }
.fa-female:before { color: #F49CC4; }
.fa-online:before { color: #52D132; }
.fa-offline:before { color: #E05759; }
 
li.small-block .fa-stack { height: 2.34em; }
 
.fa-circle-alert {
    z-index: 1;
    position: absolute;
    top: -3px;
    left: 20px;
    font-size: 1.32em;
}
 
.fa-circle-alert span {
    display: block;
    position: absolute;
    top: 4px;
    width: 100%;
    margin: 0 auto;
    color: white;
    font-size: 0.7em;
    text-align: center;
}
 
 
/* -- Les differents menus --
--------------------------------------*/
 
.dynamic-menu { 
position: relative;
width:100%;
 
}
 
/* --- Niveau 1 --- */
.dynamic-menu ul {
border-right-color: #000;
border-left-color: #3C3C3C;
    margin: 0;
    padding: 0;
    border: none;
    list-style-type: none;
    z-index: 0;
}
 
.dynamic-menu > ul > li {
 
    position: relative;
    display: inline-block !important;
}
 
.dynamic-menu li a,
.dynamic-menu li span {
    text-decoration: none;
    display: block;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 13px;
    color:#999999;
 
}
 
.dynamic-menu li a:hover {
    color:#efefef;
    transition: color 0.3s ease-out 0s;
 
}
 
.dynamic-menu li span:hover {
    color:#000000;
    transition: color 0.3s ease-out 0s;
    background-color:#FF0000;
}
 
.dynamic-menu > ul > li:hover { color:#efefef;
}
 
.dynamic-menu > ul > li > a,
.dynamic-menu > ul > li > a:hover {
    text-decoration: none;
    font-weight: 300;
}
 
/* --- Niveau 2 --- */
.dynamic-menu li ul {
    position: absolute;
    top: -99999em;
    opacity: 0;
    margin: 0 !important;
    transition: opacity .2s ease-in-out,top 0 ease-in 0s;
 
    color: #666666;
    font-size: 11px;
    background: #232323;
    border:1px solid #ff0000;
        z-index: 102;
}
 
.dynamic-menu li:hover > ul {
    opacity: 1;
    top: 100%;
    transition: opacity .2s ease-in-out, top 0s ease-in 0s;
}
 
.dynamic-menu li li {
    clear: both;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    text-align: left;
    position: relative;
}
 
.dynamic-menu li li a,
.dynamic-menu li li span {
    font-size: 12px;
    display: block;
    text-decoration: none;
    padding: 5px 15px;
    outline: none;
    color:#999999;
}
 
.dynamic-menu li li a:hover {
background-color:#FF0000;
    cursor: pointer;
    text-decoration: none;
    color:#ffffff;
},
.dynamic-menu li li span:hover {
    color:#ff0000;
    transition: color 0.3s ease-out 0s;
}
 
.dynamic-menu ul li.extend > a,
.dynamic-menu ul li.extend > span { padding-right: 18px; }
 
.dynamic-menu ul li.extend > a:after,
.dynamic-menu ul li.extend > span:after {
    position: absolute;
    display: block;
    right: 7px;
    top: 50%;
    margin-top: -5px;
    font-family: FontAwesome;
    content: "F0DA";
    font-size: 11px;
    font-weight: 300;
}
 
.dynamic-menu a img,
.dynamic-menu span img {
    max-width: none;
    padding-right: 6px;
    vertical-align: -4px;
}
 
/* --- Niveau 3 --- */
.dynamic-menu li li ul {
    left: 100%;
    z-index: 101;
}
 
.dynamic-menu li li:hover > ul { top: -1px; }
 
/* --- Menus groupes --- */
.dynamic-menu.group > ul {
    font-size: 0;
}
 
.dynamic-menu.group > ul > li {
    border-radius: 0;
    border-right: 1px solid #F9F9F9;
    border-left: 1px solid #BBBBBB;
}
 
.dynamic-menu.group > ul > li:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-left: 1px solid rgba(0, 0, 0, 0.1)
}
 
.dynamic-menu.group > ul > li:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-right: 1px solid rgba(0, 0, 0, 0.1)
}
 
/* --- Menus de navigation --- */
nav.dynamic-menu {
    margin: 0 auto 5px;
}
 
nav.dynamic-menu h5 {
    text-align: center;
    padding: 6px;
    font-weight: bold;
    font-size: 12px;
    color: #666666;
}
 
nav.dynamic-menu h5:hover {
    color: #efefef;
    background: #EAEDEE;
    cursor: default;
}
 
nav.dynamic-menu li ul { min-width: 160px; }
 
 
/* --- Menus des modules --- */
menu.dynamic-menu { margin: 5px; }
 
menu.dynamic-menu ul li ul {
    margin-left: 0 !important;
    margin-top: 1px !important;
}
 
menu.dynamic-menu > ul > li {
    position: relative;
    display: inline-block !important;
    display: inline;
    padding: 0;
    color: #666666;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, rgba(56,56,56,0.18) 100%);
    background-color: #FFFFFF;
    border: 1px solid #999999;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-bottom-color: #B3B3B3;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}
 
menu.dynamic-menu > ul > li:hover { background-color: #EEEEEE; }
 
menu.dynamic-menu > ul > li.current {
    background-image: linear-gradient(to top,  rgba(255,255,255,0.18) 0%, rgba(56,56,56,0.18) 100%);
    background-color: #F0F0F0;
    border-top-color: #B3B3B3;
}
 
menu.dynamic-menu > ul > li > a { padding: 4px 12px; color:#121212; }
menu.dynamic-menu > ul > li > a > i { font-size: 1.1em; }
 
menu.dynamic-menu li li:hover > ul { top: -7px; }
 
menu.dynamic-menu li ul li a, menu.dynamic-menu li ul li span {
    color: #666666;
    font-size: 11px;
    padding: 3px 12px;
}
 
menu.dynamic-menu li ul li a i,
menu.dynamic-menu li ul li span i {
    font-size: 14px;
    vertical-align: -2px;
    width: 16px;
    display: inline-block;
    margin-right: 4px;
    text-align: center;
}
 
menu.dynamic-menu li ul li a i:before,
menu.dynamic-menu li ul li span i:before {
    display: block;
    width: 16px;
}
 
menu.dynamic-menu ul li.extend > a:after,
menu.dynamic-menu ul li.extend > span:after { margin-top: -6px; }
 
/* --- Menu de droite --- */
.dynamic-menu.right ul {
    right: -1px;
    left: auto;
}
 
.dynamic-menu.right li li ul {
    right: 100%;
    left: auto;
}
 
/* --- Separateur --- */
.dynamic-menu ul li.separator {
    background: #E8EDF3;
    height: 1px;
}
 
.dynamic-menu.right ul li.extend > a:before,
.dynamic-menu.right ul li.extend > span:before {
    position: absolute;
    display: block;
    left: 5px;
    top: 50%;
    margin-top: -5px;
    font-family: FontAwesome;
    content: "F0D9";
    font-size: 11px;
    font-weight: 300;
}
 
.dynamic-menu.right ul li.extend > a:after,
.dynamic-menu.right ul > span:after {
    content: "";
}
 
/* --- Menu Vertical - Scrolling ---*/
 
ul.vertical-scrolling-menu li { width:100%; }
 
ul.vertical-scrolling-menu h5:after{
    position: absolute;
    display: block;
    right: 50%;
    top: 75%;
    margin-top: -5px;
    font-family: FontAwesome;
    content: "F0DD";
    font-size: 11px;
    font-weight: 300;
}
 
aside#menu-right ul.vertical-scrolling-menu h5:before{
    position: absolute;
    display: block;
    left: 5px;
    top: 50%;
    margin-top: -5px;
    font-family: FontAwesome;
    content: "F0D9";
    font-size: 11px;
    font-weight: 300;
}
aside#menu-right ul.vertical-scrolling-menu h5:after{
    content: "";
}
aside#menu-left ul.vertical-scrolling-menu h5:after{
    content: "f0da";
    right: 5px;
    top: 50%;
}
 
ul.vertical-scrolling-menu h5{
    background:#121212;
    border-radius:6px;
    color:#999999;
}
 
ul.vertical-scrolling-menu h5:hover{
    background:#121212;
    color:#ffffff;
}
aside#menu-left ul.vertical-scrolling-menu li:hover > ul,
aside#menu-right ul.vertical-scrolling-menu li:hover > ul {
    border-radius:6px;
    border:1px solid #ff0000;
}
 
aside#menu-left ul.vertical-scrolling-menu li:hover > ul { left:100%; top:-6px;}
aside#menu-right ul.vertical-scrolling-menu li:hover > ul { right:100%; top:-6px; }
 
aside#menu-right ul.vertical-scrolling-menu li li ul { left:auto;}
 
ul.vertical-scrolling-menu li.first-level { padding-left: 20px; }
 
aside#menu-right ul.vertical-scrolling-menu li.extend > a:before,
aside#menu-right ul.vertical-scrolling-menu li.extend > span:before {
    position: absolute;
    display: block;
    left: 5px;
    top: 50%;
    margin-top: -5px;
    font-family: FontAwesome;
    content: "F0D9";
    font-size: 11px;
    font-weight: 300;
}
 
aside#menu-right ul.vertical-scrolling-menu li.extend > a:after,
aside#menu-right ul.vertical-scrolling-menu li.extend > span:after {
    content: "";
}
 
/* --- Menu Horizontal - Scrolling --- */
 
ul.horizontal-scrolling-menu {
 
 
width:100%;
margin-top:-25px;
margin-left:2px;
display:table;
background:#000;
padding:0 0px;
background-color: #333333;
}
 
ul.horizontal-scrolling-menu li {
 
    display: block;
    padding: 0;
 
}
.separation{
margin-left:210px;
margin-top:-95px; 
 
 
}
 
.separation2{
margin-left:240px;
margin-top:-130px; 
 
 
}
 
.separation3{
margin-left:365px;
margin-top:-125px; 
 
 
}
.fbfooter{
 
margin-left:405px;
margin-top:-130px; 
 
}
.footertitre{
font-size:18px;
text-align:left;
margin-left:490px;
}
 
.adresse{
font-size:12px;
margin-left:490px;
 
}
ul li.first-level-extend > a:after,
ul li.first-level-extend > span:after {
 
 
    position: absolute;
    display: block;
    right: 0;
    top: 45%;
    margin-top: -5px;
    font-family: FontAwesome;
    content: "F0DD";
    font-size: 11px;
    font-weight: 300;
}
 
/*ul.horizontal-scrolling-menu > li:hover:last-child > ul {
    right:0;
}
 
ul.horizontal-scrolling-menu > li:last-child li:hover ul {
    left:auto;
    right:100%;
}*/
 
        /* --- Menu Horizontal - Scrolling aside#left --- */
 
aside#menu-left ul.horizontal-scrolling-menu > li:hover:last-child > ul,
aside#menu-left ul.horizontal-scrolling-menu > li:hover > ul,
aside#menu-left ul.horizontal-scrolling-menu > li:last-child li:hover ul {
    right:auto;
    left:100%;
    top:-6px;
}
 
aside#menu-left ul li.first-level-extend > a:after,
aside#menu-left ul li.first-level-extend > span:after {
    position: absolute;
    display: block;
    right: 5px;
    top: 50%;
    margin-top: -5px;
    font-family: FontAwesome;
    content: "F0DA";
    font-size: 11px;
    font-weight: 300;
}
 
aside#menu-left ul.horizontal-scrolling-menu > li {
    width:100%;
    text-align:right;
    padding-right:5px;
}
 
        /* --- Menu Horizontal - Scrolling aside#right --- */
 
aside#menu-right ul.horizontal-scrolling-menu > li:hover:last-child > ul,
aside#menu-right ul.horizontal-scrolling-menu > li:hover > ul,
aside#menu-right ul.horizontal-scrolling-menu > li:last-child li:hover ul,
aside#menu-right ul.horizontal-scrolling-menu > li li ul{
    left:auto;
    right:100%;
    top:-6px;
}
 
aside#menu-right ul.horizontal-scrolling-menu > li {
    width:100%;
}
 
aside#menu-right ul li.first-level-extend > a:before,
aside#menu-right ul li.first-level-extend > span:before {
    position: absolute;
    display: block;
    left: 5px;
    top: 50%;
    margin-top: -5px;
    font-family: FontAwesome;
    content: "F0D9";
    font-size: 11px;
    font-weight: 300;
}
 
aside#menu-right ul li.first-level-extend > a:after,
aside#menu-right ul li.first-level-extend > span:after {
    content: "";
}
 
 
/* --- Menu Horizontal --- */
nav.menu-horizontal {
    padding:5px;
    background:#121212;
    border-radius:6px;
}
 
nav.menu-horizontal ul {
    display:table;
    margin:auto;
}
 
nav.menu-horizontal ul li { display: inline;}
 
nav.menu-horizontal ul li a{padding:5px;}
 
nav.menu-horizontal ul li:hover a{ color:#efefef}
 
nav.menu-horizontal ul img { margin-right: 5px; }
 
/* --- Menu Vertical --- */
h3.menu-vertical-0 {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    margin-top: -2px;
    padding-bottom: 2px;
}
 
ul.menu-vertical a,
ul.menu-vertical span { color: #666666; }
 
ul.menu-vertical {
    text-align: left;
    margin: 0 !important;
}
 
ul.menu-vertical h3 {
    font-size:15px;
}
 
ul.menu-vertical ul h3 {
    font-size:13px;
}
 
ul.menu-vertical ul {
    text-indent:10px;
}
 
ul.menu-vertical ul ul{
    text-indent:20px;
}
 
ul.menu-vertical li { list-style-type: none; }
 
ul.menu-vertical img { margin-right: 5px; }
 
ul.menu-vertical li a,
ul.menu-vertical li span {
    padding:2px 10px;
    display:block;
    list-style-type: none;
    color:#999999;
}
 
ul.menu-vertical li a:hover{ color:#efefef;}
ul.menu-vertical li span:hover {color:#ff0000;}
 
ul.menu-vertical-0 li a,ul.menu-vertical-0 li span { color: #999999; }
 
ul.menu-vertical-1 li a,ul.menu-vertical-1 li span { color: #cccccc; }
 
ul.menu-vertical-2 li a,ul.menu-vertical-2 li span {
    color: #cccccc;
    font-style: italic;
}
 
ul.menu-vertical-3 li { font-style: normal; }
 
ul.menu-vertical-3 li a,ul.menu-vertical-3 li span {
    color: #778899;
    font-size: 80%;
}
 
/* --- menu de flux --- */
.feed-list {
    list-style-type: none;
    text-align: left;
    margin: 5px 0px;
}
 
.feed-list li{
    margin-bottom:4px;
    position:relative;
    padding-bottom:5px;
}
 
.feed-list li a{
    padding:2px 4px;
    margin-bottom:13px;
}
 
.feed-list li p{
    text-align:center;
    background:rgba(0,0,0,0.6);
    color:#f0f0f0;
    position:absolute;
    bottom:0;
    margin:0;
    width:100%;
}
 
 
/* -- Les message d erreurs --
--------------------------------------*/
 
div.message-helper-small { width: 50% }
 
.error, .notice, .warning, .success, .question { 
    height: auto;
    padding: 10px 10px 10px 40px;
    margin: 5px auto 15px auto;
    line-height: 20px;
    border: 1px dotted #FFFFFF;
    border-radius: 4px;
    position: relative;
    display: block;
    text-align: left;
}
 
.error:before, .notice:before, .warning:before, .success:before, .question:before {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 2em;
    position: absolute;
    left: 6px;
    top: 7px;
    width: 28px;
    text-align: center;
}
 
.error:before { content: "f00d"; }
.error, .error:before { color: #BA4B49; }
.notice:before { content: "f12a"; }
.notice, .notice:before { color: #888888; }
.warning:before { content: "f071"; }
.warning, .warning:before { color: #C19954; }
.success:before { content: "f00c"; }
.success, .success:before { color: #478948; }
.question:before { content: "f128"; }
.question, .question:before { color: #3B88AE; }
 
.question { border-color: #3B88AE; }
.notice { border-color: #888888; }        
.warning { border-color: #C19954; }
.error { border-color: #BA4B49; }
.success { border-color: #478948; }
 
 
/* -- Le maintenance --
--------------------------------------*/
 
div#message-maintain {
    position: absolute;
    left:40%;
    top: 40px;
    opacity: 0.98;
    text-align: center;
}
 
div#message-maintain > div { 
    margin: 0px auto;
    background: #000000;
    width: 310px;
}
 
div#release { margin-top: 20px; }
 
/* -- Systeme d Upload --
--------------------------------------*/
.upload-address-bar {
    background: #FAFAFA;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    color: #444444;
    margin: 0px 25px; 
    padding: 6px;
}
 
.upload-address-bar-links {
    float: right;
    margin: 0 25px 25px 25px;
}
 
.upload-address-bar-links a { margin-left: 10px; }
 
#empty-folder { width: 70%; }
 
.upload-elements-container { margin: 0 0 0 20px; }
 
.upload-elements-file,
.upload-elements-repertory { 
    float: left; 
    margin: 10px;
}
 
.upload-elements-repertory { height: 60px; }
 
/* --- Deplacement des fichiers --- */
.upload-selected-cat {
    background: #F5FBFF;
    border: 1px solid #2C5169;
}

design.css

Code CSS :

.bgtitre{
background-image:url(images/bgtitre.png);
 
}
 
.bg-annonce{
background-color: #202020;
 
}
.titre-annonce{
 
color:#FFFFFF;
}
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }
 
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }
 
.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }
 
.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
 
 
 
 
 
 
 
 
p,h3,h4,pre {
  text-align: left;
  max-width: 540px;
  margin: 0 auto 20px;
  }
 
.rslides {
  margin: 0 auto 40px;
  }
 
#slider2,
#slider3 {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  margin: 0 auto;
  }
 
.rslides_tabs {
  list-style: none;
  padding: 0;
 
  -moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  font-size: 18px;
  list-style: none;
  margin: 0 10 50px;
  max-width: 200px;
  padding: 0px 0;
 
  width: 50%;
  }
 
.rslides_tabs li {
  display: inline;
  float: none;
  margin-right: 1px;
  }
 
.rslides_tabs a {
  width: auto;
  line-height: 20px;
  padding: 9px 20px;
  height: auto;
  background: transparent;
  display: inline;
  }
 
.rslides_tabs li:first-child {
  margin-left: 0;
  }
 
.rslides_tabs .rslides_here a {
 
  }
 
a {
  color: #fff;
  text-decoration: none;
  }
 
#download {
  background: #333;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  display: block;
  font-size: 20px;
  font-weight: bold;
  margin: 60px auto;
  max-width: 500px;
  padding: 20px;
  }
 
#download:hover {
  background: rgba(255,255,255,.15);
  }
 
.footer {
  font-size: 11px;
  }
 
/* Callback example */
 
h3 {
  font: 20px/30px "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  color: #fff;
  }
 
.events {
  list-style: none;
  }
 
.callbacks_container {
  margin-bottom: 50px;
  position: relative;
  float: left;
  width: 100%;
  }
 
.callbacks {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }
 
.callbacks li {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  }
 
.callbacks img {
  display: block;
  position: relative;
  z-index: 1;
  height: auto;
  width: 100%;
  border: 0;
  }
 
.callbacks .caption {
  display: block;
  position: absolute;
  z-index: 2;
  font-size: 20px;
  text-shadow: none;
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .8);
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 20px;
  margin: 0;
  max-width: none;
  }
 
.callbacks_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 52%;
  left: 0;
  opacity: 0.7;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  background: transparent url("themes/themes.gif") no-repeat left top;
  margin-top: -45px;
  }
 
.callbacks_nav:active {
  opacity: 1.0;
  }
 
.callbacks_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
  }
 
#slider3-pager a {
  display: inline-block;
}
 
#slider3-pager img {
  float: left;
}
 
#slider3-pager .rslides_here a {
  background: transparent;
  box-shadow: 0 0 0 2px #666;
}
 
#slider3-pager a {
  padding: 0;
}
 
@media screen and (max-width: 600px) {
  h1 {
    font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
  .callbacks_nav {
    top: 47%;
    }
  }
 
 
 
 
 
 
 
 
 
 
/*--------------------------------------
        design.css
Contient les conteneurs de mise en page.
Le design.css permet de mettre en forme votre site web avec le design de votre choix
--------------------------------------*/ 
body {
    /*position: relative;*/
    min-height: 100%;
    background: #ffffff url(images/global.png)  no-repeat fixed center top;
    color: #ffffff;
    font-size: 13px;
    font-family: "Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif;
}
 
/* -------------------------------------- */
/* Conteneur global */
div#global {
    width: 1000px;
    margin: 0px auto 20px;
 
    /*--------------------------------------
    background:#ffffff;
 
    box-shadow:0 0 3px 2px rgba(0,0,0,0.2);
 
    --------------------------------------*/
     padding:10px;
}
 
/* Entête */
header#header {
    background: #333333 url(images/header.png) no-repeat center;
    width: 2000px;
    margin: auto;
    height: 235px;
}
 
div#top-header {
margin-left:450px;
float:left;
 
 
/*    display: flex;
    display: -webkit-flex;
    display: -ms-flex;*/
}
 
div#top-header form { margin-left: auto; }
 
div#sub-header { min-height: 25px;}
 
div#site-infos {
    position:absolute;
    top:-5000px;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    max-width: 940px;
    margin: 20px 20px 0px 20px;
}
 
div#site-logo {
    margin-right: 20px;
    background: url('images/logo.png') no-repeat;
    width: 90px;
}
 
div#site-name-container {
    margin-top: 10px;
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: auto;
    height: 108px;
    overflow: hidden;
}
 
a#site-name {
    color: #F9FCFF;
    font-size: 50px;
    font-weight: bold;
    line-height: 1em;
    text-shadow: 0px 0px 0 rgb(0,0,0), 1px 0px 0 rgb(-255,-255,-255), 2px 0px 1px rgba(0,0,0,0.1), 2px 0px 1px rgba(0,0,0,0.2), 0px 0px 1px rgba(0,0,0,.1);
    letter-spacing: 1.1pt;
    text-decoration: none;
    white-space: nowrap;
}
 
span#site-slogan {
    display: block;
    color: #FFFFFF;
    font-size: 12px;
    padding-left: 4px;
    letter-spacing: 1.5pt;
}
 
/* Compteur de visites */
div#compteur {
    color: #E9ECD9;
    position: absolute;
    top: 50px;
    right: 0px;
    font-size: 11px;
    margin-right: 15px;
    text-align: right;
}
 
/* Menu gauche */
aside#menu-left {
    float: left;
    width: 200px;
    margin-right: 5px;
}
 
/* Menu droit */
aside#menu-right {
    float: right;
    width: 200px;
    margin-left: 5px;
}
 
/* Taille du conteneur de page en fonction des menus droite et gauche */
aside#menu-left + div#main { float:left; width:775px; }
aside#menu-right + div#main { float:left; width:775px; }
aside#menu-left + aside#menu-right + div#main { float:left; width:570px; }
 
/* Contenu de la page */
div#main { width:auto; }
 
/* Contenu central */
div#main-content {
    padding: 20px 10px;
    background: #121212;
    border-radius:12px
}
 
/* Barre d'outils */
#actions-links-menu { float:right; margin: 0 5px 5px 5px; }
 
/* Barre de lien rapide */
nav#breadcrumb { text-indent: 10px; margin: 0px 0px 20px 10px; }
nav#breadcrumb ol { list-style: none; margin: 0; }
nav#breadcrumb ol li { display: inline; }
nav#breadcrumb ol li:not(.current):after { content: '/'; color: #616161; } /* Séparateur de lien */
 
/* Emplacement au dessus et en dessous du contenu de la page */
div#top-content { margin: 0px auto; }
div#bottom-content { margin: 8px 0; }
 
/* Bloc au dessus du pied de page */
div#top-footer { clear: both; padding: 5px 0px; }
 
/* Pied de page */
 
footer#footer a{ color:#666666;}
 
footer#footer {
background-color:#333333;
    /*bottom: 0px;
    position: absolute;*/
    clear: both;
    width: 100%;
    height:220xp; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
}
 
footer#footer .footer-content {
    margin: 20px auto 0 auto;
    width: 1000px;
    padding-bottom: 20px;
    border-bottom: 2px groove #444444;
}
 
footer#footer .footer-infos {
margin-left:450px;
    min-height: 40px;
    padding-top: 10px;
}
 
footer#footer .footer-infos span { color: #FFFFFF; font-size: 10px; }
 
 
/* horinaja default */
.horinaja ul{position:relative;}
.horinaja ul li{background:transparent;display:block;top:0;}
/* horinaja pagination */
ol.horinaja_pagination{height:40px;margin: 0 auto;position:relative;background:transparent;padding:5px 0 0 0;clear:both;}
ol.horinaja_pagination li{float:left;height:40px;display:block;}
ol.horinaja_pagination li a{height:30px;display:block;background:transparent;float:left;color:white;font-weight:bold;text-align:center;
font-size:12px;padding: 10px 0 0 0;cursor:pointer;}

merci

Édité par souka Le 10/07/2015 à 15h42

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie

souka Membre non connecté

janus57 Membre non connecté

souka Membre non connecté

janus57 Membre non connecté

souka Membre non connecté

souka Membre non connecté