Problema posizionamento footer se i contenuti superano la dimensione del broswer.help

**D4rkAng3l** · 24-11-2007, 13:29

Ciao,
ho un problema con il mio sito, se andate su: http://www.siatec.net/andrea/fotografia/
è tutto ok perchè il contenuto della pagina non supera la dimensione di altezza, se invece andate quà:http://www.siatec.net/andrea/fotografia/portfolio.html oppure quà http://www.siatec.net/andrea/fotografia/links.html
dove il contenuto della pagina supera l'altezza il footer non è più a fondo pagina ma si sovrappone al testo...come si può risolvere tale problema?

Il codice HTML è:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title>Andrea Nobili Fotografo</title>
<meta name="title" content="Andrea Nobili Fotografo" />
<meta name="description" content="Fotografo di Roma. Appassionato di fotografia naturalistica e subacquea. Studente di informatica e webmaster. Realizzazione siti web accessibili e portali web" />
<meta name="keywords" content="Fotografia, fotografia subacquea, fotografia naturalistica, fotografia notturna, fotografia architettura, webmaster, informatica, realizzazione siti web, portali web, portali php, database" />
<meta name="robots" content="index, follow" />
<meta name="author" content="Andrea Nobili" />
<meta name="generator" content="Hand Coded" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="default01f.css" rel="stylesheet" type="text/css" title="default" />
</head>

<body>
    
    <div id="container">
    <div id="contieni_bordo">
	
    <div id="header">
	<h1>Andrea Nobili Fotografo</h1>
	</div>

	<div id="menu">
			<ul>
			[*]Home
			[*]About Me
			[*]Portfolio
			[*]Contact
			[*]Links
			[/list]
	</div>

<div id="content">
	<h1>Categorie Gallerie:</h1>

	<h2>Macro e Natura:</h2>
	
<span class="categoria">[img]img/lumachina.jpg[/img]</span>
  

Raccolta di macrofotografie e fotografie di tipo naturalistico</p>
	
    <h2>Paesaggi:</h2>
	
    <span class="categoria">[img]img/capotesta.jpg[/img]</span>
    

Raccolta di fotografie di tipo paesaggistico</p>
	
	<h2>Subacquea:</h2>
	
    <span class="categoria">[img]img/polpo2.jpg[/img]</span>
	

Raccolta di fotografie subacquee</p>
    
    <h2>Architettura e Città:</h2>
    
    <span class="categoria">[img]img/giostra2.jpg[/img]</span>
    

Raccolta di fotografie di architettura e di paesaggio urbano</p>
    
    <h2>Musica e Spettacolo:</h2>
    <span class="categoria">[img]img/musicisti.jpg[/img]</span>
    

Raccolta di fotografie musicali o inerenti al mondo dello spettacolo</p>
    
    
    <h2>Ritratti:</h2>
    
    <span class="categoria">[img]img/maschera4.jpg[/img]</span>
    

Raccolta di fotografie ritrattistiche</p>
    
    <h2>Pets:</h2>
    <span class="categoria">[img]img/pepe.jpg[/img]</span>
    

Raccolta di fotografie dei nostri amici animali</p>
    
    <h2>Digital Alteration:</h2>
    
    <span class="categoria">[img]img/tramonto.jpg[/img]</span>
    

Raccolta di fotografie che hanno subito un forte processo di post produzione</p>

</div>

<div id="footer">This Page Is Valid XHTML 1.0 Transitional and Valid CSS v.2</div>
</div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2949351-1";
urchinTracker();
</script>

</body>
</html>

mentre il codice CSS è:

codice:

html,body{margin: 0;padding:0;height:100%;}
body{
	margin: 0;
	padding: 0;
	font-family: arial, helvetica, verdana, tahoma, sans-serif;
	font-size: 80%;
	color: #000;
	background-color: #dedede;
	line-height: 180%;
}
#container{
    margin: 0 auto;
	height: 100%;
	width: 770px;
    background: #fff url("img/container.png") left top repeat-y;
}
#contieni_bordo{
	margin: 0 auto;
	width: 760px;
	height: 100%;
	position:relative;
	border: 1px solid #000;
	border-bottom: 1px solid #000;
}
    

