28172 sujets

CSS et mise en forme, CSS3

Difficulte CSS pour la création d'un Cadre autour d'un site

Bonjour,

J'ai vainement essayé de créer un contour à mon site avec une couleur de fond pour le BODY et je n'y arrive pas. C'est mon agence de Comm qui a codé mon site, et comme nous n'avons plus de relations, je veux le faire moi même. Mais lorsque j'applique un :

background à mon Body, et un autre à ma DIV qui contient le site, la couleur du Body passe au dessus de la DIV Global (ou Conteneur) ... Et pourtant tout y est. La DIV global englobe bien tout le site. C'est à ne rien y comprendre pour moi.

Je veux juste mettre une couleur de fond et un cadre, mais impossible... Si quelqu'un peut m'aiguiller en me mettant sur la voie, parce que j'ai tout essayé mais impossible.

Voici le code de la PAGE index.html et ensuite, je mets le code CSS. Merci beaucoup si quelqu'un pouvait m'aider.

Le code est long : pour une meilleure visibilité, vous pouvez vous rendre à http://www.feniqia.us (je ne veux pas faire de pub mais c'est plus simple de voir le site)


Et voici le CSS

[CODE]
/******* GENERAL *******/
@import url(style_editeur.css);


body, table, div{
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:12px;
color:#3F3D40;
margin:0;
padding:0;
}

input, option, select, textarea{
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:12px;
color:#3F3D40;
}

img{
border:none;
margin:0;
padding:0;
}

a{
color:#3F3D40;
text-decoration:none;
}

h1, h2, h3, h4, h5{
margin:0;
padding:0;
font-weight:normal;
}

h1{font-size:16px;text-align:left;}
h2{font-size:15px;text-align:left;}

#global{
position:relative;
width:850px;
margin:20px auto;
}

.li_haut{
float:left;
width:820px;
padding:0 15px 10px 15px;
}

.bloc_drapeau{
float:left;
width:35px;
}

.bloc_rech_produit{
float:left;
width:230px;
}

.motcle{
width:200px;
font-size:11px;
padding:0;
margin:0;
}

.bloc_connect{
float:right;
width:230px;
}

.nom_connect{
float:left;
width:230px;
font-weight:bold;
padding-bottom:4px;
border-bottom:1px solid #3F3D40;
font-size:10px;
}

.lien_connect{
float:left;
width:230px;
padding-top:4px;
font-size:10px;
}

.bloc_non_connect{
float:right;
width:230px;
text-align:right;
font-size:10px;
}

.ligne_separ{
float:left;
width:850px;
height:5px;
}

.menu_logo{
float:left;
width:850px;
padding-top:5px;
}

.menu_cosm, .menu_cuis{
float:left;
width:194px;
padding-left:4px;
}

.ligne_menu, .ligne_menu2{
float:left;
width:194px;
height:20px;
line-height:20px;
font-size:11px;
letter-spacing:2px;
}

.ligne_menu{border-bottom:1px dashed #E7E7E7;}

.menu_cosm .ligne_menu a, .menu_cosm .ligne_menu2 a{
color:#A52459;
}

.menu_cuis .ligne_menu a, .menu_cuis .ligne_menu2 a{
color:#1A9EA4;
}

.menu_cosm .ligne_menu a:hover, .menu_cuis .ligne_menu a:hover, .menu_cosm .ligne_menu2 a:hover, .menu_cuis .ligne_menu2 a:hover{
font-weight:bold;
}

.titre_menu{
float:left;
width:194px;
height:28px;
}

.titre_menu_cosm, .titre_menu_cuis{
float:left;
width:194px;
height:28px;
line-height:28px;
text-align:center;
color:#FFF;
font-size:15px;
display:block;
cursor:pointer;
font-weight:bold;
}
.titre_menu_cosm a, .titre_menu_cuis a{color:#FFF;}
.titre_menu_cosm{background-color:#A62659;}
.titre_menu_cuis{background-color:#00A4A6;}

#logo{
float:left;
width:420px;
}

#menu{
float:left;
width:430px;
}

#contenu{
float:left;
width:850px;
}

#footer{
float:left;
width:850px;
}

#footer a{
color:#707173;
font-size:11px;
}

.footer_logo{
float:left;
width:55px;
}

.footer_1, .footer_2, .footer_3{
float:left;
padding:10px;
color:#707173;
height:60px;
}

.footer_1{
width:159px;
}

.footer_2{
width:177px;
border-left:1px solid #DCDCDC;
}

