Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Problema footer

  1. #1
    Utente di HTML.it
    Registrato dal
    Sep 2011
    Messaggi
    2

    Problema footer

    Ciao a tutti,
    ho un piccolo problema col css del mio sito:

    Codice PHP:
    {     margin0;     padding0;     border0;     outline0;     font-weightinherit;     font-styleinherit;     font-size100%;     font-familyinherit;     text-decorationnone; }  div color:black; } a  {  padding:10px 20px;  font-size:16px;   -webkit-border-radius5px; -moz-border-radius:5pxborder-radius5px; }  #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.

    Grazie in anticipo

  2. #2
    Moderatrice di CSS L'avatar di ResianTaxidrive
    Registrato dal
    Oct 2007
    residenza
    Udine
    Messaggi
    2,766
    il codice così scritto è illegibile. Devi mettere degli a capi; inoltre manca l'html. Non avresti un link dove è visibile la pagina a cui stai lavorando?

  3. #3

  4. #4
    Moderatrice di CSS L'avatar di ResianTaxidrive
    Registrato dal
    Oct 2007
    residenza
    Udine
    Messaggi
    2,766
    devi decisamente togliere il position:absolute sia al content che al bottombar

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.