Positionnement des blocs

Version imprimable

Bonjour !! J'ai un probleme avec mon CSS il s'affiche comme je veux avec FIREFOX mais pas dans INTERNET EXPLORER (si sa ne tenais qu'à moi je le laisserait comme sa mais vu le nombre d'****** qui utilisent encore INTERNET EXPLORER !!!) !

Enfait j'aimerai placé des calques à des endroits précis (banniere au pixel près ...) Je vous montre le code qui marche avec FIREFOX mais qui n'est pas bien aligné dans EXPLORER !!!

HTML :

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 
<head>
<title>MaNio Wo</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link rel="stylesheet" media="screen" type="text/css" title="design" href="styles/design.css" />
 <meta name="keywords" content="Manio 54">
 </head>
 
<body>
<div id="banniere">
<a href="http://www.prizee.com/?refer=Popom54" target=_blank ><img src="http://www.prizee.com/images/promo/prizee-468x60-v3.jpg" border=0 width=468 height=60></a>
</div>
 
<div id="nom_page"> <h3>Acceuil</h3>
</div>
 
<div id="menu">
 
</div>
 
 
</body>
</html>

CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body
{
background-image:url("../fond/fondn.png"); /*fond*/
width: 1024px; /*largeur*/
margin: auto;
font-family: "Comic Sans MS", Arial, Verdana, serif;
}
#banniere
{
width: 468px;
height: 60px;
margin-left: 244px;
margin-top: 250px; /* Marge du haut */
}
#nom_page
{
margin-top: 26px; /* Marge du haut */
margin-left: 455px;
color: red;
height: 20px;
}

09/08/2005, 10h28
TommyWeb

Ce serait ptet plus simple si on pouvait directement voir sur une page tu crois pas ?

Mais je peux déjà te dire que ça vient des Margin ;)
Car IE et mozilla sont deux navigateurs interprettant différemment les margin et padding :-/
09/08/2005, 10h31
ilood

Salut,

Je ne voit pas la différence entre ie et Fx.
Si tu veux centrer ta bannière en plein milieu de l'ecran passe ton div#banniere en position absolute tu mets un left et un top à 50% ensuite tu lui affecte des margin top et left negatifs. Margin égales à la moitié de la hauteur et moitié de la longueur.

Code:

div#banniere { position:absolute; width: 468px; height: 60px; left: 50%; top: 50%; margin-top: -30px; margin-left: -234px; }

Supprime le width du body

Code:

width: 1024px; /*largeur*/

Je n'en voit pas l'utilité.
A part ça j'ai pas passé ton code au validateur mais en voyant le doctype je serai étonné qu'il accepte la prorpiété traget="_blank" ainsi que l'oublie des guillemets autour des valeurs des propriétés (cf. ta balise img)

Une page avec un doctype xhtml 1.1 n'est pas faite pour etre envoyé en text/html.
Utilise à la rigueur du xhtml 1.0 strict.
09/08/2005, 18h49
Manio 54

j'ai essayé ton code il n'est pas exactement placé au meme endroit dans les deux navigateurs !!!
09/08/2005, 18h56
Manio 54
sa y est j'ai reussi pour la banniere avec sa :
Code:

1 2 3 4 5 6 7 8 #banniere { position:absolute; width: 468px; height: 60px; left:307px; top:250px; }
Je fais sa pour tous non ?
09/08/2005, 19h09
Manio 54

Oups j'ai parlé trop vite sa marche dans les deux pour la banniere mais pas pour un texte !!!
C'est qui qui voulait voir sa http://manio54.free.fr/index.html
HTML pas HTM c'est pas la meme page !!!
09/08/2005, 19h13
v4np13

Je suis un peu hors sujet, mais est-ce normal que ton site n'ait pas de bas?
09/08/2005, 19h56
Manio 54

pour l'instant je fais le design et je mettrai le bas !!!
09/08/2005, 20h35
Manio 54

J'ai mis un fond au calques pour que l'on voit ce qu'il represente c'est bizar ils ont les meme propriété mais sur IE il est plus grand allez voir !! http://manio54.free.fr/index.html

Sinon comment je peux faire pour que mon titre s'affcihe bien dans les 2 naviguateur ?
10/08/2005, 12h10
radimby

Pour palier avec votre probleme de margin et padding sous IE et FIrefox, essayez d'utiliser le css hacking, ça marche parfois :

ex:

div#mon_div {
margin-top:25px; /* pour FF */
_margin-top:20px; /* pour Ie */
}

explication : IE ignore le '_' de _margin, donc il prendra cette valeur, alors que ff et les autres le trouvent et l'ignore car c'est pas le bon syntaxe.

Il faut quand meme les mettre dans cet ordre. les autres en haut, IE en bas
10/08/2005, 18h05
Manio 54

merci beaucoup moi j'avis juste fait un margin top de 1px et ce me l'a remi normal c'est bizar car il y avait plus d'un pixel de decalage mais sa a marché !!
Dorénavant j'utiliserais plutôt ta technique !!!
@+