tout d'abord bonjour^^
je ne sais pas si il faut se présenter quelque part....au cas ou j'y cours des que j'ai trouver.
Je réalise en ce moment mon premier site Xhtml/CSS... en tout cas j'essai.
Et j'ai des problemes d'affichage entre IE et Firefox.
Ma page a problème
je crois que le problemes est lie a firefox qui ne "calcul pas" la hauteur de mon conteneur.
mon XHTML :
mes CSS:
body.css:
header.css:
surmesure.css:
Si vous pouviez m'indiquez comment faire pour que dans firefox le background s'affiche comme sous ie, ca m'arrangerait beaucoup^^
Merci
//EDIT: au passage , si j'ai fait des grosses betises indiquez les moi.
Modifié par LhO (03 Aug 2005 - 21:53)
je ne sais pas si il faut se présenter quelque part....au cas ou j'y cours des que j'ai trouver.
Je réalise en ce moment mon premier site Xhtml/CSS... en tout cas j'essai.
Et j'ai des problemes d'affichage entre IE et Firefox.
Ma page a problème
je crois que le problemes est lie a firefox qui ne "calcul pas" la hauteur de mon conteneur.
mon XHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CYBER S@LON INFORMATIQUE</title>
<link href="body.css" rel="stylesheet" type="text/css"></link>
<link href="surmesure.css" rel="stylesheet" type="text/css"></link>
<link href="header.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<div id="conteneurentete">
<div id="header" class="entete">
</div>
<div class="carremenu">
<img src="images/header/listecarre.gif" width="11px" height="130px" alt="code couleurs"/>
</div>
<ul class="menucyber">
<li><a href="http://cybersalon.fr/index.php">Accueil </a></li>
<li><a href="http://cybersalon.fr/pcsurmesure.php">Nos PC sur mesure </a> </li>
<li><a href="http://cybersalon.fr/minipc.php">Nos mini PC barebone </a></li>
<li><a href="http://cybersalon.fr/portable.php">Nos portables </a></li>
<li><a href="http://cybersalon.fr/accessoires.php">Accessoires et périphériques </a></li>
<li><a href="http://cybersalon.fr/depannage.php">Dépannage et SAV </a></li>
<li><a href="http://cybersalon.fr/nousituer.php">Nous situer </a></li>
<li><a href="http://cybersalon.fr/liens.php">Liens constructeurs </a></li>
</ul>
<p class="baseline">Vente PC et portable - SAV toutes marques - Particuliers & Entreprises - Cyber Café</p>
<p class="tel">tel. : 02 40 12 46 54</p>
</div>
<div id="conteneur">
<div id="menugauche" class="menugauche">
</div>
<div id="titre" class="titre">
</div>
<div id="soustitre01"class="soustitre">
</div>
<div id="speech01" class="speech">
</div>
</div>
</body>
</html>
mes CSS:
body.css:
/* elements de base */
/* definition margin et padding general pour limiter les problemes entre ie et ff */
* {margin:0;padding:0;border:0;}
body {
background-image:url(images/fond_de_site.jpg);
text-align: center; /* correction du bug de centrage IE */
}
/* définition des conteneur */
#conteneurentete {
position: relative; /* on positionne le conteneur du header */
padding: 0px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
width: 910px;
text-align: left;
}
#conteneur {
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
width: 910px;
text-align: left;
background-image:url(images/fond_conteneur.jpg);
background-repeat: repeat;
}
header.css:
.entete{
margin-left: auto;
margin-right: auto;
position:relative;
width:910px;
height:226px;
background-image:url(images/header/visuelheader.jpg);
}
.menucyber{
position:absolute;
top:83px;
width: 219px;
}
.carremenu{
position:absolute;
top:88px;
left: 227px;
}
li{
text-align:right;
list-style-type: none;
line-height:1.05;
background-image:url(images/header/separateur.gif);
background-repeat:no-repeat;
background-position:right bottom;
}
a{
font-family: Arial;
font-size: 12px;
color: #fff;
text-decoration:none;
}
a:hover{
font-family: Arial;
font-size: 12px;
color: #3DA2F0;
}
a:active{
font-family: Arial;
font-size: 12px;
color: #234698;
text-decoration:none;
}
a:visited{
font-family: Arial;
font-size: 12px;
color: #fff;
text-decoration:none;
}
.baseline{
position:absolute;
top:18px;
left:28px;
font-family: Arial;
font-size: 11px;
color: #fff;
}
.tel{
position:absolute;
top:18px;
left:765px;
font-family: Arial;
font-size: 12px;
font-weight:800;
color: #234698;
}
surmesure.css:
.fond{
margin-left: auto;
margin-right: auto;
position:relative;
width:910px;
background-image:url(images/fond_conteneur.jpg);
background-repeat: repeat;
}
.menugauche{
margin-left:15px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
position:relative;
top:0px;
float:left;
width:212px;
height:640px;
background-image:url(images/surmesure/colonnegauche.jpg);
}
.titre{
position:relative;
margin-top:11px;
float:left;
top:0px;
width:615px;
height:102px;
background-image:url(images/surmesure/titrePCsurmesure.jpg);
}
Si vous pouviez m'indiquez comment faire pour que dans firefox le background s'affiche comme sous ie, ca m'arrangerait beaucoup^^
Merci
//EDIT: au passage , si j'ai fait des grosses betises indiquez les moi.
Modifié par LhO (03 Aug 2005 - 21:53)
