Problemi footer

27-11-2011, 13.04.11

salve a tutti ho un problemino con un footer...
provo ad inserirlo però non va in fondo alla pagina ma in fondo alla finestra e quando scendo mi rimane tipo a metà pagina (mi spiego malissimo)...

comunque volevo sapere sa qualcuno mi può aiutare a creare un striscia colorata a fondo di pagina che sia distante da tutto il resto circa 20 px

grazie in anticipo

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it-IT">

    <head>

        <title>Crescendo</title>

        <style type="text/css">

            html, body{

                margin: 0; 

                padding: 0;

                background-image: url(Immagini/Sfondo.png);

            }

            

            #container{

                width: 900px;

                margin: 0 auto;

            }

            

            #sinistra{

                width: 700px;

            }

            

            #head{

                text-align: center;

            }

            

            #content{

                background-color: #FABB8E;

                border-radius: 20px;

                border: 10px solid #FFF;

            }

        </style>

    </head>

    <body class="crescendo">

            <div id="container">

                    <div id="head">

                        <img src="Immagini/headp.png" alt="" />

                    </div>

                    <div id="content">

                            <div id="sinistra">

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut suscipit nisi. Morbi feugiat lobortis elit, vel scelerisque est euismod at. Pellentesque condimentum libero ut augue accumsan non tincidunt elit facilisis. Maecenas iaculis feugiat arcu id ultrices. Praesent blandit elit quis ipsum rutrum sagittis bibendum leo mattis. Nam condimentum ante in lorem iaculis laoreet. Integer at velit nulla, quis malesuada diam. Nam non enim vel velit bibendum suscipit sit amet vitae nisi. Nunc mollis arcu quis enim aliquet ultrices posuere eu neque. Fusce mollis lobortis nibh, at laoreet purus hendrerit a. Duis lectus nibh, pharetra sit amet faucibus ac, venenatis vitae dolor. Morbi vehicula, eros et tempus imperdiet, risus augue elementum ante, sit amet rutrum eros ligula eget ligula. Phasellus tincidunt, velit sed vestibulum feugiat, enim leo dignissim est, ut sollicitudin neque arcu vitae dolor. Etiam non enim sit amet arcu rutrum adipiscing. In placerat varius elit, eu pretium purus sodales non. Etiam sollicitudin enim nec risus volutpat non congue turpis dapibus.</p>

                                    <p>Praesent tempus faucibus nulla et mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat augue vitae nunc pretium et tincidunt ligula consequat. Aliquam metus tortor, iaculis et porttitor eget, malesuada nec lectus. Curabitur auctor, quam nec suscipit dapibus, felis massa tempus mauris, et ornare diam velit a diam. Aenean commodo rutrum leo a pellentesque. In condimentum erat sit amet tortor volutpat commodo. Quisque consectetur vestibulum arcu eget ullamcorper. In accumsan bibendum mi non facilisis. Proin sed lacus orci, sed interdum est. Aenean feugiat, est vitae placerat suscipit, lacus purus porta libero, sed porta elit erat sed justo. Quisque at eleifend ipsum. Phasellus auctor pharetra magna et sollicitudin. Fusce nisl lorem, mattis vitae condimentum in, interdum fermentum purus.</p>

                                    <p>Suspendisse potenti. Nunc eget aliquet mauris. Sed ac metus justo, et molestie turpis. Nulla sed elit ac nisl vulputate sollicitudin eget a metus. Donec a venenatis eros. Praesent rutrum, mauris ac vulputate gravida, velit metus hendrerit lectus, vitae fringilla dolor risus adipiscing libero. Cras ut pharetra mi. Morbi ultricies adipiscing sapien vitae hendrerit. Nullam mollis, massa sed porttitor sodales, massa lectus blandit tortor, aliquam malesuada mauris ipsum at risus. Ut est orci, viverra a hendrerit in, ornare quis odio.</p>

                                    <p>Donec dui dui, fringilla semper sagittis quis, lobortis non mi. Sed tempus porttitor est, auctor tincidunt neque accumsan nec. Donec a nisl nunc. Integer pulvinar risus sit amet massa aliquet suscipit. Sed dignissim, leo vitae ultricies facilisis, magna felis dapibus orci, vitae aliquam sem leo dapibus nisl. Proin neque diam, aliquam sed adipiscing at, ornare rutrum diam. Sed turpis massa, pretium ac egestas quis, iaculis nec dui. Pellentesque aliquet dolor at lacus scelerisque mollis. Aliquam consequat ligula non enim dignissim blandit. Suspendisse aliquam dignissim libero, ut sagittis nibh tincidunt sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras dictum tristique luctus.</p>

                            </div>

                    </div>

            </div>

    </body>

