Besoin de comprendre un comportement css!!!!

Salut à tous,

Je bosse sur le footer d'un site et j'ai une question qui me taraude!!!

Le code html du footer ressemble à ça :

<div id="footer-container">
	<footer class="wrapper clearfix" role="contentinfo">
		<nav>
			<ul>
				<li><a class="social facebook" href="#" title="">Lien</a></li>
				<li><a class="social twitter" href="#" title="">Lien</a></li>
			</ul>
		</nav>
		<article>
			<p class="copyright">&copy; | Tous droits réservés.</p>
		</article>
	</footer>
</div>

Un peu de css :

.wrapper {
	width: 95%;
	max-width: 960px;
	margin: 0 auto;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	zoom: 1; /* IE 6-7 hasLayout */
}

.
.
.

#footer-container {
	background: #FFF;
	margin: 80px 0 0 0;
	border-top: 1px solid #D9D9D9;
}

.facebook, .twitter {
	background: url("...") no-repeat scroll 0 0 transparent;
	float: left;
	display: block;
	width: 20px;
	height: 20px;
	margin-right: 15px;
	text-indent: -9999em;
}

.copyright {
	float: right;
	margin: 0;
}

Mon souci est que le footer en question laisse un espace sous lui.



En lui appliquant une propriété height, l'espace se remplit de sa jolie couleur blanche mais j'aimerais comprendre pourquoi sans cette dernière propriété un espace est présent. Et s'il est possible de faire sans elle ?

Merci d'avance aux experts
Modifié par jd-webdesign (31 Jan 2012 - 14:40)

Ça lu,

problème classique (ce que j'ai pu comprendre).... perte de flux. Deux solutions :

soit mettre un clear both
soit mettre un overflow:hidden;

Si c'est pas le cas, regarde les marges int/ext de chaque élément.
Modifié par niuxe (31 Jan 2012 - 15:08)

je pencherais même pou dire que la marge du bas du ul devrait pousser le contenu en bas, en dehors de la boîte contenante.
L'utilisation des marges en css est très mal pensée et souvent source de nombreux problèmes.
Modifié par kustolovic (31 Jan 2012 - 15:55)

hello,

merci pour vos réponses, je penche clairement aussi du côté de la perte du flux, pourtant la balise footer possède la class .clearfix

c'est le cas que je rate un truc, sûrement évidemment

Une remarque sur la structure HTML:
- L'utilisation de NAV est inutile et contraire à la spécification.
- L'utilisation de ARTICLE est fausse également.
On pourra virer ces éléments en gardant uniquement leur contenu, sans autre forme de procès.

kustolovic a écrit :
L'utilisation des marges en css est très mal pensée

Elle est au contraire très bien pensée. Bien sûr ça implique de connaitre un minimum la fusion des marges (fonctionnalité géniale mais pas toujours souhaitable).

jd-webdesign a écrit :
je penche clairement aussi du côté de la perte du flux

Je dirais plutôt une fusion de marges. Le margin-bottom du UL ou du P qui fusionne avec celui du parent, qui fusionne avec celui du FOOTER, qui fusionne avec celui du DIV#footer-container.

Effectivement j'ai vérifié les spécifications pour la balise nav et la balise footer est suffisante :
"The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary."

Idem pour la balise article, elle n'est pas nécessaire

Pour le reste je vais checké du côté de la fusion des marges, mais le #footer-container ainsi que la balise p ont déjà une margin-bottom à 0.
Modifié par jd-webdesign (31 Jan 2012 - 18:10)

bonsoir,

peut-être peut tu contenir lla fusion des marges en appliquant un:

padding-bottom:1px;

a ta règle

.clearfix:after

rappel sur astuces possibles pour contenir la fusion des marges:
1) Mettre a zero les marges qui fussionent entre elles.
2) mettre aussi une marge interne (ou forcer le navigateur a la calculé en injecter une valeur inferieur a 1 pixel).
3) mettre une bordure
4) autres ?

j'ai testé, en virant la class .clearfix de la balise footer, l'espace disparaît, par contre plus du tout de fond blanc (ce qui est logique il faut alors lui donner une hauteur, sauf erreur de ma part).

Ce serait donc la class .clearfix qui génère cet espace ?

jd-webdesign a écrit :


Ce serait donc la class .clearfix qui génère cet espace ?

Non , du moins rien ne le justifie. La fusion des marges est la bonne piste, à moins que tu ai une autre propriété CSS qui traine et qui s'applique par exemple aux DIV de ta pages.

La fusion des marges reste cependant la première piste a suivre

merci beaucoup pour tes réponses c'est sympa

a écrit :
Non , du moins rien ne le justifie.

Comment expliquer dans ce cas qu'en enlevant la class au footer l'espace disparaisse ?

jd-webdesign a écrit :

Comment expliquer dans ce cas qu'en enlevant la class au footer l'espace disparaisse ?

Cette espace ne disparait peut-être pas , mais est peut-être suffisant pour englober l'element flottant .

La fonction de ta class .clearfix est d’étirer les conteneurs de façon a ce qu'ils prennent aussi en compte les élément flottant qu'il contiennent qui ne sont plus dans le flux naturel de la page.

Marges internes et externes ainsi que leurs effets secondaires restent applicables sur tout l'espace qu'occupe l’élément.

Le code que tu présentes ne me permet pas de reproduire ton défaut, peut tu confirmer qu'il suffit et dans quel navigateur ?
cordialement,
GC

jd-webdesign a écrit :

Comment expliquer dans ce cas qu'en enlevant la class au footer l'espace disparaisse ?

oups, en regardant a nouveau ton petit bout d'image, je me dis que si ton but est de voir ton copyright sans fond gris (ou en dehors du footer) , du coup le .clearfix effectivement est inutile car il empeche ton element flottant de déborder sur l'exterieur.

Oui normalement le code fournit permet de voir l'espace, en ajoutant peut être une couleur au body et un div avec une hauteur de 1500px au dessus du footer histoire de faire descendre ce-dernier en bas de page.

Sinon j'utilise firefox en version 10 depuis quelques minutes

okay,

revoi ta propriété:

content:".";

en

content:"";

en insérant un caractère tu impose au navigayeur a prendre en compte et calculer l'espace d'une ligne (environ 1.2em) .

++
<edit>

jd-webdesign a écrit :
Sinon j'utilise firefox en version 10 depuis quelques minutes

geek !
</edit>
<re-edit>
petite explication:
ton :

visibility:hidden;

ne suffit pas a eliminé l'espace occupé par ton pseudo-élément;
</>
Modifié par gc-nomade (31 Jan 2012 - 19:41)

simple comme bonjour!!!!!

merci beaucoup je teste ça demain matin

bonne soirée

gc-nomade a écrit :
rappel sur astuces possibles pour contenir la fusion des marges:
(...)
4) autres ?

- overflow:hidden
- display:table