Bonjour à tous !
Je suis en train de développer une interface et je coince sur un point. Je n'ai trouvé aucune réponse à mon problème pour l'instant.
Je souhaiterais faire 4 colonnes de même hauteur, tout marche bien sous IE 6 et 7 mais sous Firefox, les colonnes sans contenu (juste un background qui se répète) sont invisibles. Ce sont les div col_1 et col_4 qui me posent problème.
Lorsque je met un contenu dans ces deux div tout se passe bien mais justement ils doivent être vides...
Voici le code HTML :
et le CSS correspondant :
La page est disponible à l'adresse suivante : http://perso.euphonia-design.fr/interface.html
Merci d'avance pour votre aide !
Modifié par Spacedementia (22 Dec 2006 - 18:59)
Je suis en train de développer une interface et je coince sur un point. Je n'ai trouvé aucune réponse à mon problème pour l'instant.
Je souhaiterais faire 4 colonnes de même hauteur, tout marche bien sous IE 6 et 7 mais sous Firefox, les colonnes sans contenu (juste un background qui se répète) sont invisibles. Ce sont les div col_1 et col_4 qui me posent problème.
Lorsque je met un contenu dans ces deux div tout se passe bien mais justement ils doivent être vides...
Voici le code HTML :
<!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>Interface Arte</title>
<link href="styles/style_principal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fond_bois"></div>
<div id="bloc_principal">
<!-- ////////////////////////////////////////////////////////////////****************************** -->
<div id="bloc_icones">
<span><img src="images/interface_principale/arte_coiffure_accueil.gif" /></span><span><img src="images/interface_principale/arte_coiffure_contact.gif" /></span><span><img src="images/interface_principale/arte_coiffure_plan.gif" /></span></div>
<!-- //////////////////////////////////////////////////////////////// -->
<div id="bloc_logo_flash"><span><img src="images/interface_principale/arte_coiffure_01.jpg" /></span><span><img src="images/interface_principale/arte_coiffure_02.jpg" /></span></div>
<!-- //////////////////////////////////////////////////////////////// -->
<div id="bloc_3"></div>
<!-- //////////////////////////////////////////////////////////////// -->
<div id="bloc_4"><div id="col_1"></div><div id="col_2">Test</div><div id="col_3">Test2</div><div id="col_4"></div></div>
<!-- ////////////////////////////////////////////////////////////////****************************** -->
</div>
</body>
</html>
et le CSS correspondant :
html {font-size: 100%;}
body {margin:0; padding:0; background-image:url(../images/arte_background.gif); font-size: 1em; font-weight:normal; font-family:Verdana, Arial, Helvetica, sans-serif;}
/************************************************************************************************************/
/*Mise en page fond******************************************************************************************/
/************************************************************************************************************/
#fond_bois { position:absolute; left:0px; top:55px; height:443px; width:100%; background-image:url(../images/interface_principale/arte_fond_bois.jpg); background-repeat:repeat-x; }
/************************************************************************************************************/
/*Mise en page principale************************************************************************************/
/************************************************************************************************************/
#bloc_principal { position:relative; width:918px; margin-left:auto; margin-right:auto; /*border:#00FF00 1px solid;*/}
#bloc_icones { padding-top:8px; width:100%; text-align:right;}
#bloc_logo_flash { width:100%; height:208px; /*border:#00FF00 1px solid;*/}
#bloc_3 { width:918px; height:20px; background-image:url(../images/interface_principale/arte_coiffure_03.jpg); background-repeat:repeat-y;/*border:#00FF00 1px solid;*/}
#bloc_4 { width:918px; /*border:#0000FF 1px solid;*/}
#col_1 { float:left; width:17px; height:100%; background-image:url(../images/interface_principale/arte_coiffure_04.jpg); background-repeat:repeat-y;}
#col_2 { float:left; width:246px; height:100%; background-color:#00FF00;}
#col_3 { float:left; width:639px; height:100%; background-color:#FF9900;}
#col_4 { float:left; width:16px; height:100%; background-image:url(../images/interface_principale/arte_coiffure_05.jpg); background-repeat:repeat-y;}
La page est disponible à l'adresse suivante : http://perso.euphonia-design.fr/interface.html
Merci d'avance pour votre aide !
Modifié par Spacedementia (22 Dec 2006 - 18:59)