</html>

**karl94** · 27-11-2011, 15.12.47

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it-IT">
	<head>
		<title>Crescendo</title>
		<style type="text/css">
			html, body{
				margin: 0; 
				padding: 0;
				background-image: url(Immagini/Sfondo.png);
			}
			
			#container{
				width: 900px;
				margin: 0 auto;
			}
			
			#sinistra{
				width: 700px;
			}
			
			#head{
				text-align: center;
			}
			
			#content{
				background-color: #FABB8E;
				border-radius: 20px;
				border: 10px solid #FFF;
			}
			
			#footer{
				margin-top: 20px;
			}
	</style>
	</head>
	<body class="crescendo">
		<div id="container">
			<div id="head">
				<img src="Immagini/headp.png" alt="" />
			</div>
			<div id="content">
				<div id="sinistra">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut suscipit nisi. Morbi feugiat lobortis elit, vel scelerisque est euismod at. Pellentesque condimentum libero ut augue accumsan non tincidunt elit facilisis. Maecenas iaculis feugiat arcu id ultrices. Praesent blandit elit quis ipsum rutrum sagittis bibendum leo mattis. Nam condimentum ante in lorem iaculis laoreet. Integer at velit nulla, quis malesuada diam. Nam non enim vel velit bibendum suscipit sit amet vitae nisi. Nunc mollis arcu quis enim aliquet ultrices posuere eu neque. Fusce mollis lobortis nibh, at laoreet purus hendrerit a. Duis lectus nibh, pharetra sit amet faucibus ac, venenatis vitae dolor. Morbi vehicula, eros et tempus imperdiet, risus augue elementum ante, sit amet rutrum eros ligula eget ligula. Phasellus tincidunt, velit sed vestibulum feugiat, enim leo dignissim est, ut sollicitudin neque arcu vitae dolor. Etiam non enim sit amet arcu rutrum adipiscing. In placerat varius elit, eu pretium purus sodales non. Etiam sollicitudin enim nec risus volutpat non congue turpis dapibus.</p>
					<p>Praesent tempus faucibus nulla et mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat augue vitae nunc pretium et tincidunt ligula consequat. Aliquam metus tortor, iaculis et porttitor eget, malesuada nec lectus. Curabitur auctor, quam nec suscipit dapibus, felis massa tempus mauris, et ornare diam velit a diam. Aenean commodo rutrum leo a pellentesque. In condimentum erat sit amet tortor volutpat commodo. Quisque consectetur vestibulum arcu eget ullamcorper. In accumsan bibendum mi non facilisis. Proin sed lacus orci, sed interdum est. Aenean feugiat, est vitae placerat suscipit, lacus purus porta libero, sed porta elit erat sed justo. Quisque at eleifend ipsum. Phasellus auctor pharetra magna et sollicitudin. Fusce nisl lorem, mattis vitae condimentum in, interdum fermentum purus.</p>
					<p>Suspendisse potenti. Nunc eget aliquet mauris. Sed ac metus justo, et molestie turpis. Nulla sed elit ac nisl vulputate sollicitudin eget a metus. Donec a venenatis eros. Praesent rutrum, mauris ac vulputate gravida, velit metus hendrerit lectus, vitae fringilla dolor risus adipiscing libero. Cras ut pharetra mi. Morbi ultricies adipiscing sapien vitae hendrerit. Nullam mollis, massa sed porttitor sodales, massa lectus blandit tortor, aliquam malesuada mauris ipsum at risus. Ut est orci, viverra a hendrerit in, ornare quis odio.</p>
					<p>Donec dui dui, fringilla semper sagittis quis, lobortis non mi. Sed tempus porttitor est, auctor tincidunt neque accumsan nec. Donec a nisl nunc. Integer pulvinar risus sit amet massa aliquet suscipit. Sed dignissim, leo vitae ultricies facilisis, magna felis dapibus orci, vitae aliquam sem leo dapibus nisl. Proin neque diam, aliquam sed adipiscing at, ornare rutrum diam. Sed turpis massa, pretium ac egestas quis, iaculis nec dui. Pellentesque aliquet dolor at lacus scelerisque mollis. Aliquam consequat ligula non enim dignissim blandit. Suspendisse aliquam dignissim libero, ut sagittis nibh tincidunt sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras dictum tristique luctus.</p>
				</div>
			</div>
			<div id="footer">
				<p>Questo è il piè di pagina.</p>
			</div>
		</div>
	</body>
