Positionnement des blocs

09 août 2005, 07:34

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 : Tout sélectionner

<!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 : Tout sélectionner

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 août 2005, 10:10

Je ne vois pas la différence sans l'image de fond : as-tu une url qu'on puisse visualiser ? Là, je n'ai que la bannière

09 août 2005, 10:56

j'ajouterais

Code : Tout sélectionner

div,body,img {
  border: 0;
  padding: 0;
  margin: 0;
}

au début de tes déclarations de style, pour supprimer tout espace pollueur dans les balises div,body et img, qui peuvent être en cause.

Enfin quand on veut faire du placement au pixel pres, mieux vaut utiliser position: absolute

Je rappelle que la position absolue est un positionnement par valeur, par rapport au coin haut-gauche du premier cadre parent positionné lui aussi en absolu ou en relatif (position:relative). Le dernier d'entre eux étant body.

09 août 2005, 18:43

Bon desolé pour le retard je vais essayer sa et je vous redis !!!

09 août 2005, 18:55

C'est bon pour la banniere en absolute !!!
Je fais sa pour tous ?

09 août 2005, 18:59

C'est bon pour la banniere en absolute !!!
Je fais sa pour tous ?

Difficile de te répondre sans voir ni la page ni le code ni quoique ce soit pour savoir si telle ou telle réponse est appropriée, tu ne crois pas ?

09 août 2005, 19:10

Oui je crois bien parce que sa m**** pour un texte !!!

La page http://manio54.free.fr/index.html

Le code il y a que le CSS qui a changé donc je met que lui !!!

Code : Tout sélectionner

body
{
background-image:url("../fond/fondn.png"); /*fond*/
margin: auto;
font-family: "Comic Sans MS", Arial, Verdana, serif;
}
#banniere
{
 position:absolute; 
 width: 468px;
 height: 60px; 
 left:307px;
 top:250px;
}
#nom_page
{
position:absolute; 
width: 358px;
height: 37px; 
color: red;
left:370px;
top:334px;
text-align: center ;
}

09 août 2005, 19:38

En apparence, il y a peu à changer si ce n'est que le titre est un peu plus bas avec FireFox que dans IE.

Pour la position, comme te l'a expliqué naholyr, c'est toujours par rapport à l'élément parent qui est positionné, en relative ou absolute. Donc, dans un élément positionné en relative, donc dans le flux normal, tu peux avoir des éléments en position absolute qui seront positionnés par rapport à cet élément parent.

La correction que j'aporterais, ce serait de supprimer le div qui contient le titre h3 : un titre hn est un élément de bloc : donc au lieu d'avoir un:

Code : Tout sélectionner

<div id="nom_page"><h3>Accueil</h3></div>

Tu peux simplifier:

Code : Tout sélectionner

<h3 id="nom_page">Accueil</h3>

Tu devrais avoir exactement le même effet.

09 août 2005, 19:57

Cyrano je n'ai pas trop compris que dois-je changer dans mon CSS ?

09 août 2005, 20:23

Par rapport au bout de code que je viens de mettre ? rien du tout

09 août 2005, 20:32

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 ?

09 août 2005, 21:02

Fixe toi-même les margin et padding pour l'élément, ça devrait uniformiser pour tous les navigateurs

10 août 2005, 07:40

tu penses ? Ce n'est pas ce que j'ai fais au tout début ?

10 août 2005, 07:45

J'ai rajouté un margin-top: -1px et cela me l'a replacé c'est bizar parce que a vu d'oeil il y avait plus qu'un pixel !!!

10 août 2005, 10:11

IE n'interprête pas les marges internes et externe selon les standards, ce qui pose problème. Fais le tour de la série de tutos ICI

Positionnement des blocs

Qui est en ligne