Fabio Mosti
consulente informatico
stressato e bastardo

realizzazione siti internet con xhtml/css parte 3

26/06/2012 - realizzazione siti internet con xhtml/css parte 3
tags: css, xhtml
il posizionamento del footer è uno dei problemi «classici» dell'impaginazione con i css; sull'argomento sono stati spesi fiumi di inchiostro e cercherò in fondo all'articolo di riassumervi alcuni fra gli interventi a mio avviso più significativi.

Rispetto alla struttura che avevamo visto l'altra volta abbiamo un blocco in più da posizionare sulla pagina, ovvero per l'appunto il footer; per il resto la struttura è invariata, e questo a ulteriore riprova del rigore che ci consente di raggiungere l'impaginazione con xhtml e css. Osserviamo adesso il sorgente della pagina modificato.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" type="text/css" href="./stile.css" />
        <title>Maneggio Bologna Associazione Turismo Equestre Parco Cavaioni</title>
    </head>
    <body>
        <div id="logo">	
	</div>
	<div id="contenuti">
            <div id="corpo">
                <h1>titolo documento</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	    </div>
        </div>
        <div id="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
            do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </body>
</html>
quello che cambia è soprattutto il css:
html, body {
    height: 100%;
    min-height: 100%;
    margin: 0px;
    padding: 0px;
}

body {
    font-family: verdana;
    font-size: 0.8em;
    margin: 0px;
    padding: 0px;
}

h1 {
    font-size: 1.3em;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}
 
p {
    line-height: 1.5;
    text-align: justify;
    text-indent: 3em;
    margin: 20px 0px;
    padding: 0px;
}
 
ul {
    margin: 0px;
    padding: 0px;
}

#logo {
    background-color: #dddddd;
    width: 120px;
	height: 100%;
    position: absolute;
}
 
#contenuti {
    background-color: #eeeeee;
	margin: 0px;
    margin-left: 120px;
    padding: 0px;
	overflow: auto;
    position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 50px;
}

#corpo {
    margin: 0px;
    padding: 20px;
}

#footer {
    background-color: #bbbbbb;
	bottom: 0px;
    width: 100%;
	height: 50px;
    position: absolute;
}



Warning: Illegal string offset 'codice' in /var/www/vhosts/videoart000003/httpdocs/_codice/_templates/_default_/_template.footers_pagina.php on line 10