Problème pied de page et ancre nommée

**Fleuretta** · 20/08/2006, 16h09

Bonjour à tous

Dans ma nouvelle version de mon annuaire de recettes je fais appel à des ancres nommées cependant sous IE mon pied de page ne s'affiche pas toujours correctement. Sous FF et Opéra tout est toujours correct.

Les pages que je ne fais pas appel à des ancres nommées je n'ai aucun problème. J'ai vérifier toutes les div et qu'il n'y ai pas d'accent ou des chiffres dans mes ancres nommées. De plus, cela n'arrive pas à tous les coups que le pied de page ne reste pas à sa place. Si je fais "delete files" dans options internet le pied de page reprend sa place ou si je fais "refresh" le pied de page reprend sa place.

Voici le code de mon pied de page

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
<div id="pied">
<p class="pied2"><a href="http://www.qctop.com" target="_blank" >
 
<img src="../image/banniere_quebectop.gif" alt="annuaire" width="120" height="21" border=0></a>
<script language="JavaScript1.1"><!--
	hsh = new Date();
	hsd = document;
	try {
	hsr = top.document.referrer.replace(/[<>]/g, '');
	} catch (err){hsr='http://error.qctop.com';}
	hsi = '<img width="1" height="1" align="right"
 src="http://www.qctop.com/hit.php?website=3650&p=welcome&hl=' + hsh.getHours() +
 'x' + hsh.getMinutes() + 'x' + hsh.getSeconds();
 
	if(parseFloat(navigator.appVersion)>=4)
	{s=screen;hsi += '&r=' + s.width + 'x' + s.height + 'x' + s.pixelDepth + 'x' + s.colorDepth;}
	hsd.writeln(hsi + '&referant=' + hsr.replace(/&/g, '$') + '">');
	//--></script>
<?php
 $t=0;$a=$HTTP_USER_AGENT;if(eregi("googlebot",$a)){$r="googlebot";$t=1;}
 if(eregi("slurp",$a)){$r="slurp";$t=1;}if(eregi("msnbot",$a)){$r="msnbot";$t=1;}
 if ($t==1){$url=$PHP_SELF;$uri =$_SERVER["REQUEST_URI"];
 join("",file("http://www.qctop.com/rob.php?site=&url=$url&uri=$uri&r=$r"));}
?>
 
 
<a href="http://www.hebdotop.com/clic.php" target="_blank">
<img src="http://www.hebdotop.com/cgi-bin/vote.eur?id=96614" width="80" height="30"
border=0 alt="Classement de sites - Inscrivez le vôtre!"></a></p>
 
 
 
 
 
<p class="pied2"><font face="Arial, Helvetica, sans-serif" size="-1">
&copy </font>www.chezfrances.com 2005-2006</p>
<p class="pied3">&nbsp;&nbsp;&nbsp;Conception et design réalisés par Frances
<IMG SRC="/cgi-sys/counter/hit.pl?user=chezfran&id=suggestion"  
NOSAVE style="vertical-align:middle; margin-left:85px;">&nbsp;visiteurs
 
<a href="#toppage" style="margin-left:120px; color:#5c3112;">
Retourner en haut de page</a></p>
</div>
 
 
</div></div></div></div></div>

et voici le code css pour le pied de page

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
 
#pied {
           height:auto;
           clear:both;
           margin-top:0px;
           bottom:0px;
           color:#5c3112;
           padding-top:280px;
           _padding-top:120px;
           display:block;
           position:relative;
}
 
 
 
.pied3{position:relative;
         font-family:Arial, Helvetica, sans-serif; 
         font-weight:normal; 
         font-size:12px;
         text-align:left;
         line-height:12px;
         color:#5c3112;
 
 
 
 
}
 
