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 :confused:
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 ? :confused: e poi se metto il push 50px + il footer 50px , non verrebbero insieme 100 px ? non andrei oltre il 100%della pagina ? :mc:
3- al posto del push secondo questa guida http://css.html.it/guide/lezione/4929/contenere-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... :help: :doh:
ora vi metto il codice fatto da me :
<!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>
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 :(
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 :confused:
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 ? :confused: e poi se metto il push 50px + il footer 50px , non verrebbero insieme 100 px ? non andrei oltre il 100%della pagina ? :mc:
3- al posto del push secondo questa guida http://css.html.it/guide/lezione/4929/contenere-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... :help: :doh:
ora vi metto il codice fatto da me :
<!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>
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 :(