Ciao a tutti,
ho il sito con un layout a due colonne classico:
http://www.shishii.com/dummy/index.php
ma in alcuni casi si produce uno strano effetto, cioè parte della colonna sinistra viene "inghiottita" dal footer, ad es:
http://www.shishii.com/dummy/index.php?id=31
come vedete parte dei bottoni scompaiono sotto il footer. Ciò avviene quando il complesso degli elementi presenti a sinistra occupa più spazio verticale di quelli della colonna principale centrale.
Non capisco perchè ciò avviene.
Questo è il css che uso:
codice:html,body{ margin:0; padding: 0; height: 100%; } body { background-image: url(../img/background-4.gif); text-align: center; /*centra in IE 5.x */ font-family: verdana, "comic sans ms", arial, sans-serif; font-size: 80%; } DIV#container { width: 770px; margin: 0px auto; /*centra negli altri browsers*/ text-align: left; /*ripristina l' allineamento*/ position: relative; height:100%; color: #000000; background-color: #f7f7f7; background-image: url(../img/background-menu.gif); background-repeat: repeat-y; background-position: left top; } body>DIV#container{ height: auto; min-height: 100%; } TD { font-size: 80%; } H1 { font-size: 2.3em; } H2 { font-size: 1.5em; } H3 { font-size: 1.2em; } P, H1, H2, H3 {margin: 0px 0px 5px 0px;} A {color: blue; text-decoration: none;} A:hover {color: red; text-decoration: underline;} PRE, CODE { font-family: "courier new", courier, monospace; background-color: #e2e2e7; } .dt { font-weight:bold; color: black; } .sintassi { color: red; } .evidence { font-weight:bold; color: black; } .tt { font-family: "courier new", courier, monospace; } .small { font-size: 0.9em; } .sito { color: green; } .banner { vertical-align: top; position: absolute; right: 10px; } .title { width: 600px; padding-top: 10px; } .subtitle { width: 600px; background-color: #e2e2e7; margin-left: 20px; margin-top: 2px; padding-top: 1px; padding-bottom: 1px; padding-left: 1px; padding-right: 1px; } .time { width: 600px; padding-left: 20px; } .datetime_cr { padding-left: 60px; font-style: italic; } .datetime_mod { padding-left: 8px; font-style: italic; } .oratime { font-style: italic; } .newsletter { padding-left: 188px; } .cerca { padding-left: 24px; } .contatto { padding-left: 24px; } .feedrss { padding-left: 24px; } #ephemeridis { text-align: center; background-image: url(../img/sand-light.jpg); width: 310px; margin-left: 10px; float: right; padding-top: 0px; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; border-right-width: 2px; border-right-color: gray; border-right-style: inset; border-bottom-width: 2px; border-bottom-color: gray; border-bottom-style: inset; } .ephecorpo { font-size: 0.8em; font-style: italic; text-align: justify; text-indent: 15px; } .ephefonte { font-size: 0.7em; } /* Header 1 column */ #header_1 { vertical-align: top; background-color: #80ACFF; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; } #header_1 DIV A { color: #eeeeee; text-decoration: none; font-weight: bold; font-size: 15px; } #header_1 DIV A:hover { color: red; text-decoration: none; font-size: 15px; font-weight: bold; } #sub_header_1 { /*width: 230px;*/ vertical-align: top; text-align: left; padding-bottom: 5px; } #sub_header_2 { /*width: 540px;*/ vertical-align: top; text-align: center; } #sub_header_3 { border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; border-left: 1px solid #eeeeee; border-right: 1px solid #eeeeee; } /**********************************/ /* contenitore della colonna sinistra */ #menu { vertical-align: top; width: 120px; padding-top: 10px; float: left; } /* Menu 1 column */ #menu_1 { vertical-align: top; width: 120px; /*background-color: #80ACFF;*/ padding-top: 10px; /*float: left;*/ } #menu_1 DIV { width: 95%; } #menu_1 DIV A { color: black; text-decoration: none; } #menu_1 DIV A:hover { color: red; text-decoration: underline; } /* MENU 1, level 1, normal state (NO) */ #menu_1 DIV.menu1-level1-no { border-bottom: 1px dotted #999999; padding-top:5px; padding-left:5px; } /* MENU 1, level 1, active state (ACT) */ #menu_1 DIV.menu1-level1-act { font-weight:bold; padding-top:5px; padding-left:5px; background-color: #eeeeee; /* valido solo per IE e non per W3C FILTER: alpha(opacity=70,style=1);*/ } #menu_1 DIV.menu1-level1-act A { color:black; } /* MENU 1, level 2, normal state (NO) */ #menu_1 DIV.menu1-level2-no { font-size: 0.9em; padding-left:15px; } /* MENU 1, level 2, active state (ACT) */ #menu_1 DIV.menu1-level2-act { font-size: 0.9em; font-weight:bold; padding-left:15px; } #menu_1 DIV.menu1-level2-act A { color: #eeeeee; } /* MENU 1, level 3, normal state (NO) */ #menu_1 DIV.menu1-level3-no { font-size: 0.8em; padding-left:20px; } /* MENU 1, level 3, active state (ACT) */ #menu_1 DIV.menu1-level3-act { font-size: 0.8em; font-weight:bold; padding-left:20px; } #menu_1 DIV.menu1-level3-act A { color: #eeeeee; } /**********************************/ /* bannerLeft */ #bannerLeft { /*float: left;*/ width: 120px; position: relative; top: 0px; left: 0px; text-align: center; } /**********************************/ /* Corpo 1 column */ #content { vertical-align: top; width: 630px; text-align: justify; line-height: 1.4; /*background-image: url(../img/background-5.gif);*/ padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; margin-left: 120px; } #content DIV.lastupdate { font-size: 0.8em; line-height: 150%; text-align: left; color : #003366; /*dark blue */ } #content DIV.class-totop { font-size: 0.8em; font-weight:bold; } #content DIV.class-totop A { color: black; text-decoration: none; } #content DIV.class-totop A:hover { color: red; text-decoration: underline; } /**********************************/ #footer { background-color: #80ACFF; /*position:absolute; bottom: 0;*/ width: 100%; /* necessario se si vuole il footer sempre a fondo pagina ma da altri problemi */ clear: both; } #footer P { font-size: 0.9em; text-align: center; }
Rispondi quotando