Bonjour
Après plusieurs années de développement en utilisant les tableaux, je m'oblige à développer de plus en plus avec le CSS et je bute déjà sur un problème tout bête.
Au lieu de faire un grand discours, voici ce que donne ma page simplifiée sur IE : http://www.freelance-internet.com/ie.jpg
C'est le résultat que je souhaite obtenir.
Par contre, sur firefox : http://www.freelance-internet.com/ff.jpg
Le div CONTENU a un fond de couleur vert et contient un div jaune + un div orange. On devrait donc retrouver le vert à droite du orange mais non...
Voici le code de ma page :
Et celui de la CSS
C'est forcément tout con mais je ne trouve pas...
Modifié par freelance28 (24 May 2008 - 22:32)
Après plusieurs années de développement en utilisant les tableaux, je m'oblige à développer de plus en plus avec le CSS et je bute déjà sur un problème tout bête.
Au lieu de faire un grand discours, voici ce que donne ma page simplifiée sur IE : http://www.freelance-internet.com/ie.jpg
C'est le résultat que je souhaite obtenir.
Par contre, sur firefox : http://www.freelance-internet.com/ff.jpg
Le div CONTENU a un fond de couleur vert et contient un div jaune + un div orange. On devrait donc retrouver le vert à droite du orange mais non...
Voici le code de ma page :
<!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>Document sans titre</title>
<link href="../style/general4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur">
<!-- Début header -->
<div id="header">
MON HEADER
</div>
<!-- Fin header -->
<!-- Début contenu -->
<div id="contenu">
<div id="HomeColonne1">
<p>COLONNE1<br />
COLONNE1<br />
COLONNE1</p>
<p><br />
FOND JAUNE<br />
<br />
COLONNE1<br />
COLONNE1<br />
COLONNE1<br />
</p>
</div>
<!-- FIN COL1 -->
<div id="HomeColonne2">COLONNE2<br />
COLONNE2<br />
COLONNE2<br />
<br />
FOND ORANGE <br />
<br />
COLONNE2<br />
COLONNE2<br />
COLONNE2</div>
</div>
<!-- FIN CONTENU -->
<!--<div id="footer">FOOTER</div> -->
</div>
<!-- FIN CONTENEUR -->
</body>
</html>
Et celui de la CSS
*{
padding: 0px;
margin: 0px;
}
body {
background-image: url(../images/background.jpg);
background-repeat: repeat;
background-position: center top;
/*margin: 0px;
padding: 0px;*/
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
}
#conteneur {
width: 820px;
margin: auto;
/*text-align:center;*/
height: 100%;
/*border:1px solid #FFFFFF;*/
}
/* HEADER ----------------------------------------------------------------------- */
#header {
width:100%;
background-image: url(../images/header/fond_pub.jpg);
background-repeat: repeat-x;
height:130px;
}
#logo {
width: 270px;
float:left;
}
#pub1 {
width:549px;
float:left;
margin-top: 20px;
margin-left: 1px;
}
#pub1 img {
border: 1px solid #3C3C3C;
}
/* CONTENU ----------------------------------------------------------------------- */
#contenu {
width: 798px;
/*height:400px;*/
height:100%;
margin-top: 4px;
margin-left: 18px;
border: 1px solid #FFFFFF;
background-color: #33CC33;
}
/* HOME ----------------------------------------------------------------------- */
#HomeColonne1 {
width: 290px;
float:left;
height:100%;
background-color: #FFFF00;
color: #000000;
}
#HomeColonne2 {
width: 210px;
float:left;
height:100%;
background-color: #FF6600;
}
C'est forcément tout con mais je ne trouve pas...
Modifié par freelance28 (24 May 2008 - 22:32)