Positionnement image IE-FF

**Medde** · 27/07/2009, 19h52

Bonsoir.
Je souhaite placer une image en pied de page, malheureusement le résultat n’est pas similaire sous IE 8 et FF 3.5.1 (décalé vers le haut).

Code :

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

1
2
3
4
5
6
#footer
{padding:0px
margin:0px;
position:absolute;
left:0px;
top:1020px;}

Qu’est ce qui cloche ?

Merci.

**Bovino** · 27/07/2009, 20h57

Envoyé par Medde

Qu’est ce qui cloche ?

Probablement le style par défaut des balises img différent selon les navigateurs

**Macmillenium** · 27/07/2009, 21h12

Bonsoir,

Envoyé par Medde

Qu’est ce qui cloche ?

Merci de poster l'intégralité de ton code (X)HTML/CSS

**Medde** · 28/07/2009, 13h51

Re.
Ok voila :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur le site de la société INSER</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="DesignB" href="designB.css" />
   </head>
 
 
   <body>
<div id="ses_missions">
 
  <h2>Ses missions</h2>
  <ul>
    <p>Les missions ont pour objectif de :</p>
	<div class="puce"><li>Réaliser des études générales, spécifiques et techniques </li>
    <li>Mettre en place des méthodes et outils à même d’utiliser de façon efficiente les réserves de productivité et les ressources non renouvelables</li>
    <li>Prodiguer des conseils et formation en entreprise dans le but de réhabiliter le cadre humain, le cadre environnemental et la qualité</li>
	<li>Promouvoir des investissements en partenariat avec des entreprises internationales</li>
	<li>Mettre en place des méthodes et outils à même d’assurer le développement économique des PME</li></div></ul>
  <ul>
    <p>Le répertoire de ses missions est varié:</p>
	<div class="puce"><li>Analyses sectorielles et stratégiques de développement</li>
	<li>Etudes de marché, enquêtes et sondage</li>
	<li>Communication</li>
	<li>Etudes économiques et financières</li>
	<li>Etudes de faisabilité</li>
	<li>Etudes d’organisation et de marketing</li>
	<li>Audit multifonctions</li>
	<li>Conseils en entreprise</li>
	<li>Etudes environnementales</li>
	<li>Conseils et assistance pour la mise en place du management qualité ISO 9000 – ISO 14001</br>
	<li>Etudes techniques et industrielles</li>
	<li>Etudes informatiques</li>
	<li>Réseaux locaux</li>
	<li>Gestion de projets</li>
	<li>Montage financier d’investissement</li></div></ul>
 
</div>
 
 
<div><img src="footer.png" alt="footer" id="footer"/></div>
 
 
 
   </body>
</html>

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
body 
{width:780px;
height:1052px;
padding:0px;
margin:0px;
background-image:url("inserf2.png");
color:black; 
background-repeat:no-repeat;}
 
 
#ses_missions
{width:500px;
margin:0cm;
padding:0.3cm;
border:thin solid rgb(137,0,0);
position:absolute;
top:8.5cm;
left:6cm;}
 
.puce
{padding-left:1cm;}
 
ul
{padding-left:0.3cm;}
 
h2
{color:rgb(137,0,0);}
 
h2:before
{content:url("play2.gif");
padding-right:0.3cm;}
 
 
p:before
{content:url("sound.png");}
 
strong
{color:rgb(0,64,128);
font-weight:bold;}
 
 
#footer
{padding:0px;
margin:0px;
position:absolute;
left:0px;
top:1020px;}

Au début j’ai cru que ça pouvais venir des marges entre les blocks mais même en remettant tout à zéro (margin,padding) ça n’a rien donné !
en persévérant je me suis aperçus que la taille des interlignes sont différentes sous IE et FF
je parle des interlignes texte dans un même block : ceux-ci sont définit par défaut, il n’y aurait pas moyen de faire quelque chose ??

@+

**Macmillenium** · 28/07/2009, 14h06

Attention, les unités en cm sont adaptées aux média print, pour les media screen, on utilise les em, % et px.
As-tu besoin de positionner #ses_missions en absolute ?
Enlève le height:1052px; sur le body et rajoute un html, body { height:100% } qui permet à l'élément racine HTML ainsi que son enfant directe body d'occuper toute la hauteur disponible.

