Souci de visibilité d'un extra-footer

Question

jytest

29 Jul 2013 à 10:01

Bonjour,

Sur ma page,
lorsque je diminue la largeur de la fenêtre de mon navigateur à moins de 1200 px environ,
j'ai mon extra-footer (fabriqué en jquery, avec "Sticker-footer")
qui se cache en très grande partie.

Puis-je vous demander votre aide pour résoudre ce souci ?
D'avance, je vous en remercie.

Voici la partie HTML en question :


<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>

Voici le css du footer "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;}

Voici aussi les css (partiel) de "autre.css"


#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 enfin, voici les css (partiel) de "general.css"


* {
	margin: 0;
	padding: 0;
	font-family: Arial, Verdana, Helvetica, sans-serif;
}
html {
	width: 100%;
	height: 100%;
}
body {
	z-index: 2;
	background-attachment: fixed;
	width: 100%;
	height: 100px;
	background-position: center top;
	background-image: url(../images/general/fond.png);
	background-repeat: no-repeat;
}

Modifié par jytest (29 Jul 2013 - 10:13)

artsx

6 Aug 2013 à 16:53

Salut,

Y a beaucoup de soucis dans ton intégration, pour corriger tout ça on va y aller par étape:

CSS :

body {
    background-attachment: fixed;
    background-image: url("../images/general/fond.png");
    background-position: center top;
    background-repeat: no-repeat;
    height: 100px;/* à retirer */
    position: relative;/* ce que j'ai ajouté */
    width: 100%;/* pas nécessaire */
    z-index: 2;
}

#ombre {
    box-shadow: 6px 6px 12px #202020;
    margin: 0 auto 90px;
    margin-top: 10px;
    overflow: hidden;
    width: 1054px;
    z-index: 2;
}

Tu n'as pas besoin de placer cet élément en position absolute pour le centrer, un simple width:XXpx + margin:0 auto; permet de centrer le site sur n'importe quel navigateur.

Ta div#dessous tu peux l'enlever elle ne sert plus à rien

Pour ton footer :

#footer {
    font-family: Arial,Helvetica,sans-serif;
    padding: 0;
    position: absolute;
}

Ca devrait régler tes soucis, je peux pas tester pour voir si j'ai oublié quelque chose.

Bon courage !

jytest

8 Aug 2013 à 16:01

Merci pour ton intervention!
Malheureusement, rien n'y fait.
Aucun changement visible.
Aucune amélioration évidente.

A l'aide...

artsx

8 Aug 2013 à 17:24

On va y aller par étape, je vais te montrer un template comme tu le fais :
Côté HTML :


<div id="wrapper">
<div id="header">
Tu met tes menus etc.. on s'en fou
</div>
<div id="content">
tout ton contenu, tes blocs etc..
</div>
</div>
<div id="footer">
ici tu met ton footer, il est en dehors du wrapper, tu peux le placer ou tu veux dans le DOM.
</div>

Côté CSS :


#wrapper{width:990px;margin:0 auto;overflow:hidden;}
/* Ici ton wrapper sera automatiquement centré par rapport à ton body, tu y met ce que tu veux d'autre comme paramètre, à savoir que tout ce qui se trouve a l'intérieur du wrapper bénéficera du centrage */

#header, #content{tu met ce que tu veux c'est toi qui gère}
#footer{position:absolute;bottom:0;}

En mettant le position absolute au footer, il se touvera toujours en pied de page, après y a des sites qui t'explique comment faire en sorte qui se trouve toujours en dessous même en scrollant par rapport au contenu. google est ton meilleur ami pour ça.

Avec ça, tu as de quoi faire en sorte que ton site ne parte pas en sucette en 1200px, j'en ai également bavé pour rendre mon site responsive, mais on s'y fait très vite faut pas lâcher.
Modifié par artsx (08 Aug 2013 - 17:25)

jytest

8 Aug 2013 à 22:48

et ma div #ombre, j'en fais quoi, stp ?
Modifié par jytest (08 Aug 2013 - 22:49)

artsx

8 Aug 2013 à 23:56

ta div #ombre est l'équivalente de ma div #wrapper dans mon exemple.

Sujet clos

CSS et mise en forme, CSS3

Souci de visibilité d'un extra-footer