Bonjour,
Après plusieurs jours de travail, j'ai finalisé mon site en essayant d'intégrer de plus en plus un css moins bricolo et plus adapté à mes besoins.
Cependant, je me rends compte que sous IE6, j'ai un problème de positionnement.
Ma page se constitue ainsi:
------------------------header------------------------
--menugauche-- --content-- --menudroit--
------------------------footer------------------------
Hors, si sous IE7 et FF ca marche, sous IE6, mon content est déplacé sous les flux menugauche et menudroit, et je ne comprends pas trop pourquoi.
J'ai l'impression que l'espace nécessaire pour l'affichage de content est insuffisant et que donc, il est déplacé vers le bas.
Certes, voici donc mon css:
et le code source de ma page est ici http://www.1001degustations.com .
Pour informations, les blocs du css en question sont:
div#menugauche
div#blocmenugauche
div#menudroit
div#blocmenudroit
div#content (contenu central de la page).
(je ne copie colle pas le code pour pas trop allourdir, désolé d'avance si ce n'est pas correct).
Donc, auriez vous une idée pour résoudre mon problème?
Merci d'avance de votre patience.
Modifié par InsaneBrain (28 Aug 2007 - 11:46)
Après plusieurs jours de travail, j'ai finalisé mon site en essayant d'intégrer de plus en plus un css moins bricolo et plus adapté à mes besoins.
Cependant, je me rends compte que sous IE6, j'ai un problème de positionnement.
Ma page se constitue ainsi:
------------------------header------------------------
--menugauche-- --content-- --menudroit--
------------------------footer------------------------
Hors, si sous IE7 et FF ca marche, sous IE6, mon content est déplacé sous les flux menugauche et menudroit, et je ne comprends pas trop pourquoi.
J'ai l'impression que l'espace nécessaire pour l'affichage de content est insuffisant et que donc, il est déplacé vers le bas.
Certes, voici donc mon css:
/* ######BODY DE LA PAGE###########*/
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 11px Trebuchet MS, helvetica, sans-serif ;
background: #FDF5E6;
}
/* #################################*/
/* ######BALISES COMMUNES###########*/
.lien_noir{
color: #000000;
text-decoration:none;
}
.lien_noir:hover{
color: #000000;
text-decoration:underline;
}
a{
color: #BD7D2F;
text-decoration:none;
}
a:hover{
color:#d69f58;
text-decoration:underline;
}
.lienh3{
text-decoration:none;
}
.lienh3:hover{
text-decoration:none;
}
form{
display:inline;
}
input{
font: 10px Trebuchet MS, helvetica, sans-serif ;
}
select{
font: 10px Trebuchet MS, helvetica, sans-serif ;
}
table{
border-collapse:collapse;
}
.tableau_bordure{
border-style:solid;
border-width:1px;
border-color:#000000;
empty-cells:show;
}
.lien_vide:hover{
text-decoration:none;
}
/* ###########FORMULAIRE##########*/
fieldset{
background-color:#FFF2CC;
padding: 1em;
}
.hidden{
display: none;
}
.visible{
display:inline;
}
legend{
text-align:left;
}
label {
float: left; /*** Très important, ne pas suprimer ! ***/
width: 20%; /*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
text-align: right; /*** ... et ils sont alignés à droite... ***/
margin: 0;
padding: 0 .5em 0 0;
line-height: 1.8; /*** ... et centrés verticalement. ***/
}
.div_formulaire{
margin: 0;
padding: 0 .5em 0 0;
line-height: 1.8; /*** ... et centrés verticalement. ***/
}
.success{
border: 1px solid #dec39c;
background: #FFF2CC;
}
.failure{
border: 1px solid #CC0000;
}
div#div_erreur{
width: 400px;
padding:5px;
margin-top:20px;
margin-bottom:20px;
margin-left: auto;
margin-right: auto;
text-align:center;
}
div#titreForm, div#piedForm {
font: 10px Trebuchet MS, helvetica, sans-serif ;
font-weight:bold;
color: black;
background: #dec39c;
margin: 0;
padding: .5em;
}
div#piedForm {
text-align: right;
}
div#piedForm input {
font-weight: bold;
margin-left: 1em;
}
div#entete_comm input {
font-weight: bold;
margin-left: 1em;
}
div#corpForm {
border: 1px solid #dec39c;
color: black;
background: #FFF2CC;
margin: 0;
padding: 1em;
}
div#corpForm p {
padding: .2em 0;
margin: 0 0 .2em 0;
}
div#corpForm .focus {
background: beige;
color: black;
}
div#corpForm .normal {
background: white;
color: black;
}
div#admin img{
border-style:none;
}
/* #################################*/
/* ######CONTENEUR GLOBAL###########*/
div#conteneur
{
width: 900px ;
margin: 0 auto ;
text-align: left ;
border: 1px solid #000000 ;
background: #ffffff;
}
/* #################################*/
/* ######HAUT DE PAGE###########*/
div#header
{
height: 99px;
}
div#header img
{
height: 99px;
}
div#pubhaut{
background:#CCCCCC;
border: 1px solid #000000;
position:relative;
top: 3px;
left: 425px;
width: 470px;
height: 65px;
text-align: center;
}
div#subheader{
border-top: 1px solid #c9a685;
border-bottom: 1px solid #c9a685;
background:#dec39c;
padding:3px;
}
div#subheader h1
{
font-weight:bold;
font-size:12px;
display:inline;
}
/* #################################*/
/* ######MENU GAUCHE###########*/
div#img_bouchon
{
position:absolute;
background:url(../images/templates/bouchon.gif);
background-repeat:no-repeat;
width:100px;
height:50px;
z-index:15;
top: 653px;
margin-left:3px;
}
div#img_tonneau
{
position:absolute;
background:url(../images/templates/tonneaux.gif);
background-repeat:no-repeat;
width:100px;
height:50px;
z-index:15;
top: 318px;
margin-left:3px;
}
div#img_bouteille
{
position:absolute;
background:url(../images/templates/bouteilles.gif);
background-repeat:no-repeat;
width:100px;
height:50px;
z-index:15;
top: 143px;
margin-left:3px;
}
div#img_assiette
{
position:absolute;
background:url(../images/templates/assiette.gif);
background-repeat:no-repeat;
width:100px;
height:50px;
z-index:15;
top: 233px;
margin-left:3px;
}
div#img_verre
{
position:absolute;
background:url(../images/templates/verre.gif);
background-repeat:no-repeat;
width:100px;
height:50px;
z-index:15;
top: 440px;
margin-left:3px;
}
div#img_tire_bouchon
{
position:absolute;
background:url(../images/templates/tire_bouchon.gif);
background-repeat:no-repeat;
width:100px;
height:50px;
z-index:15;
top: 528px;
margin-left:3px;
}
/* #################################*/
/* ######MENU GAUCHE###########*/
div#menugauche
{
float:left;
margin:10px 5px ;
width:162px;
}
.entetemenug{
background: url("../images/templates/entete_menu.gif") no-repeat ;
height:20px;
width:162px;
}
.contentmenug
{
border-width: 1px;
border-style:solid;
border-color:#8f1010;
}
div#blocmenugauche table
{
width:162px;
border-spacing: 0px;
}
div#entete_bouchon
{
height:26px;
width:162px;
background: url("../images/templates/menu-bouchon-vert.png") no-repeat ;
}
div#entete_assiette
{
height:26px;
width:162px;
background: url("../images/templates/menu-assiette.png") no-repeat ;
}
div#entete_bouteille
{
height:26px;
width:162px;
background: url("../images/templates/menu-bouteille.png") no-repeat ;
}
div#entete_tonneau
{
height:26px;
width:162px;
background: url("../images/templates/menu-tonneau.png") no-repeat ;
}
div#entete_verre
{
height:26px;
width:162px;
background: url("../images/templates/menu-verre.png") no-repeat ;
}
div#entete_tire_bouchon
{
height:26px;
width:162px;
background: url("../images/templates/menu-tire-bouchon.png") no-repeat ;
}
div#menuh2 h2
{
height:20px;
width:162px;
font-size:12px;
color:#e9d1d1;
padding-left:39px;
padding-top:6px;
margin-bottom:0px;
margin-top:0px;
line-height:20px;
}
div#blocmenuadmin h2
{
background: url("../images/templates/entete_menud.gif") no-repeat ;
height:20px;
width:162px;
font-size:12px;
color:#e9d1d1;
padding-left:10px;
margin-bottom:0px;
margin-top:0px;
line-height:20px;
}
div#blocmenuadmin ul
{
border-width: 1px;
border-style:solid;
border-color:#8f1010;
margin:0px;
padding:0px;
}
div#blocmenugauche ul
{
border-width: 1px;
border-style:solid;
border-color:#8f1010;
margin:0px;
padding:0px;
}
div#imgvigne
{
background-image:url("../images/templates/vigne.gif");
background-repeat:no-repeat;
height:60px;
margin-top:10px;
}
div#blocmenuadmin li
{
list-style-type: none;
background-image: url("../images/templates/puce_menu.gif");
background-repeat: no-repeat;
background-position: 4% 50% ;
padding-left: 14px;
padding-top: 0px;
line-height:18px;
}
div#blocmenugauche li
{
list-style-type: none;
background-image: url("../images/templates/puce_menu.gif");
background-repeat: no-repeat;
background-position: 4% 50% ;
padding-left: 14px;
padding-top: 0px;
line-height:18px;
}
/* #################################*/
/* ###### MENU DROIT ###########*/
div#menudroit
{
float:right;
margin:10px 5px ;
width:162px;
}
div#prix
{
background-image:url("../images/templates/euro.gif");
background-repeat: no-repeat;
background-position: 8% 50% ;
padding-left: 32px;
padding-top: 0px;
line-height:18px;
}
div#prix_fiche
{
background-image:url("../images/templates/euro.gif");
background-repeat: no-repeat;
background-position: 0% 50% ;
padding-left: 18px;
padding-top: 0px;
line-height:18px;
}
div#blocmenudroit h2
{
background: url("../images/templates/entete_menud.gif") no-repeat ;
height:20px;
width:162px;
font-size:12px;
color:#e9d1d1;
padding-left:10px;
margin-bottom:0px;
margin-top:0px;
line-height:20px;
}
div#blocmenudroit ul
{
border-width: 1px;
border-style:solid;
border-color:#8f1010;
margin:0px;
padding:0px;
}
div#blocmenudroit table
{
width:162px;
border-spacing: 0px;
}
div#blocmenudroitblanc h2
{
background: url("../images/templates/entete_menud2.gif") no-repeat ;
height:20px;
width:162px;
font-size:12px;
color:#000000;
padding-left:10px;
margin-bottom:0px;
margin-top:0px;
line-height:20px;
}
div#blocmenudroitblanc ul
{
border-width: 1px;
border-style:solid;
border-color:#dec39c;
margin:0px;
padding:0px;
}
div#blocmenudroitblanc li
{
list-style-type: none;
background-image: url("../images/templates/puce_menu.gif");
background-repeat: no-repeat;
background-position: 4% 50% ;
padding-left: 14px;
padding-top: 0px;
line-height:18px;
}
/* #################################*/
/* ########## PAGE VIN #######*/
div#fiche_vin
{
width:544px;
border:solid 1px;
border-color:#dec69c;
}
div#img{
text-align:center;
}
div#div_haut_vin
{
background:url(../images/templates/div_haut_vin.gif);
width:480px;
height:54px;
}
.span_vin
{
margin-left:50px;
line-height:33px;
color:#000000;
font-size:14px;
font-weight:bold;
}
div#content_vin
{
border-left-width:1px;
border-right-width:1px;
border-top-width:0px;
border-bottom-width:0px;
border-style:solid;
border-color:#dec39c;
}
div#div_bas_vin
{
background:url(../images/templates/div_bas_vin.gif);
width:480px;
height:43px;
}
.cell_fiche_vin{
line-height:20px;
}
.table_fiche{
margin-top:4px;
}
div#entete_comm
{
width:542px;
height:20px;
background:#dec39c;
font: 10px Trebuchet MS, helvetica, sans-serif ;
font-weight:bold;
color: black;
background: #dec39c;
padding-top:4px;
padding-left:4px;
}
div#content_comm
{
width:540px;
border:1px solid;
border-color:#dec39c;
line-height:20px;
padding:2px;
}
/* ################################*/
/* ########## PAGE RECHERCHE #######*/
div#recherche ul
{
border-width: 1px;
border-style:solid;
border-color:#dec39c;
margin:0px;
margin-bottom:15px;
padding:0px;
}
div#recherche li
{
list-style-type: none;
background-image: url("../images/templates/puce_menu.gif");
background-repeat: no-repeat;
background-position: 4% 50% ;
padding-left: 34px;
padding-top: 0px;
line-height:18px;
}
/* ################################*/
/* ###### CONTENU CENTRAL ###########*/
div#content{
margin:10px 175px;
width:550px;
text-align:left;
}
/*###*/
div#content div#titre_accueil h2
{
background:none;
font-size:12px;
padding-left:5px;
margin:0px;
line-height:19px;
color:#8f1010;
}
/*###*/
div#content h2
{
background: url("../images/templates/h2_content.gif") no-repeat ;
font-size:12px;
padding-left:5px;
margin:0px;
line-height:19px;
width:546px;
height:19px;
}
div#content h3
{
display:inline;
font-size:12px;
padding-left:5px;
margin:0px;
line-height:19px;
width:546px;
height:19px;
color:#660000;
}
div#content table
{
width:100%;
padding:0px;
border-spacing:0px;
}
div#appellation h2
{
background:#efefef;
font-size:12px;
padding-left:5px;
margin:0px;
line-height:20px;
}
/* #################################*/
/* ###### PAGE DES CEPAGES ###########*/
div#liste_cepage table
{
width:546px;
border-collapse:collapse;
}
.pagination
{
height:30px;
background:#dec39c;
text-align:center;
}
.lien_pagination
{
color:#660000;
text-decoration:none;
}
.lien_pagination:hover
{
color:#660000;
text-decoration:undeline;
}
.titre_colonne
{
height:30px;
background:#dec39c;
text-align:center;
font-weight:bold;
}
div#liste_cepage td
{
border:solid 1px;
border-color:#000000;
}
/* #################################*/
/* ###### Blocs Page accueil ###########*/
div#bloc_gauche{
float:left;
width:265px;
border:1x solid;
height:110px;
margin-bottom:20px;
border:dashed 1px;
border-color:#f2e7d8;
padding:2px;
}
div#content div#bloc_droit h3
{
background:none;
font-size:11px;
padding-left:0px;
margin:0px;
color:#8f1010;
display:inline;
}
div#content div#bloc_gauche h3
{
background:none;
font-size:11px;
padding-left:0px;
margin:0px;
color:#8f1010;
display:inline;
}
div#bloc_droit{
float:right;
width:265px;
border:1x solid;
height:110px;
margin-bottom:20px;
border:dashed 1px;
border-color:#f2e7d8;
padding:2px;
}
.lien_rouge{
color:#8f1010;
}
.lien_rouge:hover{
color:#8f1010;
text-decoration:underline;
}
/* #####################################*/
/* ###### BLOC RESULTAT RECHERCHE ###########*/
table#result_vin{
margin-top:20px;
border:dashed 1px;
border-color:#f2e7d8;;
width:545px;
padding:2px;
}
td#image_vin{
width:90px;
text-align:center;
margin-top:5px;
}
div#content_resultat{
float:left;
vertical-align:top;
margin-top:5px;
line-height:25px;
display:inline;
}
div#prix3
{
background-image:url("../images/templates/euro.gif");
background-repeat: no-repeat;
background-position: 2% 50% ;
padding-left: 32px;
padding-top: 0px;
line-height:18px;
}
div#content div#content_resultat h2
{
background:none;
font-size:11px;
padding-left:0px;
margin:0px;
color:#8f1010;
display:inline;
}
/* #####################################*/
/* ###### ADMINISTRATION DES NOTES ###########*/
.bordure_dg{
border-style:solid;
border-left-width:1px;
border-right-width:1px;
border-bottom-width:0px;
border-top-width:0px;
border-color:#000000;
}
.bordure_d{
border-style:solid;
border-left-width:0px;
border-right-width:1px;
border-bottom-width:0px;
border-top-width:0px;
border-color:#dec39c;
}
div#notation td
{
border:solid 1px;
border-color:#000000;
}
/* #####################################*/
/* ###### FOOTER ###########*/
div#footer
{
clear:both;
text-align: center;
background:#dec39c;
margin: 0 ;
bottom:0px;
padding-right: 10px ;
line-height: 20px ;
}
/* #################################*/
/* ###### ADMINISTRATION ###########*/
div#admincontent{
float:left;
margin:10px ;
width:700px;
text-align:left;
}
div#admincontent h2
{
background-color:#dec39c;
font-size:12px;
padding-left:5px;
margin:0px;
line-height:19px;
width:700px;
height:19px;
}
et le code source de ma page est ici http://www.1001degustations.com .
Pour informations, les blocs du css en question sont:
div#menugauche
div#blocmenugauche
div#menudroit
div#blocmenudroit
div#content (contenu central de la page).
(je ne copie colle pas le code pour pas trop allourdir, désolé d'avance si ce n'est pas correct).
Donc, auriez vous une idée pour résoudre mon problème?
Merci d'avance de votre patience.
Modifié par InsaneBrain (28 Aug 2007 - 11:46)