#header{
	margin: 0 auto;
	width: 760px;
	height: 283px;
		
	border-bottom: 1px;
	background-image: url("img/sfondo.jpg");
	background-repeat: no-repeat;
	background-position: right bottom;
	background-color: #8a9bac;
	color: #000;
}
#header h1{
	margin: 0;
	font: normal 280% Georgia, "Times New Roman", Times, serif;
	color: #000;
	background-color: #a9c2d8;
	padding-left: 0.6em;
	padding-top: 0.1em;
}
#menu{
	margin: 0 auto;
	width: 760px;
	background: #41545F;
	border-bottom: 1px solid #000;
	color: #fff;
}
#gallery{
    margin: 0 auto;
    width: 760px;
    border-right: 1px solid #000;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
	color: #000;
    background-color: #a9c2d8;
}
#gallery a:link{
    color: #000;
	font-size: medium;
	font-weight: bolder;
}


#menu ul{
	margin: 0;
	padding-left: 0;
	list-style: none;
    overflow:hidden;
    height:auto;
}
#menu li{
	font-size: 1.1em;
	display: inline;
	margin: 0;
	padding: 0;
}
#menu a:link, #menu a:visited{
	float: left;
	background: #41545F;
	color: #fff;
	margin: 0em;
	padding: 0.3em 1.5em 0.3em 1.5em;
	text-decoration: none;
	border-right: 1px solid #000;
}
#menu a:hover, #menu a:focus, #menu a:active{
	color: #B2CEDC;
	background: #05181E;
}
#content{
	margin: 0 auto;
	width: 750px;
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10 px;
	border-top: 0;
	border-bottom: 0;
	background: #fff;
	color: #000;
	overflow: auto;
}
.categoria{
	float: left;
	margin-right: 30px;

}

#descrizione{
    text-align: justify;
}

#content p {
	font-size: 100%;
	line-height: 1.8em;
	padding-left: 0;
	padding-right: 0;
}
#content h1 {
	padding-top: 0;
	font: normal 180% Georgia, "Times New Roman", Times, serif;
	color: #05181E;
	background-color: #FFFFFF;
}
#content h2{
	background: #fff;
	color: #940D1E;
	padding-top: 10px;
	
	padding-bottom: 0;
	font: normal 150% Georgia, "Times New Roman", Times, serif;
	border-bottom: 1px dotted #FF9006;
	clear: left;
	
}
#content p{
	font-size: 100%;
	line-height: 1.8em;
	padding-left: 1em;
	padding-right: 1em;
}
        

#content a:link, #content a:visited {
	font-size: 95%;	
	font-weight: normal;
	color: #41545F;
	background-color: #fff;
	text-decoration: underline;
}
#content a:hover {
	color: #fff;
	background-color: #41545F;
	text-decoration: none;
}
#footer{
	margin: 0 auto;
	width: 760px;
	background: #41545F;
	text-align: center;
	position: absolute;
	bottom:0;
	color: #fff;
	border-top: 1px;
	border-bottom: 1px;
	font-family: helvetica, arial, verdana, tahoma, sans-serif; 
	padding: 0;
}
#footer a:link, #footer a:visited {
	color: #fff;
	background-color: #41545F;
	text-decoration: underline;
}
#footer a:hover {
	text-decoration: none;
	color: #41545F;
	background-color: #fff;
}
.form{
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #000000;
	background: #CCCCCC;
	border: 1px solid #000000;
}
.pulsante{
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background: #CCCCCC;
    text-align: center;
	border: 1px solid #000000;
}

Grazie
Andrea

**H5N1_Aviaria** · 24-11-2007, 13:48

Questo accade perchè il footer ha posizionamento assoluto. Il posizionamento assoluto indica di posizionare il BOX esattamente al "bottom" del container.
Togli il posizionamento assoluto e imposta un "clear : both":

codice:

#footer{
	margin: 0 auto;
	width: 760px;
	background: #41545F;
	text-align: center;
	clear : both;
	bottom:0;
	color: #fff;
	border-top: 1px;
	border-bottom: 1px;
	font-family: helvetica, arial, verdana, tahoma, sans-serif; 
	padding: 0;
}

**D4rkAng3l** · 24-11-2007, 14:53

oddio non ne riesco ad uscire...ho fatto come hai detto e succedono altri casini però, la pagina incriminata ha il footer in fondo ora: http://localhost/monoliticofisso/portfolio.html ma come puoi notare si perde l'ombreggiatura e il bordo oltre la parte che entra nella finestra del brosewr.
Nelle altre pagine invece è ancora peggio in quanto il footer non è più a fondo pagina, era impostato come absolute seguendo questa guida http://css.html.it/guide/lezione/64/...ma-del-footer/

