Positionnement des blocs

**Manio 54** · 09/08/2005, 08h02

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 :

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
<!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 :

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
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;
}

**TommyWeb** · 09/08/2005, 10h28

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 :-/

**ilood** · 09/08/2005, 10h31

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 :

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

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

Supprime le width du body

Code :

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

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.

**Manio 54** · 09/08/2005, 18h49

j'ai essayé ton code il n'est pas exactement placé au meme endroit dans les deux navigateurs !!!

**Manio 54** · 09/08/2005, 18h56

sa y est j'ai reussi pour la banniere avec sa :

Code :

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

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 ?

**Manio 54** · 09/08/2005, 19h09

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 !!!

**v4np13** · 09/08/2005, 19h13

Je suis un peu hors sujet, mais est-ce normal que ton site n'ait pas de bas?

**Manio 54** · 09/08/2005, 19h56

pour l'instant je fais le design et je mettrai le bas !!!

**Manio 54** · 09/08/2005, 20h35

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 ?

**radimby** · 10/08/2005, 12h10

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

**Manio 54** · 10/08/2005, 18h05

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 !!!
@+

Positionnement des blocs

HTML

Discussions similaires

Partager

Partager