 |
 |
|
| Condividi questo contenuto nei Social Network: |
|
Tweet |
|
|
|
Ti stiamo aspettando: Registrati subito e gratis. Entra a far parte di una delle comunità più attive in Italia. Se hai dimenticato i tuoi dati li puoi recuperare subito. |
||||
|
|||||||||
 HTML e XHTML Il codice di scrittura per pagine web Hey Amico Visitatore, Condividi con noi le tue idee e la tua conoscenza Aprendo una nuova discussione nella sezione HTML e XHTML |
|
|
|
LinkBack | Strumenti di discussione |
11-09-11, 21:44
|
#1 (permalink) |
|
User
Data di registrazione: Mar 2008
Messaggi: 71
|
Il footer si "mangia" il sito
Salve ragazzi, ho posizionato il footer in basso al sito. Quando cambio risoluzione il footer va a coprire gli elementi che si trovano al centro.
Vorrei invece si bloccasse, anche magari facendo uscire le barre laterali di scorrimento per le risoluzioni più piccole. ecco il css Codice:
@charset "utf-8";
/* CSS Document */
body {
background-color: #000;
margin: 0px;
background-image: url(bg.jpg);
}
.menu { opacity: .7;
height: 80px;
width: 100%;
background-color: #fff;
}
.content {
opacity: .7;
bottom:30px;/*uguale all'altezza del footer*/
overflow:hidden;
position:absolute;
top:80px;
width:100%;
background-attachment:fixed;
background-color: #ccc;
border-top-width: thin;
border-bottom-width: thin;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #000;
border-bottom-color: #000;
}
.logo {
background-image: url(logo.png);
height: 80px;
width: auto;
background-repeat: no-repeat;
}
.footer {
opacity: .7;
bottom:0px;
clear:both;
height:30px;
position:absolute;
width:97%;
padding-left:3%;
_height:10%;
_position:relative;
_border:none;
_outline: none;
background-color: #fff;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
color: #333;
text-align: center;
}
.box {
height: 500%;
width: 1200%;
background-color: #000;
padding: 5px;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
top: 20px;
}
.menuLaterale {
height: 500px;
width: 500px;
background-color: #FFF;
}
Codice:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento senza titolo</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="menu"><div class="logo"></div></div> <div class="content"> <div class="box"><div class="menuLaterale"></div></div> </div> <div class="footer"><br /> Copyright © Tutti i diritti riservati | Web design & development: </div> </body> </html> |
|
|
|
|
Sviluppo e Gestione siti web