Dici che ne uscirò in qualche modo? stò iniziando ad odiare i CSS oggi

Grazie
Andrea

**H5N1_Aviaria** · 24-11-2007, 15:01

Spesso un corso di semiologia del W3C farebbe comodo!

Scherzi a parte, hai confuso il significato di 100% e auto.
Modifica le proprietà del container (#container) ed imposta l'altezza su auto e non su 100%

**D4rkAng3l** · 24-11-2007, 17:43

Ok...nelle pagine che superano la lunghezza della pagina ora è perfetto, tuttavia nella home page: http://www.siatec.net/andrea/fotografia/ ed in http://www.siatec.net/andrea/fotografia/aboutme.html dove il contenuto non arriva alla fine della finestra il footer è ancora penzoloni (prima invece stava sempre e comunque a fondo pagina, infatti sulla guida di html.it spiegava proprio come ottenere questo effetto senza considerare però il caso che il contenuto potesse superare le dimensioni della finestra del broswer).

Potrei aggiungere del contenuto per fare in modo che anche quelle pagine abbiano il footer che tocchi il bodo inferiore della finestra del broswer (soluzione rozza?), potrei lasciarlo così (Stà brutto?) ma se invece volessi risolvere che dovrei fare? pensavo di impostare un min-height da qualche parte per settare un altezza minima...ha senso come discorso?

Grazie
Andrea

**H5N1_Aviaria** · 24-11-2007, 18:14

Se avessi uno schermo 3000x2000 lo visualizzerei comunque così!

Puoi eventualmente impostare una dimensione minima per l'altezza di #container in questo modo:

codice:

#container{
min-height : 50em; /*significa, ovviamente, 50 "righe" di testo */
height : auto !important;
height : 50em;
}

In questo modo la dimensione minima in altezza del container sarà di 50 linee di testo.

**D4rkAng3l** · 24-11-2007, 19:22

spe,
perchè ripeti height 2 volte?
height : auto !important;
height : 50em;

il motore di rendering non ne coinsidera solo uno?

cmq mettendo quelle righe nella parte del css dedicata al container non è cambiato nulla :-/

**H5N1_Aviaria** · 24-11-2007, 19:51

Ok, non avevo visto bene il codice.
Applica quelle regole an #content e non al container.
La regola per height viene ripetuta due volte:

codice:

#content{
min-height : 50em; /*significa, ovviamente, 50 "righe" di testo */
height : auto !important; /*diciamo al browser di ignorare successive dichiarazioni di Height*/
height : 50em; /*IE non capisce il precedente !important e salta la regola, applicando questa dichiarazione*/
}

Siccome min-height e !important non vengono applicati da IE mentre la proprietà height in IE si comporta come min-height.
Si tratta di un noto CSS hack da usare con cautela e parsimonia

**D4rkAng3l** · 24-11-2007, 21:03

Ok...si in effetti era il box del content a dover avere un'altezza minima,
ti ringrazio, ora funziona bene sia su Firefox che su Explorer (Opera no...continua a fare come prima ma vabbè alla fine non è indecente e finchè è solo su Opera a non funzionare perfettamente credo che posso anche lasciar correre...)

Un consiglio: ho studiacchiato le guide sui CSS di Html.it, sia la guida di base sia quella sulla realizzazione di template tabless, nel bene o nel male qualcosa ho imparato e infatti riesco a realizzare e a modificare template, anche se mi impiccio con determinate cose...più che altro con i posizionamenti e questo genere di cose.
Le guide di Html.it sono fatto molto bene...ma in parte perchè sono online e non su supporto cartaceo (quindi dopo un po' mi impicco...io studio bene solo sui libri), in parte perchè su una guida non si può approfondire proprio tutto tutto....credi che al mio livello potrebbe essere utile comprarsi un bel libro sui CSS come: http://www.cssguidacompleta.com/

???

Ciao e grazie di tutto
Andrea

**H5N1_Aviaria** · 24-11-2007, 22:39

Ti consiglio "Lo zen e il design CSS" di Dave Shea

Discussione: Problema posizionamento footer se i contenuti superano la dimensione del broswer.help

Strumenti discussione

Ricerca discussione

Visualizza

Problema posizionamento footer se i contenuti superano la dimensione del broswer.help

Permessi di invio