</html>

27-11-2011, 15.48.29

scusa ancora... finchè faccio così mi sta in fondo alla pagina...
però se metto una seconda colonna mi va sotto l'header...
puoi controllare qua???

grazie ancora

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it-IT">

    <head>

        <title>Crescendo</title>

        <style type="text/css">

            html, body{

                height:100%;

                margin: 0; 

                padding: 0;

                background-image:url(../../Pictures/SUB/Sfondo.png)

            }

            

            #container{   

                margin: 0 auto;

                width: 900px;

            }

            

            #sinistra{

                width: 650px;

                background-color: #D1BEF5;

                border-radius: 20px;

                border: 10px solid #FFF;

            }

            

            #destra{

                float:right;

                width: 200px;

                background-color: #8CCEFA;

                border-radius: 20px;

                border: 10px solid #FFF;

            }

            

            #content{

            }

            

        </style>

    

    </head>

    <body >

            <div id="container">

                    <div id="head">

                        <img src="../../Pictures/SUB/headp.png" alt="" />

                    </div>

                    <div id="content">

                            <div id="sinistra" style="position:absolute">

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut suscipit nisi. Morbi feugiat lobortis elit, vel scelerisque est euismod at. Pellentesque condimentum libero ut augue accumsan non tincidunt elit facilisis. Maecenas iaculis feugiat arcu id ultrices. Praesent blandit elit quis ipsum rutrum sagittis bibendum leo mattis. Nam condimentum ante in lorem iaculis laoreet. Integer at velit nulla, quis malesuada diam. Nam non enim vel velit bibendum suscipit sit amet vitae nisi. Nunc mollis arcu quis enim aliquet ultrices posuere eu neque. Fusce mollis lobortis nibh, at laoreet purus hendrerit a. Duis lectus nibh, pharetra sit amet faucibus ac, venenatis vitae dolor. Morbi vehicula, eros et tempus imperdiet, risus augue elementum ante, sit amet rutrum eros ligula eget ligula. Phasellus tincidunt, velit sed vestibulum feugiat, enim leo dignissim est, ut sollicitudin neque arcu vitae dolor. Etiam non enim sit amet arcu rutrum adipiscing. In placerat varius elit, eu pretium purus sodales non. Etiam sollicitudin enim nec risus volutpat non congue turpis dapibus.</p>

                                    <p>Praesent tempus faucibus nulla et mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat augue vitae nunc pretium et tincidunt ligula consequat. Aliquam metus tortor, iaculis et porttitor eget, malesuada nec lectus. Curabitur auctor, quam nec suscipit dapibus, felis massa tempus mauris, et ornare diam velit a diam. Aenean commodo rutrum leo a pellentesque. In condimentum erat sit amet tortor volutpat commodo. Quisque consectetur vestibulum arcu eget ullamcorper. In accumsan bibendum mi non facilisis. Proin sed lacus orci, sed interdum est. Aenean feugiat, est vitae placerat suscipit, lacus purus porta libero, sed porta elit erat sed justo. Quisque at eleifend ipsum. Phasellus auctor pharetra magna et sollicitudin. Fusce nisl lorem, mattis vitae condimentum in, interdum fermentum purus.</p>

                                    <p>Suspendisse potenti. Nunc eget aliquet mauris. Sed ac metus justo, et molestie turpis. Nulla sed elit ac nisl vulputate sollicitudin eget a metus. Donec a venenatis eros. Praesent rutrum, mauris ac vulputate gravida, velit metus hendrerit lectus, vitae fringilla dolor risus adipiscing libero. Cras ut pharetra mi. Morbi ultricies adipiscing sapien vitae hendrerit. Nullam mollis, massa sed porttitor sodales, massa lectus blandit tortor, aliquam malesuada mauris ipsum at risus. Ut est orci, viverra a hendrerit in, ornare quis odio.</p>

                                    <p>Donec dui dui, fringilla semper sagittis quis, lobortis non mi. Sed tempus porttitor est, auctor tincidunt neque accumsan nec. Donec a nisl nunc. Integer pulvinar risus sit amet massa aliquet suscipit. Sed dignissim, leo vitae ultricies facilisis, magna felis dapibus orci, vitae aliquam sem leo dapibus nisl. Proin neque diam, aliquam sed adipiscing at, ornare rutrum diam. Sed turpis massa, pretium ac egestas quis, iaculis nec dui. Pellentesque aliquet dolor at lacus scelerisque mollis. Aliquam consequat ligula non enim dignissim blandit. Suspendisse aliquam dignissim libero, ut sagittis nibh tincidunt sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras dictum tristique luctus.</p>

                            </div>

                            <div id="destra" style="position:relative;">

                            <br />

                            <img src="../../Pictures/SUB/serieincorso.png" />

                            <img src="../../Pictures/SUB/serieconcluse.png" />

                            <img src="../../Pictures/SUB/galleriaimmagini.png" />

                            </div>

                    </div>

            </div>

            </div>

    </body>