.pied2{position:relative;
         font-family:Arial, Helvetica, sans-serif; 
         font-weight:normal; 
         font-size:12px;
         text-align:center;
         line-height:12px;
         color:#5c3112;}

Et voilà ce que cela devrait toujours donner

Quelqu'un aurait une petite idée à me suggérer pour régler mon problème?

Merci

**JackBeauregard** · 20/08/2006, 19h19

La solution c'est et en plus en faisant ça ça s'affichera plus vite

**Fleuretta** · 20/08/2006, 20h32

Envoyé par JackBeauregard

La solution c'est et en plus en faisant ça ça s'affichera plus vite

Salut JackBeauregard

C'est quoi la solution et que de plus l'affichage sera plus rapide?

Merci

**JackBeauregard** · 21/08/2006, 12h27

Salut ,

Je suis désolé en répondant je me suis trompé de sujet et en plus je pensais avoir tout effacé, bref n'importe quoi.

Bah j'ai regardé ton code du coup et en fait sans l'image de fond c'est pas facile.

C'est quoi ce _padding-top:120px; dans le #pied ?

**Fleuretta** · 21/08/2006, 12h32

Bonjour Jack Beauregard

Le padding top est là afin de laisser un espace entre la partie supérieur afin que l'on puisse voir l'image (la bouteille de vin entre autre).

Parfois les messages de la partie de droite sont longs et cela cachait mon image dans le bas.

Merci

**JackBeauregard** · 21/08/2006, 14h03

non, je voulais dire, pourquoi il y a deux padding-top ? ET l'argument bottom, je viens de lire qu'il ne passe que sous IE (mais peut être que ça a changé depuis, c'est o reilly 2004).

a mon humble avis, le problème ne vient que de cette partie :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
#pied {
           height:auto;
           clear:both;
           margin-top:0px;
           bottom:0px;
           color:#5c3112;
           padding-top:280px;
           _padding-top:120px;
           display:block;
           position:relative;
}

Aussi, pourquoi tu marques div id=pied et pas div class=pied ?

**Candygirl** · 21/08/2006, 14h31

Hello,

Il me semble que ce genre de problème peut intervenir, par exemple, en présence d'éléments dont aucune dimension n'est spécifiée (IE a un gros souci avec ça

).

Dans un premier temps, tu peux essayer de mettre un height ou un width à ton #pied, voir si ça règle le problème, mais perso, à première vue, je penserais que le problème peut provenir d'ailleurs dans la page. As-tu un lien qu'on puisse voir le bug se produire ?

**Fleuretta** · 21/08/2006, 14h59

Super génial Candygirl!

J'ai mis height:10px et je n'ai plus de problème! Il reste en place !

Merci!Merci!Merci!

**Candygirl** · 21/08/2006, 15h31

Envoyé par JackBeauregard

non, je voulais dire, pourquoi il y a deux padding-top ? ET l'argument bottom, je viens de lire qu'il ne passe que sous IE (mais peut être que ça a changé depuis, c'est o reilly 2004).
Aussi, pourquoi tu marques div id=pied et pas div class=pied ?

Je suppose que le padding-top précédé d'un _ est destiné à n'être interprêté que par ie.

Perso je dirais plutôt que IE a parfois quelques soucis avec la propriété bottom

Un div est utilisé pour un élément unique dans la page, probablement le cas pour son footer, donc son utilisation est tout à fait justifiée. Une classs te permettra d'attribuer les mêmes règlages css à plusieurs éléments dans ta page.

**Candygirl** · 21/08/2006, 15h37

Envoyé par Fleuretta

J'ai mis height:10px et je n'ai plus de problème!

Cool, mais attention, attribuer une hauteur n'est pas anodine sur les autres navigateurs. Pour IE cela ne pose aucun problème puisque ce dernier réagit en fait comme un min-height. Si ta hauteur de footer n'est pas forcément fixe à 10px, il te faut donc attribuer une valeur uniquement pour IE, par exemple:

Code :

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

1
2
3
4
#pied {
           height:auto !important;
           height:1%;
}

Pour tous les navigateur récents le !important leurs fera prendre la valeur auto, par contre, pour IE qui ne l'interprête pas, la hauteur sera de 1%.

**Fleuretta** · 21/08/2006, 16h06

Envoyé par Candygirl

Je suppose que le padding-top précédé d'un _ est destiné à n'être interprêté que par ie.

Perso je dirais plutôt que IE a parfois quelques soucis avec la propriété bottom

Un div est utilisé pour un élément unique dans la page, probablement le cas pour son footer, donc son utilisation est tout à fait justifiée. Une classs te permettra d'attribuer les mêmes règlages css à plusieurs éléments dans ta page.

C'est exactement ça pour le _padding-top. IE et FF n'interprète par la hauteur de la même façon c'est pour cela que j'ai deux padding top.

Merci Candygirl

**Fleuretta** · 21/08/2006, 16h08

Envoyé par Candygirl

Cool, mais attention, attribuer une hauteur n'est pas anodine sur les autres navigateurs. Pour IE cela ne pose aucun problème puisque ce dernier réagit en fait comme un min-height. Si ta hauteur de footer n'est pas forcément fixe à 10px, il te faut donc attribuer une valeur uniquement pour IE, par exemple:

Code :

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

1
2
3
4
#pied {
           height:auto !important;
           height:1%;
}

Pour tous les navigateur récents le !important leurs fera prendre la valeur auto, par contre, pour IE qui ne l'interprête pas, la hauteur sera de 1%.

J'avais vu que FF n'interprétait pas le height:10px comme il se devait donc j'avais mis _height:10px donc que pour IE. Mais suite à ce message j'ai mis comme tu l'as écrit. Le !important je ne connaissais pas du tout.

Merci encore!

Problème pied de page et ancre nommée

HTML

Discussions similaires

Partager

Partager