Forum d'entraide PHPFrance

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

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

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.

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

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

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 ?

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

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.

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

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

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 ?

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

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

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

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

Forum d'entraide PHPFrance

Positionnement des blocs

Positionnement des blocs