.footer_3{
width:189px;
border-left:1px solid #DCDCDC;
}

.bas_footer{
float:left;
width:850px;
padding-top:15px;
color:#707173;
font-size:11px;
text-align:center;
}

.td_bulle_produit{
width:85px;
height:85px;
text-align:center;
padding:0 2px;
}

.bulle_fond_bleu1{background:url(imgs/fond_produit_bleu1.jpg) no-repeat top left;}
.bulle_fond_bleu2{background:url(imgs/fond_produit_bleu2.jpg) no-repeat top left;}
.bulle_fond_bleu3{background:url(imgs/fond_produit_bleu3.jpg) no-repeat top left;}
.bulle_fond_bleu4{background:url(imgs/fond_produit_bleu4.jpg) no-repeat top left;}

.bulle_fond_marron1{background:url(imgs/fond_produit_marron1.jpg) no-repeat top left;}
.bulle_fond_marron2{background:url(imgs/fond_produit_marron2.jpg) no-repeat top left;}
.bulle_fond_marron3{background:url(imgs/fond_produit_marron3.jpg) no-repeat top left;}
.bulle_fond_marron4{background:url(imgs/fond_produit_marron4.jpg) no-repeat top left;}

.bulle_fond_rose1{background:url(imgs/fond_produit_rose1.jpg) no-repeat top left;}
.bulle_fond_rose2{background:url(imgs/fond_produit_rose2.jpg) no-repeat top left;}
.bulle_fond_rose3{background:url(imgs/fond_produit_rose3.jpg) no-repeat top left;}
.bulle_fond_rose4{background:url(imgs/fond_produit_rose4.jpg) no-repeat top left;}

.bulle_fond_vert1{background:url(imgs/fond_produit_vert1.jpg) no-repeat top left;}
.bulle_fond_vert2{background:url(imgs/fond_produit_vert2.jpg) no-repeat top left;}
.bulle_fond_vert3{background:url(imgs/fond_produit_vert3.jpg) no-repeat top left;}
.bulle_fond_vert4{background:url(imgs/fond_produit_vert4.jpg) no-repeat top left;}

a.infobulle{
position:relative;
}

a.infobulle span{
display: none
}

a.infobulle:hover span{
display:block;
position:absolute;
top:-30px;
left:0;
width:153px;
z-index:30;
}

.bulle_centre{
background:url(imgs/bulle_produit_centre.png) repeat-y top left;
padding:0 17px;
}

.ti_bulle{
width:119px;
color:#FFF;
font-size:10px;
font-weight:bold;
padding:5px 0;
}

