layout sito , domandina :) top fisso e sticky footer

aeroxr1 · 27-02-2012, 18:28

ciao,

stavo costruendo un layout per esercitarmi un pò con i css

Le mie intenzioni erano quelle di creare un top che stesse fisso in testa alla pagina come su facebook , e per questo ho usato un position:fixed .

Poi ho creato un contenitore con due div interni uno per il menu laterale e uno per il contenuto .

Il footer l'ho messo fuori dal contenitore seguendo le guide per lo sticky footer e ho messo , sempre seguendo le varie guide , un div vuoto dentro in contenitore .

Ora ho due problemini :

1- il contenitore mi va a combaciare con l'inizio della pagina e quindi mi porta le colonne "menu" e "contenuto" sotto il div "top" posizionato fixed . Come posso risolvere ?
ho provato a mettere al contenitore margin-top:"altezza top" , ma cosi facendo mi compare la barra dello scroll e il footer scende nel proseguo della pagina
ho provato a mettere un div vuoto in testa al contenitore con altezza quella della top , ma niente

2- non capisco il significato del div push vuoto con height 50px , e non capisco il margin-bottom : -50px del contenitore.. Cioè non ci vorrebbe un margin-bottom:50px per far spazio al footer ? perchè il valore negativo ?

e poi se metto il push 50px + il footer 50px , non verrebbero insieme 100 px ? non andrei oltre il 100%della pagina ?

3- al posto del push secondo questa guida http://css.html.it/guide/lezione/492...enere-i-float/

utilizzando il metodo SCoF non basterebbe mettere overflow:auto ? io ho provato ma non funziona, se metto tanto contenuto senza mettere il div push il contenuto va sopra il footer , e già questo non mi è chiaro dato che ho messo il footer con clear:both...

ora vi metto il codice fatto da me :

Spoiler:

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>prova autonoma layout </title>
<link href="prova.css" rel=stylesheet type="text/css" >
</head>

<body>
<div id="top"> <div id="topmenu">titolo</div> </div>
<div id="contenitore">
<div id="menu"> menu </div>

<div id="contenuto">
 <br><br><br><br><br><br><br><br><br>
 contenuto
</div>

<div id="push"> </div>
</div>
<div id="footer"> </div>

</body>
</html>

Codice:

html,body
{
 margin: 0;
 padding:0;
 height: 100%;
 background-color: white;
}

#contenitore
{
 width: 1100px; 
 min-height: 100%;
 background-color:red;
 margin-top:0;
 margin-left:auto;
 margin-right:auto;
 margin-bottom: -50px ;
 
}


#top
{
 	position:fixed;
	width: 100%;
	top:0;
	height:50px;
	background-color:yellow;
	overflow:hidden;
}

#topmenu
{
 margin: 0 auto;
 background-color:#FAA53A;
 width:1100px;
 color:white;
 overflow:hidden;
}

#menu
{
 float:left;
 background-color:black;
 width:200px;
 color:white;
 overflow:hidden;
}

#contenuto
{
 margin-left:200 px;
 background-color:orange;
 overflow:hidden;
}

#footer
{
 width:1100px;
 margin: 0 auto;
 background-color:green;
 height:50px;
 clear: both;
 overflow:hidden;
}

#push
{
 height:50px;
 clear:both;
}

come potete vedere sono alle prime armi e non ci sto capendo una mazza

espanico · 28-02-2012, 11:29

Potresti fare anche in questo modo: Esempio

html:

Codice HTML:

<body>
<div id="top">
	<div id="topmenu">TITOLO SITO</div>
</div>
<div id="menu">
		<ul>MENU</ul>
		<li>LINK 1</li>
		<li>LINK 2</li>
		<li>LINK 3</li>
		<li>LINK 4</li>
		<li>LINK 5</li>
</div>
<div id="contenuto">
<p>Il brano standard del Lorem Ipsum usato sin dal sedicesimo secolo è riprodotto qui di seguito per coloro che fossero interessati. Anche le sezioni 1.10.32 e 1.10.33 del "de Il brano standard del Lorem Ipsum usato sin dal sedicesimo secolo è riprodotto qui di seguito per coloro che fossero interessati. Anche le sezioni 1.10.32 e 1.10.33 del &quot;deIl brano standard del Lorem Ipsum usato sin dal sedicesimo secolo è riprodotto qui di seguito per coloro che fossero interessati. Anche le sezioni 1.10.32 e 1.10.33 del &quot;deIl brano standard del Lorem Ipsum usato sin dal sedicesimo secolo è riprodotto qui di seguito per coloro che fossero interessati. Anche le sezioni 1.10.32 e 1.10.33 del &quot;deIl brano standard del Lorem Ipsum usato sin dal sedicesimo secolo è riprodotto qui di seguito per coloro che fossero interessati. Anche le sezioni 1.10.32 e 1.10.33 del &quot;deIl brano standard del Lorem Ipsum usato sin dal sedicesimo secolo è riprodotto qui di seguito per coloro che fossero interessati. Anche le sezioni 1.10.32 e 1.10.33 del &quot;deIl brano standard del Lorem Ipsum usato sin dal sedicesimo secolo è riprodotto qui di seguito per coloro che fossero interessati. Anche le sezioni 1.10.32 e 1.10.33 del &quot;de</p>
</div>
<div id="footer">FOOTER SITO</div>

</body>

Css:

Codice HTML:

<style type="text/css">
body { margin: 0;}
#top {
	background-color: #CF9;
	height: 65px;
	width: 100%;
}
#footer {
	position:fixed;
	bottom:0px;
	height:25px;
	width:100%;
	color: #999;
	background-color: #000;
	text-align: center;
	line-height: 25px;
}