</html>

**karl94** · 27-11-2011, 16.15.27

Questo perché hai posizionato il div#sinistra in modo assoluto, rimuovendolo così dal normale flusso, e il div#destra mediante float, rimuovendo anche questo dal flusso. In questo modo il div#content è diventato di altezza zero, quindi come se non ci fosse e il div#footer risulta posizionato immediatamente sotto il div#header. Per ovviare, posiziona entrambe le colonne mediante float e imposta la proprietà overflow sul div#content sul valore hidden.

27-11-2011, 18.59.26

Grazie gentilissimo... adesso va!!!
però è rimasto un piccolissimo problema... non tocca il fondo della pagina ma rimane più in alto e si vede lo sfondo sotto.

EDIT: niente... risolto. ho aumentato l'altezza manualmente mettendo un valore in px di height e adesso tocca il fondo...
ancora grazie mille

**karl94** · 27-11-2011, 19.54.24

Originalmente inviato da crescendofansub

Ho aumentato l'altezza manualmente mettendo un valore in px di height e adesso tocca il fondo...
ancora grazie mille

Non è proprio la procedura migliore, se un visitatore avesse lo schermo più alto lo vedrebbe comunque in alto.
Leggi questo articolo: http://www.alistapart.com/articles/footers/

Discussione: Problemi footer

LinkBack

Strumenti discussione

Display

Problemi footer

Regole di scrittura