.ti_bulle_accueil{background-color:#99990F;border-bottom:4px solid #81821D;}
.ti_bulle_cuis{background-color:#1A9EA4;border-bottom:4px solid #108083;}
.ti_bulle_cosm{background-color:#A52459;border-bottom:4px solid #AE2651;}
.ti_bulle_actu{background-color:#5A3327;border-bottom:4px solid #3C150D;}
.ti_bulle_cosm_6{background-color:#D26D25;border-bottom:4px solid #A9411B;}
.ti_bulle_cosm_5{background-color:#B9B68D;border-bottom:4px solid #3BA8A8;}
.ti_bulle_cosm_17{background-color:#209495;border-bottom:4px solid #13525C;}
.ti_bulle_cosm_15{background-color:#D26D25;border-bottom:4px solid #442720;}
.ti_bulle_cosm_16{background-color:#D882A9;border-bottom:4px solid #209495;}
.ti_bulle_cosm_18{background-color:#E6A136;border-bottom:4px solid #442720;}
.ti_bulle_cosm_13{background-color:#959E09;border-bottom:4px solid #442720;}
.ti_bulle_cosm_19{background-color:#2E9AA8;border-bottom:4px solid #442720;}
.ti_bulle_cosm_20{background-color:#209495;border-bottom:4px solid #442720;}



/******* ACCUEIL *******/
.bloc_accueil{
float:left;
width:850px;
}

.accueil_edito{
float:left;
width:164px;
height:197px;
padding:10px 190px 10px 65px;
overflow:hidden;
background:url(imgs/accueil_edito.jpg) no-repeat top left;
margin-right:1px;
}

.accueil_ss_menu{
float:left;
width:194px;
height:217px;
padding-left:4px;
}

.accueil_haut_droit{
float:left;
width:30px;
height:217px;
padding-left:3px;
}

.accueil_produits{
float:left;
width:424px;
display: table-cell;
padding-bottom: 2002em;
margin-bottom: -2000em;
}

.actu_rub_accueil{
float:left;
width:167px;
padding:15px;
border-left:1px solid #DCDCDC;
text-align:justify;
display: table-cell;
padding-bottom: 2002em;
margin-bottom: -2000em;
}

.lien_cosm, .lien_cosm_rose{
padding-left:25px;
height:19px;
line-height:19px;
}

.lien_cosm{background:url(imgs/plus_cosm.jpg) no-repeat top left;}
.lien_cosm_rose{background:url(imgs/plus_cosm_rose.jpg) no-repeat top left;}

.lien_cosm a, .lien_cosm_rose a{
color:#A52459;
}

.lien_cuis, .lien_cuis_bleu{
padding-left:25px;
height:19px;
line-height:19px;
}

.lien_cuis{background:url(imgs/plus_cuis.jpg) no-repeat top left;}
.lien_cuis_bleu{background:url(imgs/plus_cuis_bleu.jpg) no-repeat top left;}

.lien_cuis a, .lien_cuis_bleu a{
color:#1A9EA4;
}

.lien_actu_gen{
background:url(imgs/plus_gen.jpg) no-repeat top left;
padding-left:23px;
height:18px;
line-height:18px;
}

.lien_actu_gen a{
color:#3C150E;
}

.plus_accueil{
background:url(imgs/plus_accueil.jpg) no-repeat top left;
padding-left:23px;
height:19px;
line-height:19px;
color:#3C150E;
}

.actu_gen_accueil{
float:left;
width:335px;
height:99px;
margin:15px 15px 10px 15px;
background:url(imgs/fond_actu_accueil.jpg) no-repeat top left;
padding:15px;
overflow:hidden;
color:#3C150E;
text-align:justify;
}

.actu_gen_accueil a{
color:#3C150E;
}

.evenement_accueil{
float:left;
width:365px;
margin:15px 15px 20px 15px;
}

.ti_selection_accueil{
float:left;
width:355px;
height:25px;
padding-left:40px;
}

.liste_selection_accueil{
float:left;
width:356px;
padding:10px 0 0 40px;
}

.ti_selection_accueil2{
float:left;
width:355px;
height:25px;
padding-left:18px;
}

.liste_selection_accueil2{
float:left;
width:356px;
padding:10px 0 0 18px;
}


/******* CONTENUS ET CONTACT *******/
.header_contenu{
float:left;
width:850px;
height:103px;
}

.header_contenu_txt{
float:left;
width:211px;
height:93px;
padding:5px 0 5px 65px;
background:url(imgs/contenus_header.jpg) no-repeat top left;
overflow:hidden;
text-align:justify;
}

.header_contenu_img{
float:left;
width:574px;
height:103px;
}

.bloc_contenu, .bloc_contact{
float:left;
width:590px;
padding:35px 0 30px 33px;
text-align:justify;
}

.bloc_contenu_2, .bloc_contact{
float:left;
width:610px;
padding:35px 0 30px 33px;
text-align:justify;
}

.bloc_contact input, .bloc_contact textarea, .bloc_contact select{
border:1px solid #5A3327;
}

.contact_col{
float:left;
width:295px;
}

.contact_haut{
float:left;
width:590px;
padding-bottom:20px;
}

.contact_li{
float:left;
width:295px;
padding:4px 0;
}

.contact_nom{
float:left;
width:80px;
}

.contact_champ{
float:left;
width:215px;
}

.contact_bas{
float:left;
width:590px;
padding-top:20px;
}

.contact_bas_gauche{
float:left;
width:295px;
font-size:10px;
}

.contact_bas_droite{
float:left;
width:295px;
text-align:right;
}


/******* ACCUEIL CUISINE ET COSMETIQUES *******/
.ligne_cuis, .ligne_cosm{
float:left;
width:850px;
height:6px;
}
.ligne_cuis{background-color:#1BA5A7;}
.ligne_cosm{background-color:#A52459;}

.header_rub_accueil{
float:left;
width:850px;
height:217px;
padding-top:6px;
}

.header_cuis_accueil_txt, .header_cosm_accueil_txt{
float:left;
width:171px;
height:217px;
padding:5px 0 5px 65px;
overflow:hidden;
text-align:justify;
}
.header_cuis_accueil_txt{background:url(imgs/header_cuis_accueil.jpg) no-repeat top left;}
.header_cosm_accueil_txt{background:url(imgs/header_cosm_accueil.jpg) no-repeat top left;}

.header_cuis_accueil_txt p, .header_cosm_accueil_txt p{
margin:0;
padding:0;
}

.header_rub_accueil_img{
float:left;
width:614px;
height:217px;
}

.accueil_rub_gauche{
float:left;
width:380px;
padding:15px 22px 20px 22px;
}

.actu_accueil_cuis, .actu_accueil_cosm{
float:left;
width:350px;
height:113px;
padding:15px;
overflow:hidden;
text-align:justify;
}
.actu_accueil_cuis{background:url(imgs/accueil_cuis_bg_actu.jpg) no-repeat top left;}
.actu_accueil_cosm{background:url(imgs/accueil_cosm_bg_actu.jpg) no-repeat top left;}

.ti_promo_rub{
float:left;
width:355px;
height:26px;
padding:25px 0 0 10px;
}

.liste_selection{
float:left;
width:356px;
padding-top:10px;
}

.bt_autour_rub{
float:left;
width:356px;
height:48px;
padding:30px 0 0 14px;
}

.accueil_rub_droite{
float:left;
width:405px;
padding:30px 0 20px 21px;
}

.ti_selection_rub{
float:left;
width:355px;
height:25px;
}

.ti_recette_kdo{
float:left;
width:355px;
height:26px;
padding-top:32px;
}

.bloc_recette_kdo{
float:left;
width:355px;
padding-top:10px;
}

.gd_img_recette_kdo{
float:left;
width:140px;
padding-right:15px;
text-align:center;
}

.ss_img_recette, .ss_img_kdo{
width:140px;
padding:4px 0;
color:#FFF;
font-weight:bold;
font-size:10px;
}
.ss_img_recette{background-color:#1A9EA4;}
.ss_img_kdo{background-color:#A52459;}

.detail_recette_kdo{
float:left;
width:200px;
text-align:justify;
}

.txt_recette_kdo{
float:left;
width:200px;
padding-bottom:15px;
}

.pt_img_recette_kdo{
float:left;
width:66px;
}

.rech_cosmetique_1, .rech_cosmetique_2{
float:left;
height:89px;
}

.rech_cosmetique_1{width:377px;}
.rech_cosmetique_2{padding-top:30px;width:347px;}

.tab_rech td, .tab_rech2 td{
padding:5px 0 5px 5px;
color:#2C110C;
font-size:13px;
font-weight:bold;
}

.tab_rech select{
width:180px;
}

.tab_rech2 select{
width:265px;
}


/******* ACTUS GENERALES *******/
.actu_gauche{
float:left;
width:424px;
}

.actu_gen_edito, .actu_cuis_edito, .actu_cosm_edito, .actu_cuis_edito_2, .actu_cosm_edito_2{
float:left;
width:194px;
height:98px;
padding:10px 160px 10px 70px;
overflow:hidden;
text-align:justify;
}

.actu_gen_edito{background:url(imgs/actu_gen_edito.jpg) no-repeat top left;}
.actu_cuis_edito, .actu_cuis_edito_2{background:url(imgs/actu_cuis_edito.jpg) no-repeat top left;}
.actu_cosm_edito, .actu_cosm_edito_2{background:url(imgs/actu_cosm_edito.jpg) no-repeat top left;}

.actu_cuis_edito_2 p, .actu_cosm_edito_2 p{
margin:0;
padding:0;
}

.txt_actu_select{
float:left;
width:329px;
padding:25px 60px 20px 35px;
text-align:justify;
}

.comment_actu_select{
float:left;
width:355px;
padding:0 34px 30px 35px;
text-align:justify;
}

.comment_actu_select input{
border:1px solid #D5CDCB;
width:290px;
}

/*** NEW ***/
.bloc_actu_select{
float:left;
width:355px;
padding:15px 44px 10px 25px;
}

.actu_select_cosm, .actu_select_cuis, .actu_select_gen{
float:left;
width:325px;
padding:10px 15px;
text-align:justify;
}
.actu_select_cosm{background-color:#EFE5EA;}
.actu_select_cuis{background-color:#E7EDEE;}
.actu_select_gen{background-color:#DCD2D0;}

.bloc_comment_actu{
float:left;
width:355px;
padding:10px 44px 30px 25px;
text-align:justify;
}

.bloc_comment_actu input{
border:1px solid #D5CDCB;
width:290px;
}
/*** NEW ***/

.actu_centre{
float:left;
width:392px;
}

.liste_actu_gen, .liste_actu_cuis, .liste_actu_cosm{
float:left;
width:337px;
padding:15px 30px 30px 25px;
min-height:73px;
height:auto !important;
height:73px;
}

.liste_actu_gen{background-color:#DCD2D0;}
.liste_actu_cuis{background-color:#E7EDEE;}
.liste_actu_cosm{background-color:#EFE5EA;}

.ti_liste_actu{
float:left;
width:337px;
font-size:17px;
padding-bottom:5px;
}

.li_liste_actu_gen, .li_liste_actu_cuis, .li_liste_actu_cosm{
float:left;
width:314px;
padding:8px 0 8px 23px;
border-bottom:1px solid #B7ACAA;
background:url(imgs/plus_actu_gen.jpg) no-repeat top left;
}

.li_liste_actu_gen{background:url(imgs/plus_actu_gen.jpg) no-repeat top left;}
.li_liste_actu_cuis{background:url(imgs/plus_actu_cuis.jpg) no-repeat top left;}
.li_liste_actu_cosm{background:url(imgs/plus_actu_cosm.jpg) no-repeat top left;}

.ti_decouvre_actu{
float:left;
width:355px;
height:25px;
padding:30px 0 0 22px;
}

.liste_decouvre_actu{
float:left;
width:356px;
padding:10px 0 20px 21px;
}

.actu_droite{
float:left;
width:34px;
text-align:right;
}


/******* IDEES RECETTES ET CADEAUX *******/
.header_recette_txt{
float:left;
width:167px;
height:207px;
padding:5px 5px 5px 65px;
overflow:hidden;
text-align:justify;
background:url(imgs/header_recette_txt.jpg) no-repeat top left;
}

.header_recette_img{
float:left;
width:613px;
height:217px;
}

.contenu_idees{
float:left;
width:780px;
padding:30px 35px;
}

.titre_idees{
float:left;
width:780px;
padding-bottom:5px;
}

.separ_idees_cuis, .separ_idees_cosm{
float:left;
width:780px;
height:1px;
}

.separ_idees_cuis{background-color:#1A9EA4;}
.separ_idees_cosm{background-color:#A52459;}

.desc_idees{
float:left;
width:780px;
padding:10px 0 30px 0;
}

.txt_recette{
float:left;
width:485px;
padding-right:40px;
}

.liste_img_recette{
float:left;
width:100px;
}

.liste_img_recette img{
margin-bottom:10px;
}

.all_produit_idees{
float:left;
width:780px;
text-align:right;
}

.header_id_kdo_cuis_txt, .header_id_kdo_cosm_txt{
float:left;
width:167px;
height:206px;
padding:5px 5px 5px 65px;
overflow:hidden;
text-align:justify;
}

.header_id_kdo_cuis_txt{background:url(imgs/header_cuis_id_kdo_txt.jpg) no-repeat top left;}
.header_id_kdo_cosm_txt{background:url(imgs/header_cosm_id_kdo_txt.jpg) no-repeat top left;}

.header_id_kdo_img{
float:left;
width:613px;
height:217px;
}

.txt_idees{
float:left;
width:365px;
padding-right:70px;
}

.prix_idees{
float:left;
width:190px;
}

.prix_idees_cuis, .prix_idees_cosm{
float:right;
width:58px;
height:36px;
line-height:36px;
text-align:center;
color:#FFF;
font-weight:bold;
font-size:15px;
}

.prix_idees_cuis{background:url(imgs/bg_prix_id_cuis.jpg) no-repeat top left;}
.prix_idees_cosm{background:url(imgs/bg_prix_id_cosm.jpg) no-repeat top left;}

.promo_idees{
float:right;
width:127px;
padding-left:5px;
font-size:15px;
line-height:36px;
text-align:right;
}

.ajout_panier_idees{
float:left;
width:190px;
padding-top:20px;
text-align:right;
}

Modifié par cturkieh (12 Jul 2010 - 18:47)
Merci mais cela ne répond pas à ma question, je sais mettre la balise CSS Background.

Mais cela ne fonctionne pas : la couleur du BG empiète sur toute le site, alors même que j'applique un BG différent à ma DIV conteneur. C'est ca mon problème.

Quel'qu'un a t'il une idée ?
Salut,

Les éléments (div) contenus par ta DIV Conteneur étant flottants, ta DIV Conteneur n'a pas de hauteur. Si tu lui applique par exemple un
#global{overflow:auto}
puis une couleur différente du body, tu auras déjà pas mal avancé (après, il faudra quand même fignoler...)
Bonjour,

C'est normal.

Le problème est que le div "global ne s'étire pas avec son contenu.

En testant avec les couleurs on se rends compte que le global s' arrête au niveau de la partie supérieur fait un test mets du noir et tu verra que la barre ou se trouve tes drapeaux vire au noir.

Il suffit normalement de modifier la css du footer




#footer{
clear:both;
width:850px;
}


Là le global devrait prendre en compte les flottants et s'étirer sur toute la hauteur de la page.


EDIT: le temps que je teste et que je rédige je me suis fait grilled.

Par contre dans ce cas je suis pas sur qu'un overflow:auto soit judicieux (problème potentiel avec IE avec le haslayout si je dis pas de bêtises) vu qu'il y'a déjà un élément, le footer qui peux faire ce qu'il faut.
Modifié par knarf (12 Jul 2010 - 19:29)
Salut,

C'est assez rageant ta réponse qui tient en une phrase et qui de plus FONCTIONNE !!!

Alors, un grand merci.

Et je vais maintenant tâcher de comprendre pourquoi cela fonctionne, car effectivement j'avais entendu parler de overflow, mais la vérité, c'est que je ne comprends pas bien la fonction (même si j'ai lu quelques tutoriaux de overflow pour contenir un texte dans un cadre - apparemment obsolète)

Merci, merci merci
overflow est une solution... ton problème est généralement dénommé genre "dépassement des flottants". Tu tu trouveras des infos en cherchant avec ces termes (ou à peu près)
Oui overflow est une solution mais qui peux amener d'autres problèmes avec IE et son haslayout (comme je précise dans mon edit sur mon post précedent) en fonction de la construction du site et de la CSS. Là avec un clear:both on évite normalement tout effet de bord.
Modifié par knarf (12 Jul 2010 - 19:34)
ok Merci pour l'info.

Knarf, j'ai testé avec 


clear : both;


dans le Footer, effectivement le contenu repasse bien en blanc, sauf... le footer qui conserve la couleur du BG de body. Comme si le #global s'arrêtait à ce niveau. Peut etre que ce code, je devrais l'affecter à : une balise DIV vide que je rajoute en dessous de footer ?
Ha oui j'ai été un peu vite, la présence de flottants à l'intérieur du footer fait que cela ne fonctionne pas .

Donc un overflow c'est effectivement le plus simple comme l'a indiqué redkissifrott si cela ne pose pas de problème sur d'autres navigateurs.

Je voulais juste attirer l'attention sur le fait que l'overflow:auto n'est pas l'arme universel pour résoudre les problèmes de flottants à cause d'IE et qu'il faut savoir comment l'utiliser et dans quelles conditions.
Modifié par knarf (12 Jul 2010 - 20:01)
Du coup, je reviens vers toi, car le overflow: auto; a créé des Barres d'ajustement sur MOZILLA lorsque sur la Home Page je place le curseur de ma souris sur un des produits de 'This month's selection".

JE pense qu'il s'agit du overflow auto n'est ce pas ? As tu une idée pour l'enlever ?
Je ne vois pas de barres sur mon ordinateur, et elles me paraissent étonnantes dans la mesure où overflow ne doit les créer que si du contenu dépasse et qu'en l'occurrence la hauteur de ta DIV n'est pas contrainte.
Knarf évoquait plutôt je crois des problèmes potentiels avec Internet Explorer (qui a des comportements parfois "étonnants").
Si tu ne veux pas utiliser overflow, il te reste la solution d'ajouter un élément après le footer pour forcer le clear, mais cela introduit un élément qui n'a pas de justification sémantique...
Je ne vois pour ma part pas d'autres solutions mais je débute...D'autres t'éclaireront surement.
Je ne vois pas non plus de barre.

Sinon sans avoir testé plus que ça un overflow:auto et un clear:both sur #footer
Modifié par knarf (16 Jul 2010 - 17:49)
oui, pardon,

1 - j'étais absent semaine dernière
2 - la barre n'apparait que lorsque je rajoute un cadre supplémentaire au dessus de "This month's Selection"

3 Du coup quand la souris passe au dessus d'un produit, la petite pop-up s'ouvre et la cadre de la pop up devient plus grand que la hauteur de la div global donc il créé une barre, je crois que le pb vient de là.
vous pouvez tester à nouveau sur le site, j'ai rajouté un bandeau.
Sujet clos
Aller à