Il footer si "mangia" il sito

**shock_estremo** · 12-09-2011, 01:24

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;
}

ed ecco l'html:

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">



 Copyright © Tutti i diritti riservati | Web design & development: </div>

</body>
</html>

Grazie!!!

**sandrone65** · 12-09-2011, 12:21

Il problema non mi pare sia il footer, è piuttosto che hai impostato il posizionamento assoluto sul content. Che motivo c'è?
Se togli il position:absolute; dal content più o meno la pagina va a posto

**shock_estremo** · 12-09-2011, 12:48

No, purtroppo se levo absolute non si allinea più come deve ed il problema del footer che si mangia la parte sovrastante (quando abbasso la risoluzione) rimane -.- uff

**ResianTaxidrive** · 13-09-2011, 01:31

ti consiglio di seguire il consiglio di sandrone. Togli il position:absolute dal content. Non ha molto senso, tralaltro; il contenuto del content potrebbe essere variabile, per cui non puoi sapere a priori quanto sarà alto. Questo significa che non puoi sapere esattamente dove far iniziare i div che dovrebbero venire dopo di lui.
I posizionamenti assoluti vanno usati con parsimonia e nel tuo caso non c'è motivo di usarli. Cosa intendi con "il content non si allinea più come deve?"

**shock_estremo** · 13-09-2011, 02:17

Ho risolto usando una guida del sito

(/guide/lezione/64/il-problema-del-footer/)

Ora ho un altro problema, ovviamente xD. Ho usato l'opzione opacity per dare trasparenza al div (con il css), ma se inserisco all'interno un altro div mi inserisce comunque la trasperenza, perfino sulle immagini! Ho provato a inserire in quel div opacity: 0; ed altro, ma niente. Penso che la soluzione sia usando z-index, ma sapete indicarmi come fare

?

**sandrone65** · 13-09-2011, 09:04

La proprietà opacity viene ereditata dal contenitore padre, per cui un div non semitrasparente inserito dentro un div semitrasparente risulterà comunque semitrasparente. Devi evitare che il div semitrasparente contenga il div non trasparente, questo è un caso in cui il posizionamento assoluto potrebbe aiutarti perchè ti consentirebbe di sovrapporre i div.
In alternativa imposti per lo sfondo un'immagine PNG trasparente invece di affidarti ai CSS

Discussione: Il footer si "mangia" il sito

Strumenti discussione

Ricerca discussione

Visualizza

Il footer si "mangia" il sito

Permessi di invio