Codice PHP:
p { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; text-decoration: none; } div { color:black; } a { padding:10px 20px; font-size:16px; -webkit-border-radius: 5px; -moz-border-radius:5px; border-radius: 5px; } #logo { position:absolute; left:10px; top:5px; width:100; height:100; z-index: 300; } #pagetitle { font:30px Vivaldi; width:559px; position:absolute; left:150px; top:15px; display:inline; margin:0 20px 20px 0; padding:20px; font-size:big; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; /* IE10 */ background-image: -ms-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Opera */ background-image: -o-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #AACFEF)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Regola standard */ background-image: linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); ; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 0 5px black; -moz-box-shadow: 0 0 5px black; box-shadow: 0 0 5px black; font-family: "Times New Roman", Times, serif; font-weight: bold; } #subtitle { font-family: "Times New Roman", Times, serif; font-size: small; font-weight: bold; text-transform: uppercase; color: black; } a:link, a:visited, a:hover { color:black; text-decoration:none; } a:hover { text-decoration:underline; background-color: #00FF66; } #content { width:702px; position:absolute; top:190px; left:10px; display:inline; margin:0 20px 20px 0; padding:20px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; /* IE10 */ background-image: -ms-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Opera */ background-image: -o-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #AACFEF)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Regola standard */ background-image: linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 0 5px black; -moz-box-shadow: 0 0 5px black; box-shadow: 0 0 5px black; } #topmenu { width:702px; position:absolute; top:119px; left:10px; display:inline; margin:0 20px 20px 0; padding:20px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; /* IE10 */ background-image: -ms-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Opera */ background-image: -o-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #AACFEF)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Regola standard */ background-image: linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 0 5px black; -moz-box-shadow: 0 0 5px black; box-shadow: 0 0 5px black; } #bottombar { width:703px; clear:both; top:10px; left:10px; display:inline; margin:0 20px 20px 0 auto; position:relative; padding:20px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; /* IE10 */ background-image: -ms-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Opera */ background-image: -o-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #AACFEF)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Regola standard */ background-image: linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 0 5px black; -moz-box-shadow: 0 0 5px black; box-shadow: 0 0 5px black; } /*********** MENUBOX ************/ /************ MENU *************/ #menu { position:absolute;top:-100px;left:0px; display:inline; margin:0 20px 20px 0; width:350px; padding:20px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; /* IE10 */ background-image: -ms-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Opera */ background-image: -o-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #AACFEF)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); /* Regola standard */ background-image: linear-gradient(top right, #FFFFFF 0%, #33FF66 100%); ; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 0 5px black; -moz-box-shadow: 0 0 5px black; box-shadow: 0 0 5px black; }
il problema è che il footer(#bottombar) si sovrappone al content quando il contenuto (del content) aumenta.