Je reste persuadé qu'il s'agit d'un souci de "z-index"...
car j'en utilise dans mes css de base avec les id "site" et "ombre"...
Afin que vous puissiez tout avoir pour tenter de m'aider,
je vous mets ci-dessous le bout de code html :
<div id="dessous"></div>
<ul id="footer" class="footer_fullwidth" style="z-index:8000;">
<li id="social">
<ul>
<li><a href="https://twitter.com/MaisonCelinni" class="tooltip" target="_blank">
<img src='diamants/js/sf/images/icons/twitter.png' alt="twitter_celinni" class="footer_icon" /><span>Twitter</span></a></li>
<li><a href="https://www.facebook.com/celinni.diamant" class="tooltip" target="_blank">
<img src='diamants/js/sf/images/icons/facebook.png' alt="facebook_celinni" class="footer_icon" /><span>Facebook</span></a></li>
</ul>
</li>
<div style="float:right;">
<li><a href="#" class="col_1 picto1">Recevez votre bijou.<br>Payez-le plus tard !</a></li>
<li><a href="recherche-diamant.htm" class="col_1 picto2">Recherchez<br>votre diamant</a></li>
<li><a href="#" class="col_1 picto3">Composez<br>votre bijou</a>
<div class="footer_dropup drop1column">
<ul style="padding:0px 10px 0px 10px;">
<li style="padding-bottom:7px;"><a href="#">Composez votre bague</a></li>
<li style="padding-bottom:7px;"><a href="#">Composez votre pendentif</a></li>
<li style="padding-bottom:7px;"><a href="#">Composez votre bracelet</a></li>
<li style="padding-bottom:7px;"><a href="#">Composez vos boucles d'oreilles</a></li>
</ul>
</div>
</li>
<li><a href="diamant-investissement.htm" class="col_1 picto4">Investisseurs</a></li>
<li><a href="#" class="col_1 picto5">Prendre<br>un rendez-vous</a></li>
<li><a href="#" class="col_1 picto6">Pourquoi choisir<br>CELINNI Diamant</a></li>
<li><a href="maison-celinni.htm" class="col_1 picto7">La Maison<br>CELINNI Diamant</a></li>
</div>
</ul>
Aussi, quelques css importants :
#ombre {
position: absolute;
width: 1054px;
height: 1370px;
left: 50%;
margin-left: -527px;
margin-top: 10px;
z-index: 2;
-moz-box-shadow: #202020 6px 6px 12px;
-webkit-box-shadow: #202020 6px 6px 12px;
box-shadow: #202020 6px 6px 12px;
behavior: url(scripts/PIE.php);
}
#site {
width: 1054px;
height: 1364px;
z-index: 3;
}
#contenu {
height: 255px;
background-image: none;
}
#dessous {
height: 75px;
width: 1054px;
position: absolute;
top: 1385px;
left: 50%;
margin-left: -527px;
z-index: 0;
padding-bottom: 0px;
}
Et voici aussi, le css complet du "footer.css"
/*
Item Name : Sticky Footer
Author URI : http://codecanyon.net/user/Pixelworkshop
Item URI : http://codecanyon.net/item/sticky-footer/168476
Version : 2.0
*/
/*
TABLE OF CONTENTS
1. FOOTER GENERAL STYLING
2. DROP UP CONTAINERS
3. COLUMNS GRID
4. FOOTER TYPOGRAPHY
5. TRIGGER BUTTON
6. COLORED ELEMENTS
*/
/* _____________________________________________________________________________
1. FOOTER GENERAL STYLING
_____________________________________________________________________________ */
#footer {
position: fixed;
bottom: 0px;
height: 42px;
font-family:Arial,Helvetica,sans-serif;
padding:0;
}
.footer_fullwidth {
width: 100%;
margin:0;
}
.footer_fixedwidth {
margin:0 auto;
width: 1054px;
left:50%;
margin-left:-527px;
-moz-border-radius: 4px 4px 0px 0px;
-webkit-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
}
#footer li {
float:left;
list-style:none;
}
#footer li:hover,
#footer li.active {
}
#footer li:hover a {
color:#dddddd;
}
#footer li a {
color:#bbbbbb;
font-size:10px;
text-decoration:none;
padding:10px 0px 0px 53px;
line-height:12px;
display:block;
}
#footer li .dropup {
padding-right:40px;
height: 32px;
background:url("images/arrow.png") no-repeat right 15px;
}
#footer li .picto1 {
height: 32px;
background:url("images/picto01.png") no-repeat 0px 0px;
}
#footer li .picto2 {
height: 32px;
background:url("images/picto02.png") no-repeat 0px 0px;
}
#footer li .picto3 {
height: 32px;
background:url("images/picto03.png") no-repeat 0px 0px;
}
#footer li .picto4 {
padding-top: 16px;
height: 26px;
background:url("images/picto04.png") no-repeat 0px 0px;
}
#footer li .picto5 {
height: 32px;
background:url("images/picto05.png") no-repeat 0px 0px;
}
#footer li .picto6 {
height: 32px;
background:url("images/picto06.png") no-repeat 0px 0px;
}
#footer li .picto7 {
height: 32px;
background:url("images/picto07.png") no-repeat 0px 0px;
}
#footer li .footer_dropup {
position: absolute;
padding:7px 0px 0px 0px;
margin: 0 1px 0 1px;
left:-9999em;
bottom:42px; /* Equal height of the footer */
background-color:#333333;
border-bottom:none;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
}
#footer li:hover .footer_dropup {
left:auto;
}
#footer #footer_home a {
padding:3px 15px 0px 15px;
}
/* _____________________________________________________________________________
2. DROP UP CONTAINERS
_____________________________________________________________________________ */
#footer .drop1column {
width: 159px;
}
/* _____________________________________________________________________________
3. COLUMNS GRID
_____________________________________________________________________________ */
#footer .col_1 {
display:inline;
float: left;
position: relative;
margin-left: 0px;
margin-right: 0px;
}
#footer .col_1 {
width:106px;
}
.clear, .clear_push {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clear_push { /* Use this one to "clear" and add some space */
height: 12px;
}
/* _____________________________________________________________________________
4. FOOTER TYPOGRAPHY
_____________________________________________________________________________ */
#footer p, #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {
color:#FFFFFF;
text-shadow: 1px 1px 1px #000;
margin:0;
}
#footer p {
font-size:12px;
line-height:21px;
margin-bottom:18px;
}
#footer h1, #footer h2 {
padding-bottom:12px;
}
#footer h1, #footer h2, #footer h3 {
margin-bottom:18px;
}
#footer h4, #footer h5, #footer h6 {
margin-bottom:12px;
}
#footer h1 {
font-size:36px;
line-height:36px;
}
#footer h2 {
font-size:30px;
line-height:42px;
}
#footer h3 {
font-size:28px;
line-height:28px;
}
#footer h4 {
font-size:21px;
line-height:24px;
}
#footer h5 {
font-size:18px;
line-height:28px;
}
#footer h6 {
font-size:14px;
line-height:18px;
text-transform:uppercase;
}
#footer img {
border:none;
}
/* Separator */
#footer hr {
border-top:1px solid #000;
border-bottom:1px solid #222;
border-left:none;
border-right:none;
height: 0px;
margin-bottom:16px;
margin-top:0px;
}
/* Simple Lists */
#footer ul, #footer ol {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#footer ul li, #footer ol li {
font-size:10px;
line-height:12px;
position:relative;
padding:0;
margin:0;
float:none;
text-align:left;
border:none;
}
#footer li div.footer_dropup a, #footer ul li a, #footer ol li a {
padding:0;
margin:0;
display:inline;
line-height:12px;
}
#footer ul li:hover {
color:#ffffff;
}
/* Other Lists */
#footer ul.list, #footer ul.list2, #footer ol.num, #footer ol.num2 {
margin:0 0 18px 20px;
color:#ffffff;
font-size:12px;
}
#footer ul.list li, #footer ul.list2 li, #footer ol.num li, #footer ol.num2 li{
padding:0 0 0 12px;
line-height:24px;
border:none;
}
#footer .list li {
list-style:disc;
}
#footer .list2 li {
list-style:square;
}
#footer .num li {
list-style:decimal;
}
#footer .num2 li {
list-style:upper-latin;
}
#footer li div.footer_dropup ul.list li a,
#footer li div.footer_dropup ul.list2 li a,
#footer li div.footer_dropup ol.num li a,
#footer li div.footer_dropup ol.num2 li a {
color:#bbbbbb;
}
#footer li div.footer_dropup ul.list li a:hover,
#footer li div.footer_dropup ul.list2 li a:hover,
#footer li div.footer_dropup ol.num li a:hover,
#footer li div.footer_dropup ol.num2 li a:hover {
color:#dddddd;
}
#footer .black_box, #footer .black_box2 {
background-color:#0C0C0C;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:6px 8px 6px 8px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#footer .black_box {
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
/* Paragraphs with Icons */
#footer .calendar, #footer .note, #footer .help, #footer .delete, #footer .favorite, #footer .lock, #footer .archive, #footer .briefcase, #footer .search, #footer .user {
padding-left:36px;
margin-bottom:18px;
}
#footer .calendar {background:url("images/icons/calendar.png") no-repeat 0px 5px}
#footer .note {background:url("images/icons/note.png") no-repeat 0px 5px}
#footer .archive {background:url("images/icons/archive.png") no-repeat 0px 5px}
#footer .search {background:url("images/icons/search.png") no-repeat 0px 5px}
#footer .help {background:url("images/icons/help.png") no-repeat 0px 5px}
#footer .delete {background:url("images/icons/delete.png") no-repeat 0px 5px}
#footer .favorite {background:url("images/icons/favorite.png") no-repeat 0px 5px}
#footer .lock {background:url("images/icons/lock.png") no-repeat 0px 5px}
#footer .briefcase {background:url("images/icons/briefcase.png") no-repeat 0px 5px}
#footer .user {background:url("images/icons/user.png") no-repeat 0px 5px}
/* Image Shadow Effect */
#footer .imgshadow {
background:#000000;
padding:4px;
border:1px solid #222222;
margin-top:3px;
margin-bottom:18px;
-moz-box-shadow:0px 0px 5px #000000;
-webkit-box-shadow:0px 0px 5px #000000;
box-shadow:0px 0px 5px #000000;
}
/* Paragraphs with side images */
#footer .img_left {
float:left;
margin-right:12px;
}
#footer .img_right {
float:right;
margin-left:12px;
}
/* Paragraphs with borders */
#footer .dark, #footer .brown, #footer .yellow, #footer .red, #footer .blue, #footer .green {
padding-left:15px;
color:#cccccc;
margin-bottom:18px;
}
#footer .dark {border-left:#3B3B3B solid 7px}
#footer .brown {border-left:#8D8767 solid 7px}
#footer .yellow {border-left:#DBA742 solid 7px}
#footer .red {border-left:#C05D48 solid 7px}
#footer .blue {border-left:#52878B solid 7px}
#footer .green {border-left:#B0BD85 solid 7px}
/* Simple Tables */
#footer #table_dark {
width:100%;
padding:0;
margin:6px 0 18px 0;
font-size:12px;
border-spacing: 0px;
border-collapse: collapse;
}
#footer #table_dark th {
text-align:left;
padding:12px 9px 12px 9px;
font-weight:bold;
font-size:12px;
}
#footer #table_dark {
border:1px solid #000;
border-bottom:none;
}
#footer #table_dark th {
color:#FFF;
border-bottom:1px solid #000;
background:#0D0D0D;
}
#footer #table_dark td {
border-bottom:1px solid #000;
background:#0F0F0F;
padding:12px 9px 12px 9px;
color:#DDD;
}
/* Social Icons */
#footer li#social {
float:left; /* Positionning of the social icons container */
width:auto;
margin:0 0 0 15px;
padding:0;
border:none;
}
#footer li#social ul {
float:left; /* Positionning of the social icons container */
width:auto;
margin:8px 0;
}
#footer li#social:hover {
background:none;
}
#footer li#social li {
margin-right:10px; /* 12px is the space between each one of them */
float:left;
background:none;
border:none;
width:20px;
height:20px;
padding:0px;
}
/* Tooltips for social icons */
a.tooltip:hover {
text-decoration:none;
}
a.tooltip span { /* The "span" defines the text appearing on mouse hover, these are basic stylings */
display:none;
padding:0px 7px 5px 7px;
bottom:30px;
line-height:24px;
position:relative;
height:24px;
width:55px;
text-align:center;
background:url("images/tooltip.png") no-repeat center top;
position:absolute;
color:#dddddd;
font-size:12px;
margin-left:-24px;
}
a.tooltip:hover span {
display:block;
}
/* _____________________________________________________________________________
5. TRIGGER BUTTON
_____________________________________________________________________________ */
a#footer_trigger{
position: fixed;
bottom: 0px;
right: 10px;
width:35px;
height:35px;
background:url("images/footer_button_up.png") right no-repeat #121212;
display: block;
-moz-border-radius: 4px 4px 0px 0px;
-webkit-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
}
a.trigger_fixed{
margin:0 auto;
left:50%;
margin-left:447px;
}
a#footer_trigger.trigger_active {
background:url("images/footer_button_down.png") right no-repeat #121212;
}
/* _____________________________________________________________________________
6. COLORED ELEMENTS
_____________________________________________________________________________ */
/* Links within the content */
#footer li div.footer_dropup a {color:#dddddd;}
#footer li div.footer_dropup a:hover {color:#ffffff;}
Modifié par jytest (27 Jul 2013 - 15:13)