Bon, je suis bloqué de nouveau sur un truc que je ne comprends pas du tout.
j'ai ça :
<footer id="footer">
<?php get_sidebar( 'footer' ); ?>
<div id="credits">
<p class="copyright">
Copyright © <?php print(date(Y)); ?> <?php bloginfo('name'); ?>. Tous Droits Réservés.
</p><!--.Copyright -->
<p class="crea">
conception
</p><!--.Crea -->
</div><!--#Credits -->
</footer><!--#footer-->Le truc, c'est que la div "credits" persiste à rester en dehors de #footer... Sur chrome si je suis au dessus, j'ai une div de 1122px x 0px.
footer fait 1132px x 215px ( bon le 215 est variable, je ne l'ai pas déclaré )Mon css pour tout ça :
#footer {
font-size: 1em;
background:#fff;
box-shadow: 0 0 6px #999;
padding: 10px 10px 0 0;
max-width:1132px;
}
#credits {
clear: both;
padding: 0 20px;
line-height: 40px;
background: url(images/fondmenu.png) top left no-repeat;
background-size: 100%;
}
#credits p {
margin: 0;
}
.copyright {
float: left;
max-width: 730px;
}
.crea {
float: right;
max-width: 402px;
text-align: right;
}( Il y a un clear:both sous la sidebar ( 'footer' ) )
Donc voilà, je comprends plus... un œil expert trouvera surement ce que je ne vois pas. Merci à vous ! :)
11 réponses
Ça vient de tes floats, enlève le float: left; du .copyright et remplace tes "p" (paragraphes) par des spans, et là tu auras le résultat voulu normalement.
J'ai fait un screen pour mieux visualiser le truc, la partie inférieure n'est pas en surbrillance, comme si elle était en dehors de la div footer.
Magnifique, merci Nairolf...même si je ne comprends pas pourquoi ça ne fonctionne pas avec des div, au moins, le résultat est là :)
Les div et p ont des margins et padding et ne s'alignent pas avec les autres, y'a le display: inline; qui règle ça normalement.
Du coup, une balise footer et div, et tout plante... C'est bon à savoir, comme je suis loin d'avoir terminé :)
les margins et padding sont calculé soit par un css soit par le navigateur qui a des styles par défaut. Pour mettre les margin à 0 sur les h1, etc... ou p il suffit de mettre margin:0 !important; en CSS
Avant de changer de balises, il est aussi toujours bon d'ajouter un overflow:hidden en CSS à ton élement conteneur pour le forcer à prendre tous les noeuds enfants (biensûr sans lui imposer une hauteur sinon il les coupera ^^)
Attention aux display:inline surtout si tu mets des élément block à l'intérieur, ce n'est pas sémantiquement bien.
Le hack !important ne fonctionne plus depuis IE 7 et étant donné que IE 6 n'est quasiment plus utilisé ça ne sert à rien d'utiliser ce hack ^^ .
ce Hack n'a rien à voir avec ie puisqu'il s'agit d'une règle native W3C implémantée avec le CSS1.1 et toujours active en CSS3 qui permet de définir tes régles par niveau d'importance.
De plus ie5 et ie6 ne reconnaissent pas cette règle
Test et tu verras qu'il est fonctionnel sur tous les navigateurs.
C'est le meilleur moyen d'overrider une classe ayant un chargement inférieure à celle souhaitée.
D'ailleurs si cette fonction était dépréciée, je ne vois pas pourquoi tous les framework css l'utiliserait ^^ (cf. Bootstrap)
Un petit artcile à lire sur !important :
article à lire
Merci donc de vérifier ses sources avant de sortir des propos non fondé ;)
Si je rajoute un !important à mes margin, ça fout en l'air toutes mes autres margin.
Par contre, je me rends compte que j'ai le même probleme avec la div juste au dessus maintenant
content.php
<footer id="footer">
<?php get_sidebar( 'footer' ); ?>
<div id="credits">sidebar-footer.php
<div id="footer-area" class="widget-area" role="complementary">
<?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
<div id="footer-left">Et impossible de mettre un background-color sur #footer-area, div qui fait 1132x0
#footer {
font-size: 1em;
background:#fff;
box-shadow: 0 0 6px #999;
padding: 10px 10px 0 0;
margin-top: 80px;
clear: both;
max-width:1132px;
}
#footer-area {
position:relative;
background-color:#f9f9f9;
}Tu as du texte dans ton footer où c'est juste des éléments graphiques? Car dans le deuxième cas c'est normal de ne rien avoir, essaye d'imposer une taille minimal du type min-height: 10px;
En fait j'ai remarqué que tu met pas de taille à tes éléments, c'est pas trop grave avec peu d'élément, mais à force tu auras de gros problèmes de placement.
Oui j'ai des éléments texte dessous ( cf mon screen du premier post ) et j'avoue mettre pas souvent une taille de div.
Ici, la taille de la div étant variable ( en fonction du nombre d'éléments qu'affiche la sidebar en fait ), je l'ai laissé en auto.
Merci encore Nairolf :)
Je sais pas de combien de sujet je vais polluer le forum, mais je suis loin d'avoir fini et vous m'aidez bien, merci à vous tous.