Bonjour,
J'ai fait ce tuto très bien fait http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-trois-colonnes-positionnement-flottant
Dans la colonne de gauche j'ai une photo, dans celle du milieu une liste et dans celle de droite, j'ai un menu vertical déroulant "jquerry" qui peut être plus haut suivant la rubrique où le son trouve dans ce menu. Ma colonne "photo" qui n'est pas en float est plus petite en hauteur que le menu mais égale à la colonne des détails.
Le problème est le suivant.. comme le menu est en float right, sous [b]Firefox uniquement, lorsque le menu jquerry descend, le contenu ne suit pas. Le footer descend parfaitement, mais le contenant (qui englobe un div où se trouve mes 3 colonnes) ne s'adapte pas. Pour une fois, sous les IE cela fonctionne et l'image de fond de mon div Corps suit très bien...
Voici une partie du code CSS pour mieux comprendre :
Dans l'xhtml j'ai le body qui englobe le container qui englobe le corps qui englobe mes 3 div pour les colonnes. Mon image de fond se trouve dans le div corps. Le footer se trouve sous le div Corps.
Les 3 div des colonnes sont dans cet ordre : Photo - Sidebar - Details
J'ai cherché sur le forum mais je ne trouve rien de précis sur ce sujet.
Si quelqu'un est déjà passé par là et qu'il a une solution, je serai ravi de la connaitre.
Merci d'avance.
Mike[/b]
Modifié par mgraph (25 Apr 2008 - 18:19)
J'ai fait ce tuto très bien fait http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-trois-colonnes-positionnement-flottant
Dans la colonne de gauche j'ai une photo, dans celle du milieu une liste et dans celle de droite, j'ai un menu vertical déroulant "jquerry" qui peut être plus haut suivant la rubrique où le son trouve dans ce menu. Ma colonne "photo" qui n'est pas en float est plus petite en hauteur que le menu mais égale à la colonne des détails.
Le problème est le suivant.. comme le menu est en float right, sous [b]Firefox uniquement, lorsque le menu jquerry descend, le contenu ne suit pas. Le footer descend parfaitement, mais le contenant (qui englobe un div où se trouve mes 3 colonnes) ne s'adapte pas. Pour une fois, sous les IE cela fonctionne et l'image de fond de mon div Corps suit très bien...
Voici une partie du code CSS pour mieux comprendre :
body{
background-color:#191919;
font-family:Trebuchet,Verdana Arial,Helvetica,sans-serif;
margin:0;
font-size:100.01%;
color: #fff;
}
div#container{
/*overflow:hidden;*/
position:relative;
padding: 0px;
width:100%;
margin:0 auto;
background-color:#353535;
}
/* ---- CORPS ---- */
div#corps{
width:926px;
margin:0 auto;
padding:10px 25px 10px 25px;
background:url("image de fond du corps") 0 0 repeat-y;
}
/* ---------------- 3 COLONNES ---------------- */
/* PHOTO */
div#photo{
float:left;
width:349px;
height:522px;
background:1e1e1e;
margin-top:6px;
clear:both;
}
/* SIDEBAR */
div#sidebar{
float:right;
width:224px;
}
/* DETAILS */
div#details{
/*background:#000 url('image de fond de la colonne details') 0 0px no-repeat;*/
background-color:#1e1e1e;
margin-left:373px;
margin-right:248px;
height:522px;
margin-top:6px;
}
div#footer{
background:transparent url("image du footer") 0 0 no-repeat;
clear:both;
height:35px;
margin:0 auto;
padding-top:12px;
text-align:center;
width:976px;
font-size:12px;
}
Dans l'xhtml j'ai le body qui englobe le container qui englobe le corps qui englobe mes 3 div pour les colonnes. Mon image de fond se trouve dans le div corps. Le footer se trouve sous le div Corps.
Les 3 div des colonnes sont dans cet ordre : Photo - Sidebar - Details
J'ai cherché sur le forum mais je ne trouve rien de précis sur ce sujet.
Si quelqu'un est déjà passé par là et qu'il a une solution, je serai ravi de la connaitre.
Merci d'avance.
Mike[/b]
Modifié par mgraph (25 Apr 2008 - 18:19)