structure CSS : Espaces non voulus

**gogetenk** · 17/07/2012, 12h17

Bonjour à tous,

je suis en train de me faire un petit portfolio perso sans prétention, j'en suis au paufinage et un détail m'agace :
Sur Firefox, il y a des espaces non voulus avant et après mon footer.
En effet, en regardant avec Firebug, il y a deux blocs vides qui entourent mon Footer. Si je les supprime via l'outil, le problème disparaît. J'ai réussi à pallier à ce problème sur les autres navigateurs en mettant une margin-top négative, mais rien n'y fait sur Firefox.

J'ai farfouillé mon code dans tous les sens, désactivé tous mes plugins wordpress, désactivé javascript, mais rien n'y fait...

Des idées ? Souvent, ce genre d'erreurs est du à de l'inattention mais j'ai tellement vérifié et revérifié que je commence à me poser des questions... Je n'ai jamais eu ce problème sur mes autres sites.

Merci d'avance !

EDIT : Avec l'URL, c'est mieux http://ytocreau.com

**Torgar** · 17/07/2012, 12h23

Salut,

On peut voir le code ? Ca peut aider...

**gogetenk** · 17/07/2012, 12h32

Firebug ne suffit pas ? Mon code est blindé de scripts PHP et mon CSS principal fait 1000 lignes alors c'est beaucoup plus clair sous un outil tel que Firebug il me semble...

**Torgar** · 17/07/2012, 12h38

Envoyé par gogetenk

Firebug ne suffit pas ? Mon code est blindé de scripts PHP et mon CSS principal fait 1000 lignes alors c'est beaucoup plus clair sous un outil tel que Firebug il me semble...

Et tu peux me dire où on l'utilise le Firebug ? Non parce que je l'ai l'extension, là n'est pas le problème et je veux bien m'en servir. Mais si on a pas au minimum l'adresse du site internet, elle me servira à rien du coup

**gogetenk** · 17/07/2012, 12h39

Oh le c**

http://ytocreau.com

Désolé

**Torgar** · 17/07/2012, 15h17

Donc, maintenant que j'ai pu voir.

Quand tu inspectes le code avec Firebug, il a un retour à la ligne entre le footer et la section 4. (plusieurs même si on regarde la source de la page)

Pour ma part je n'ai eu qu'à cliquer entre les deux div et supprimer cet espace vide. Puis appliquer un margin-top: 19px; sur le footer. Sans, on ne distingue plus la frise en dent de scie.

A vérifier mais, je pense que le positionnement relatif et le décalage en haut n'est peut-être plus nécessaire pour le footer.

En passant, sympa le site

**gogetenk** · 17/07/2012, 17h22

Tout d'abord merci pour ton aide !

J'avais bien vu le retour à la ligne entre la section 4 et le footer...
Malheureusement il n'est pas dans mon code... Tout ce qu'il y a dans ma page c'est la fonction d'appel du footer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php get_footer(); ?>

Mais cela ne ma jamais rajouté de saut de ligne intempestif par le passé...

Merci d'avoir pris le temps de regarder

**Torgar** · 17/07/2012, 17h45

Tu pourrais nous montrer le code de la page qui appelle la fonction get_footer() ?

Il vient bien de quelque part ce retour à la ligne...

**gogetenk** · 18/07/2012, 21h16

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?php wp_footer(); ?>
 
<div id="footer">
	<div class="centre">
 
		<section class="footer-area" style="width: 40%; height: 180px;">
		<h3><span class="icon white medium social" style="text-transform: lowercase;" data-icon="e"></span> Derniers tweets</h3>
			<?php echo do_shortcode("[minitwitter username='killyann78' limit=2]"); ?>
		</section>
 
		<section class="footer-area">
				<h3><span class="icon white medium" style="text-transform: lowercase;" data-icon="y"></span> Plan du site </h3>
			<ul>
				<li> <a href="#section1"> Accueil </a></li>
				<li> <a href="#p2"> Portfolio </a></li>
				<li> <a href="#p3"> A propos </a></li>
				<li> <a href="#p4"> Contact </a></li>
			</ul>
		</section>
 
		<section class="footer-area tooltip" style="cursor: pointer;" data-content="#flashcode">
				<h3><span class="icon white medium" style="text-transform: lowercase;" data-icon="i"></span> A propos</h3>
			<ul>
				<li> <span class="icon white small" style="text-transform: lowercase;" data-icon="u"></span> Yannis TOCREAU </li>
				<li> <span class="icon white small" data-icon="@"></span> 127184@supinfo.com </li>
				<li> <span class="icon white small" data-icon="&"></span> Paris banlieue 78</li>
				<li> <span class="icon white small" data-icon="8"></span> 06.81.71.57.79 </li>
			</ul>			
		</section>
		<div id="flashcode" class="tooltip-content"><img src="<?php bloginfo( 'template_url' ); ?>/style/flashcode.png" title="Flashez moi !" alt="Flashez-moi !" /></div>
 
		<section class="footer-area">
				<h3><span class="icon white medium" data-icon="U"></span> Réseaux</h3>
			<ul>
				<li> <span class="icon social white small" data-icon="T"></span> <a href="https://twitter.com/#!/killyann78" title="Suivez-moi sur Twitter">Twitter</a></li>
				<li> <span class="icon social white small" data-icon="F"></span> <a href="https://www.facebook.com/killyann" title="Suivez-moi sur Facebook">Facebook </a></li>
				<li> <span class="icon social white small" data-icon="G"></span> <a href="https://plus.google.com/u/0/117974893947139779559/posts" title="Suivez-moi sur Google +">Google + </a></li>
				<li> <span class="icon social white small" data-icon="I"></span> <a href="http://fr.linkedin.com/pub/yannis-tocreau/4a/978/9a7" title="Connectez-vous a moi sur LinkedIn">LinkedIn </a></li>
				<li> <span class="icon social white small" data-icon="S"></span> <a href="callto://gogetenk" title="Appelez-moi sur Skype">Skype </a></li>
			</ul>
		</section>
	</div>
 
</div>
 
	<div id="copyright">
		<div class="centre">
			© Copyright 2012 - All Rights Reserved.
		</div>
	</div>
 
</body>
 
</html>

Voila le code complet de mon footer.php (qui est appelé par get_footer)

Edit : C'est quoi ce

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

dans mon code ? >.> Il n'est pas dans notepad++

**gogetenk** · 18/07/2012, 21h30

Bon, problème résolu. C'était en fait un problème d'encodage.

Je m'en suis rendu compte lorsque j'ai copié collé mon code à Torgar.
Un caractère Unicode qui se nomme : 'ZERO WIDTH NO-BREAK SPACE' (U+FEFF).

J'ai encodé mes pages en UTF SANS BOM et le problème est résolu...
Ca n'arrive vraiment qu'à moi ces trucs...

Merci quand même ^^

**Torgar** · 18/07/2012, 22h05

Pense à cliquer sur

Merci

structure CSS : Espaces non voulus [HTML 5]

HTML

Discussions similaires

Partager

Partager