Et normalement c'est bon, tu n'as pas de conteneur positionné => Tes éléments en absolute se référent au viewport (zone d'affichage) ou la racine HTML (mais cela importe peu).

**Medde** · 28/07/2009, 18h35

Envoyé par Macmillenium

Attention, les unités en cm sont adaptées aux média print, pour les media screen, on utilise les em, % et px.
Enlève le height:1052px; sur le body et rajoute un html, body { height:100% } qui permet à l'élément racine HTML ainsi que son enfant directe body d'occuper toute la hauteur disponible.

C’est ok.

Envoyé par Macmillenium

As-tu besoin de positionner #ses_missions en absolute ?

Pourquoi pas, ça pause un problème ? Comment devrais-je procéder (margin ?)

Envoyé par Macmillenium

Et normalement c'est bon, tu n'as pas de conteneur positionné => Tes éléments en absolute se référent au viewport (zone d'affichage) ou la racine HTML (mais cela importe peu).

Je ne t’ai pas saisi, pourrais-tu être plus explicite...

Bref malgré les changements opérés le problème persiste !!!

?

@+
Bonne soirée.

**Macmillenium** · 29/07/2009, 10h13

Envoyé par Medde

Pourquoi pas, ça pause un problème ? Comment devrais-je procéder (margin ?)

C'est surtout une question de maintenance, un élément en absolue est complétement retiré du flux normal et n'a aucun impact sur le reste des éléments.

Envoyé par Medde

Je ne t’ai pas saisi, pourrais-tu être plus explicite...

Le navigateur à le choix de positionner l'élément en absolue où il veut.
En cas d'attribution des propriétés top, right, bottom et left, l'élément en absolue se réfère à son premier conteneur positionné : absolute, relative et fixed, exemple :

Code xhtml :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Conteneur positionné</title>
	<style type="text/css">
                .conteneur-positionne {
                        width:500px; height:500px;
                        border:1px solid red;
                        position:relative;
                }
                .boite-positionne {
                        width:200px; height:200px;
                        border:1px solid green;
                        position:absolute; bottom:0; right:0;
                }
        </style>
</head>
 
<body>
 
<div class="conteneur-positionne">
Ceci est un parent positionné en relatif
	<div class="boite-positionne">
		Ceci est un enfant positionné en absolue qui se réfère à son parent positionné 
	</div>
</div>
 
</body>
</html>

Si aucun des conteneurs n'est positionné, l'élément en absolue se référe soit à la zone d'affichage du navigateur, soit à l'élément racine HTML (c'est encore le choix des navigateurs), exemple :

Code xhtml :

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
 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Conteneur positionné</title>
	<style type="text/css">
                .conteneur-positionne {
                        width:500px; height:500px;
                        border:1px solid red;
                }
                .boite-positionne {
                        width:200px; height:200px;
                        border:1px solid green;
                        position:absolute; bottom:0; right:0;
                }
        </style>
</head>
 
<body>
 
<div class="conteneur-positionne">
Ceci est un parent non positionné
	<div class="boite-positionne">
		Ceci est un enfant positionné en absolue qui se réfère à la zone d'affichage
	</div>
</div>
 
</body>
</html>

Envoyé par Medde

Bref malgré les changements opérés le problème persiste !!!

?

Merci de montrer ton nouveau code XHTML/CSS

**Medde** · 30/07/2009, 14h00

Bonjour.

En positionnant #ses_missions en absolute et #footer en margin ça marche nickel.
Je comprends ton exemple, par contre en modefiant le code comme ceci ça devrait etre bon(c'est n'ai pas le cas):

Code :

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

<div id="footer"><img src="footer.png" </div>

Code :

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

1
2
3
4
5
6
 
#footer
{padding:0px;
margin:0px;
position:absolute;
top:1000px;}

pourquoi? pourtant ici je positionne le "conteneur positionné" !!!
?

@+

**Macmillenium** · 30/07/2009, 14h10

Attention :

Code :

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

1
2
<div id="footer"><img src="footer.png" /></div>

**Medde** · 30/07/2009, 15h50

Oui,
mais le probleme persiste...

**Macmillenium** · 30/07/2009, 15h57

Code css :

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

1
2
3
4
5
6
#footer
{padding:0px;
margin:0px;
position:absolute;
bottom:0}

**Doki95** · 30/07/2009, 17h02

Envoyé par Macmillenium

Code css :
#footer
{padding:0px;
margin:0px;
position:absolute;
bottom:0}

Peut être rajouter un

Code :

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

1
2
3
4
5
6
7
#footer
{padding:0px;
margin:0px;
position:absolute;
bottom:0px
left: 0px;}

pas du tout obligatoire mais peut être plus propre pour éviter d'autre problème.

**Medde** · 30/07/2009, 23h19

J’ai déjà essayé cela précédemment et bien en appliquant ce code, #footer se retrouve quasiment au niveau du bloc #ses_missions :!!!

Bon je reposte la totalité du code, on ne sais jamais :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur le site de la société INSER</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="Design2" href="designB.css" />
   <style type="text/css">
    html, body 
   {height:100%;}
   </style>
 
   </head>
 
 
<body> 
 
 
 
 
  <div id="ses_missions">
 
  <h2>Ses missions</h2>
  <ul>
    <p>Les missions ont pour objectif de :</p>
	<div class="puce"><li>Réaliser des études générales, spécifiques et techniques </li>
    <li>Mettre en place des méthodes et outils à même d’utiliser de façon efficiente les réserves de productivité et les ressources non renouvelables</li>
    <li>Prodiguer des conseils et formation en entreprise dans le but de réhabiliter le cadre humain, le cadre environnemental et la qualité</li>
	<li>Promouvoir des investissements en partenariat avec des entreprises internationales</li>
	<li>Mettre en place des méthodes et outils à même d’assurer le développement économique des PME</li></div></ul>
  <ul>
    <p>Le répertoire de ses missions est varié:</p>
	<div class="puce"><li>Analyses sectorielles et stratégiques de développement</li>
	<li>Etudes de marché, enquêtes et sondage</li>
	<li>Communication</li>
	<li>Audit multifonctions</li>
	<li>Conseils en entreprise</li>
	<li>Conseils et assistance pour la mise en place du management qualité ISO 9000 – ISO 14001</br>
	<li>Réseaux locaux</li>
	<li>Gestion de projets</li>
	<li>Montage financier d’investissement</li></div></ul>
</div>
 
<div id="footer"><img src="footer.png" alt="footer"/></div>
 
    </body>
</html>

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
body 
{width:780px;
padding:0px;
margin:0px;
background-image:url("inserf2.png");
color:black; 
background-repeat:no-repeat;}
 
#ses_missions
{width:500px;
padding:10px;
margin:0px;
border:thin solid rgb(137,0,0);
position:absolute;
top:350px;
left:240px;}
 
.puce
{padding-left:30px;}
 
ul
{padding-left:10px;}
 
h2
{color:rgb(137,0,0);}
 
h2:before
{content:url("play2.gif");
padding-right:10px;}
 
 
p:before
{content:url("sound.png");}
 
strong
{color:rgb(0,64,128);
font-weight:bold;}
 
 
#footer
{padding:0px;
margin:0px;
position:absolute;
bottom:0px;
left:0px;}

Je ne comprends pas...
a+

**Macmillenium** · 31/07/2009, 19h02

Je ne comprends toujours pas ce que tu veux faire

Si tu veux un footer en bas de page alors :

Enlève le positionnement absolue sur #ses_missions
Englobe #ses_missions et #footer dans une div #container ayant un min-height:100%

Envoyé par Doki95

Peut être rajouter un

Code :

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

1
2
3
4
5
6
7
#footer
{padding:0px;
margin:0px;
position:absolute;
bottom:0px
left: 0px;}

pas du tout obligatoire mais peut être plus propre pour éviter d'autre problème.

L'attribution de left ou right (quelque soit la valeur, pas obligatoirement 0) évite :

Envoyé par Macmillenium

Le navigateur à le choix de positionner l'élément en absolue où il veut.

**Medde** · 01/08/2009, 00h19

Je souhaite juste comprendre ce qui cloche !!

Envoyé par Macmillenium

L'attribution de left ou right (quelque soit la valeur, pas obligatoirement 0) évite :

La je ne te suis pas,mais pourquoi donc

: alors à quoi sert de positionner le bloc si au final le navigateur ne respecte pas ces consignes.

Merci à toi.

**Macmillenium** · 01/08/2009, 13h26

Medde, lis bien les posts stp ...
L'attribution de top, right, bottom, left évite que le navigateur positionne le bloc où il veut.

Tu as déjà un left:0px; donc c'est bon

As-tu essayé ma dernière proposition ?

**Medde** · 01/08/2009, 15h00

Envoyé par Macmillenium

Medde, lis bien les posts stp ...

Désole.

Envoyé par Macmillenium

As-tu essayé ma dernière proposition

Comme je l’ai dis précédemment si j’utilise margin pour positionner #footer par rapport à #ses_missions,ça marche

.
Par contre ça n’explique pas pourquoi je ne peux pas positionner respectivement #ses_missions et #footer en absolute sans pour autant avoir un résultat différent sous IE et FF.

**Macmillenium** · 03/08/2009, 10h52

Envoyé par Medde

Par contre ça n’explique pas pourquoi je ne peux pas positionner respectivement #ses_missions et #footer en absolute sans pour autant avoir un résultat différent sous IE et FF.

Je ne vois pas de quelle différence tu parles.

Positionnement image IE-FF

Positionnement en CSS

Discussions similaires

Partager

Partager