Bonjour.
Je suis en train d'essayer de créer un pied de page enrichi. J'ai donc étendu l'ancien en largeur et en haut, mais j'obtiens une drôle d'anomalie que je n'arrive pas à m'expliquer. Une image vaudra bien des discours :
http://pix.toile-libre.org/upload/original/1369408580.png
Voici le code CSS relatif au pied :
Et le html ad-hoc :
Pourriez-vous me donner une piste pour corriger ce problème ? Merci.
Edition 1: j'ajoute d'autres morceaux du code css, au cas où... J'ai bien compris que le problème vient de du repeat de .footer-wrap { background: url(library/images/nav-bottom.png) repeat left bottom; ...} mais si je mets "no-repeat", alors nav[role=navigation] { background: url(library/images/nav-bottom-fill.png) repeat bottom; padding-bottom:26px; margin-left: 0px; } ne remplit plus la totalité du footer et je me retrouve avec un blanc...
Modifié par cosimo (30 May 2013 - 21:17)
Je suis en train d'essayer de créer un pied de page enrichi. J'ai donc étendu l'ancien en largeur et en haut, mais j'obtiens une drôle d'anomalie que je n'arrive pas à m'expliquer. Une image vaudra bien des discours :
http://pix.toile-libre.org/upload/original/1369408580.png
Voici le code CSS relatif au pied :
/******************************************************************
NAVIGATION STYLES
(Main Navigation)
******************************************************************/
nav[role=navigation] { background: url(library/images/nav-bottom.png) no-repeat left bottom; padding-bottom:26px; margin-left:-18px; }
nav[role=navigation] { background: url(library/images/nav-bottom-fill.png) repeat bottom; padding-bottom:26px; margin-left: 0px; }
nav[role=navigation] div.menu { background: url(library/images/nav-bottom-right.png) no-repeat right bottom; border-top:4px solid #fde979; box-shadow:inset 0 1px 0 #000; padding-left:15px; padding-right:15px; padding-bottom:30px; margin-right:-18px; margin-bottom:-26px; }
nav[role=navigation] ul.menu {
display:block;
}
... ... ...
Et le html ad-hoc :
<footer id="colophon" role="contentinfo">
<div class="footer-wrap">
<div id="site-generator">1ère ligne<br /> 2ème ligne<br /> 3ème ligne<br /> 4ème ligne</div>
</div>
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
.... ....
</body>
</html>
Pourriez-vous me donner une piste pour corriger ce problème ? Merci.
Edition 1: j'ajoute d'autres morceaux du code css, au cas où... J'ai bien compris que le problème vient de du repeat de .footer-wrap { background: url(library/images/nav-bottom.png) repeat left bottom; ...} mais si je mets "no-repeat", alors nav[role=navigation] { background: url(library/images/nav-bottom-fill.png) repeat bottom; padding-bottom:26px; margin-left: 0px; } ne remplit plus la totalité du footer et je me retrouve avec un blanc...
/******************************************************************/
@import url(library/css/default.css);
@import url(http://fonts.googleapis.com/css?family=Anton);
/******************************************************************
GENERAL LAYOUT STYLES
******************************************************************/
body {
}
#container, .wrap {
width: 96%;
margin: 0px auto;
padding: 0 2%;
max-width: 80%; /* remove or edit to adjust width */
}
/* layout options ( all have margins right & left of 1%) */
.col60 { width: 6.333%; } /* width 60px / grid_1 */
.col140 { width: 14.667%; } /* width 140px / grid_2 */
.col220 { width: 23.0%; } /* width 220px / grid_3 */
.col300 { width: 31.333%; } /* width 300px / grid_4 */
.col380 { width: 39.667%; } /* width 380px / grid_5 */
.col480 { width: 48.0%; } /* width 480px / grid_6 */
.col540 { width: 56.333%; } /* width 540px / grid_7 */
.col620 { width: 64.667%; } /* width 620px / grid_8 */
.col700 { width: 73.0%; } /* width 700px / grid_9 */
.col780 { width: 81.333%; } /* width 780px / grid_10 */
.col860 { width: 89.667%; } /* width 860px / grid_11 */
.col940 { width: 98.0%; } /* width 940px / grid_12 */
/* layout & column defaults */
.col60, .col140, .col220, .col300, .col380, .col480, .col540, .col620, .col700, .col780, .col860, .col940 { display: inline; float: left; margin-left: 1%; margin-right: 1%; position: relative; }
/* default styles & fixes */
#main { margin-left: 0; } /* fixes alignment (defaulted at col620) */
#sidebar { margin-right: 0; } /* fixes alignment (defaulted at col300) */
/******************************************************************
FOOTER STYLES
******************************************************************/
footer[role=contentinfo] {
padding:1.2em 0;
background: #fff;
border:1px solid #e1e3e4;
border-top:none;
}
.footer-wrap {
background: url(library/images/nav-bottom.png) repeat left bottom;
padding-bottom:35px;
margin-left:-18px;
}
.attribution {
float:none;
text-align:center;
}
#site-generator {
background: url(library/images/nav-bottom-right.png) no-repeat right bottom;
border-top:5px solid #f7df2b;
box-shadow:inset 0 1px 0 #000;
padding-top:12px;
padding-left:15px;
padding-right:15px;
padding-bottom:39px;
margin-right:-18px;
margin-bottom:-35px;
text-align:center;
color:#fff;
font-size:10px;
text-transform:uppercase;
letter-spacing:1px;
}
#site-generator a {
color:#fff;
text-decoration:none;
}
#site-generator a:hover {
text-decoration:underline;
}
Modifié par cosimo (30 May 2013 - 21:17)