#top #topmenu {
	color: #FFF;
	background-color: #F00;
	height: 30px;
	width: 60%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
#menu {
	width: 250px;
	color: #FFF;
	background-color: #F90;
	height: 500px;
	float: left;
}
#contenuto {
	width: 500px;
	height: 100%;
	background-color: #333;
	color: #F00;
	float: left;
	margin-top: 25px;
	margin-left: 55px;
}
</style>

aeroxr1 · 28-02-2012, 17:13

io il footer lo voglio in fondo al layout , non fisso

e poi mi piaceva con il div container , perchè volevo centrare il layout in mezzo alla pagina .

non ci sono soluzioni per fare come vorrei io ? un esempio di come vorrei far io è la top bar di facebook e il footer diciamo quello della mediaworld che se ci sono pochi elementi sta in fondo alla pagina se ce ne sono molti segue il testo

EDIT: ho risolto il problema numero 1 mettendo al div contenuto e al div menu un padding-top 50px .. dite sia una soluzione accettabile ?

o ci sono metodi più puliti ?

il punto 2 e 3 mi restano oscuri

espanico · 29-02-2012, 12:38

Penso di aver trovato un esempio che spiega quello che vuoi tu, footer fisso a fondo pagina se il contenuto e poco, e che lo segua se il contenuto aumenta.
Guida (in inglese)

C'è da dire che ha scelto un argomento un po complesso per iniziare

aeroxr1 · 29-02-2012, 12:50

Quote:

Originariamente inviato da espanico

Penso di aver trovato un esempio che spiega quello che vuoi tu, footer fisso a fondo pagina se il contenuto e poco, e che lo segua se il contenuto aumenta.
Guida (in inglese)

C'è da dire che ha scelto un argomento un po complesso per iniziare

le cose facili a me non piacciono

comunque http://boomshop.altervista.org/

mi è riuscito fare lo stickyfooter , però non capisco il senso del div push e del margine negativo..

ho un problemino , nel div top posizionato static non mi riesce disporre il menu come vorrei.. in pratica mi è riuscito centrarlo , volevo metterlo in basso nel div top , però se metto margin-bottom:0 non ottengo l'effetto desiderato .. come mai ? non capisco

espanico · 29-02-2012, 13:06

Il div push viene utilizzato per dare la spinta al footer senza non si posizionerebbe sul fondo. Per quanto riguarda il problema del div del menu nel top prova ad assegnare al div topmenu:

Un altezza = height: 30px;
Posizione = position: relative;
I margini = margin-top: 45px;
margin-right: auto;
margin-left: auto;

Vedi se funziona

aeroxr1 · 29-02-2012, 13:30

Quote:

Originariamente inviato da espanico

Il div push viene utilizzato per dare la spinta al footer senza non si posizionerebbe sul fondo. Per quanto riguarda il problema del div del menu nel top prova ad assegnare al div topmenu:

Un altezza = height: 30px;
Posizione = position: relative;
I margini = margin-top: 45px;
margin-right: auto;
margin-left: auto;

Vedi se funziona

forse ho capito il funzionamento !
cioè tecnicamente il contenitore avendo margin-bottom:-50px; tira in su il footer sopra di esso per 50px in maniera che sia sempre in fondo al contenitore , poi per far in maniera che il contenuto non vada sopra il footer ci si mette questo push trasparente di altezza 50px con clear both in maniera che stia subito sotto gli elementi flaottati ?

ho capito bene ?

per la soluzione riportata da te per il div top , facendo cosi si sposta il div ,ma perchè non funziona con il margin-bottom 0 ?

un altra cosa , al posto del padding del div menu e del div contenuto , per far si che non vengano nascosti dal top , aveva provato a mettere nel box contenitore un div trasparente di altezza 75px , però non funzionava :S

non capisco dove sono gli errori

29-02-2012, 12:38	#4
espanico Senior Member Iscritto dal: May 2007 Messaggi: 4305	Penso di aver trovato un esempio che spiega quello che vuoi tu, footer fisso a fondo pagina se il contenuto e poco, e che lo segua se il contenuto aumenta. Guida (in inglese) C'è da dire che ha scelto un argomento un po complesso per iniziare __________________ Feedback Mercatino

29-02-2012, 13:06	#6
espanico Senior Member Iscritto dal: May 2007 Messaggi: 4305	Il div push viene utilizzato per dare la spinta al footer senza non si posizionerebbe sul fondo. Per quanto riguarda il problema del div del menu nel top prova ad assegnare al div topmenu: Un altezza = height: 30px; Posizione = position: relative; I margini = margin-top: 45px; margin-right: auto; margin-left: auto; Vedi se funziona __________________ Feedback Mercatino

28-02-2012, 17:13	#3
aeroxr1 Senior Member Iscritto dal: Mar 2006 Messaggi: 2057	io il footer lo voglio in fondo al layout , non fisso e poi mi piaceva con il div container , perchè volevo centrare il layout in mezzo alla pagina . non ci sono soluzioni per fare come vorrei io ? un esempio di come vorrei far io è la top bar di facebook e il footer diciamo quello della mediaworld che se ci sono pochi elementi sta in fondo alla pagina se ce ne sono molti segue il testo EDIT: ho risolto il problema numero 1 mettendo al div contenuto e al div menu un padding-top 50px .. dite sia una soluzione accettabile ? o ci sono metodi più puliti ? il punto 2 e 3 mi restano oscuri Ultima modifica di aeroxr1 : 28-02-2012 alle 20:44.

Strumenti
Mostra una versione stampabile Invia questa pagina per email