Problème de position

sous firefox c'est tout bon mais sous IE...

2 avril 2006 à 21:07:07

Voilà mon problème: regardez cette page, d'abord sous firefox, pui sous IE, vous verrez bien la différence...

Je vous donne mes codes:
xHTML

<!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">
<html>
<head>
<title>::Bf-ground.com::Toute l'actualité de Battlefield 2</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design BF2" href="designbf2.css" />
</head>
<body>
<div id="page">
<div id="banniere">
<img src="image/header.jpg" alt="" />
</div>
<div id="hautmenu">
<img src="image/hautMENU.jpg" alt="" />
</div>
<div class="newshaut">
</div>
<div class="news">
blablablablabla<br />
blablablablabla<br />
blablablablabla<br />
blablablablabla<br />
</div>
<div class="newsbas">
</div>
<div id="soushautmenu">
</div>
<div id="menu">
</div>
<div id="basmenu"></div>
<div id="footer">
</div>
</body>
</html>

CSS

body
{
width: 800px;
background-color: #EDEDED;
margin: auto;}

#page
{
background-image: url("image/imagefond.jpg");
background-repeat: repeat-y;
width: 800px;
}
#banniere
{
margin-left: 27px;
}

#hautmenu
{
float: left;
margin-left: 26px;
width: 132px;
margin-top: 0px;
height: 19px;
}

#menu
{
background-image: url("image/cellulemenu.jpg");
background-repeat: repeat-y;
height: 120px;
margin-left: 27px;
}

#soushautmenu
{
background-image: url("image/dessoushautmenu.jpg");
height: 33px;
margin-top: 19px;
margin-left: 25px;
width: 134px;
}

#basmenu
{
background-image: url("image/basMENU.jpg");
width: 132px;
height: 23px;
margin-left: 26px;
}

.newshaut
{
width: 568px;
height: 12px;
background-image: url("image/newsHAUT.jpg");
margin-top: 30px;
float: right;
margin-right: 35px;
}

.news
{
width: 500px;
border-left: 1px solid black;
border-right: 1px solid black;
float:right;
margin-right: 70px;
padding: 3px;
}

.newsbas
{
width: 568px;
height: 12px;
background-image: url("image/newsBAS.jpg");
float: right;
margin-right: 35px;
}

#footer
{
height: 20px;
width: 800px;
background-image: url("image/footer.jpg");
}

voilà.
Merci d'avance de votre aide éventuelle

GuillaumeOj

2 avril 2006 à 21:20:43

En fait la disposition de ton code xHTML, ne va pas, il vaut mieux mettre:

<div id="page">

<div id="banniere"><img src="image/header.jpg" alt="" /></div>

<div if="gauche">
<div id="hautmenu"><img src="image/hautMENU.jpg" alt="" /></div>
<div id="soushautmenu"></div>
<div id="menu"></div>
<div id="basmenu"></div>
</div>

<div id="news">
<div class="newshaut"></div>
<div class="news">
blablablablabla<br />
blablablablabla<br />
blablablablabla<br />
blablablablabla<br />
</div>
<div class="newsbas"></div>
</div>

<div id="footer"></div>
</body>
</html>

Et puis pour le CSS, ce que tu faits :

#gauche{ float: left; }
#news{ float: left; }
#footer{ clear: left; }/*Pour eviter de faire buger le footer */

james

2 avril 2006 à 21:28:06

il existe un code en java pour selectioner un fichier css selon le navigateur

sa pourer t'aider moi c'est se que je fais car ya tj des décalage alor je change le css pour IE

var navactu = navigator.appName;

if(navactu=="Microsoft Internet Explorer") // si le navigateur est IE alors ...
{
document.write('<link rel="stylesheet" media="screen" type="text/css" href="ie.css" />');
}
else // sinon ...
{
document.write('<link rel="stylesheet" media="screen" type="text/css" href="autre.css" />');
}

TheL0wBob

2 avril 2006 à 21:33:13

Ca bug toujours

voilà sous firefox et sous IE

james

2 avril 2006 à 21:41:53

c est simple sou ie tu mes margin-left:0

si y se colle pas tu mes -le nombre de pixel d'ecart dison -20px

ensuite tu le decalle du haut:
margin-top:nombre de pixel en decalage dison 20px

si tu fais 2 fichier css comme je te les di plus haut sa devrer resoudre le probleme

Linhks

2 avril 2006 à 21:49:04

Tiens voilà je te donne le code html et le code css modifié. Tout marche bien normalement

<!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">
<html>
<head>
<title>::Bf-ground.com::Toute l'actualité de Battlefield 2</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design BF2" href="designbf2.css" />
</head>
<body>

<div id="page">
<div id="banniere">
<img src="image/header.jpg" alt="" /></div>

<div id="gauche">
<div id="hautmenu">
<img src="image/hautMENU.jpg" alt="" /></div>
<div id="soushautmenu"></div>
<div id="menu"></div>
<div id="basmenu"></div>
</div>

<div id="news">
<div class="newshaut"></div>
<div class="news">
blablablablabla<br />
blablablablabla<br />
blablablablabla<br />
blablablablabla<br />
</div>
<div class="newsbas"></div>
</div>
</div>

<div id="footer">
</div>
</body>
</html>

body
{
width: 800px;
background-color: #EDEDED;
margin: auto;}

#page
{
background-image: url("image/imagefond.jpg");
background-repeat: repeat-y;
}
#banniere
{
margin-left: 27px;
}

#gauche {
float:left;
width:160px;
}
#hautmenu
{
margin-left: 26px;
width: 132px;
margin-top: 0px;
height: 19px;
}

#menu
{
background-image: url("image/cellulemenu.jpg");
background-repeat: repeat-y;
height: 120px;
margin-left: 27px;
}

#basmenu
{
background: url("image/basMENU.jpg") no-repeat;
margin-left: 26px;
}

#news {
margin-left:170px;
}

.newshaut {
height: 12px;
background: url("image/newsHAUT.jpg") no-repeat;
margin-top: 30px;
margin-right: 35px;
}

.news
{
border-left: 1px solid black;
border-right: 1px solid black;
margin-right: 70px;
padding: 3px;

}

.newsbas
{
height: 12px;
background: url("image/newsBAS.jpg") no-repeat;
margin-right: 35px;
}

#footer
{
height: 20px;
width: 800px;
background-image: url("image/footer.jpg");
clear:left;
}

PS: tu peux modifier les margin à ta guise, j'ai peut-être un peu changé les valeurs.

TheL0wBob

3 avril 2006 à 11:28:24

Il n'y a pas un script en php pour changer de css??

Parce que celui en js ne marche pas, il ne donne aucun fichier css...

allez voir...

DuClik

3 avril 2006 à 13:46:04

Citation : Gabyrel

Il n'y a pas un script en php pour changer de css??

Parce que celui en js ne marche pas, il ne donne aucun fichier css...

allez voir...

pas besoin d'adapter une feuille css en fonction de chaque navigateur, sinon bonjour la galere ! Avec du javascript en prime, c'est vraiment déconseillé (il peut etre désactivé).

Donc pour ton cas, maintenant je ne vois pas bcp de differences entre IE et firefox, a par une marge sur ton body surement. Donc suprime le ou mets-en une fixe, pour ne pas que chaque navigateur l'adapte a sa sauce...

Linhks

3 avril 2006 à 15:25:53

Gabyrel, as-tu essayé le code html et css que j'ai posté car chez moi il n'y a plus de problème ni sous IE, ni sous ff.