Layout con footer diviso (2 altezze diverse)

**justonemoment** · 25-08-2008, 17:57

Ciao a tutti, sto realizzando un sito in cui il footer è diviso, figura:

Il footer è quello viola, è diviso in due parti: una larga come il content e una come il menu.
Vorrei che a seconda di quanto si allungasse la colonna menu o la parte content rimanesse allineato in basso.
In pratica vorrei che i due div siano sempre allineati in basso.

Avete consigli su come realizzarlo? Magari anche se avete siti da esempio con questo layout se potete segnalatemeli

Grazie mille a tutti!!

**Raccoon29** · 26-08-2008, 00:10

Ciao,

posso chiederti un paio di cose sul comportamento che ti aspetti dal layout?

1) mi pare di capire che il footer è composto di due parti separate, giusto?
2) con quale comportamento i due devono restare allineati? Allungandosi in altezza? Oppure lasciando uno spazio bianco (cioé per spostamento in basso)?
3) nel caso si debbano allineare per spostamento, se il menù è più basso del content, il footer si deve allineare comunque cioé finendo inevitabilmente a forma di L adagiata?

quanto più ci dirai, tanto più avrai risposte pertinenti

resto in attesa
ciauz

**justonemoment** · 26-08-2008, 00:59

Ciao Raccoon29 e grazie per aver risposto!

Hai ragione non mi sono spiegato bene:
1) Il footer l'ho diviso in due poichè la parte destra è alta 170 pixel (c'è un logo dentro) mentre quella che si estende maggiormente in orizzontale è alta solo 70px. L'ho diviso per poter recuperare quei 100 pixel di differenza e poterli utilizzare nella parte Content.

2) Vorrei che il footer rimanesse sempre allineato in basso come se fosse una immagine sola (come un classico footer che prende tutta la larghezza possibile), c'è una scritta che lo attraversa tutto da sinistra a destra, quindi se non rimane allineato salta tutto l'effetto grafico.

3) Ho impostato il sito in modo da far essere il content più lungo del menu a colonna sulla destra.
In questo caso la parte orizzontale (quella lunga) del footer si sposterebbe in basso a seconda dell'altezza del content mentre la parte sottostante al menu a destra si dovrebbe allineare in basso fino a combaciare con l'altra parte.

La mia idea era di dividere il sito in due parti: un div contenitore con la larghezza totale del sito all'interno del quale metterei una parte "main" contenente il div "content" e il footer sottostante. Chiuso il main affianco con float left un div "colonnadx" contenente un div "menudx" e un altro div "footer più alto" allineato in basso, una sorta di valign bottom delle tabelle.
Sicuramente tra il div "menudx" e il footer ci sarà uno spazio vuoto (nel disegno è la parte bianca) che aumenterà a seconda dell'altezza del "content".

Ho fatto un post un pò lunghetto ma spero che sia più chiaro :rollo:

P.S.: Allego una nuova immagine

**Raccoon29** · 26-08-2008, 01:49

Bene, ora ho tutto quello che mi serve

Allora, parto col dirti che l'idea del float col valign non è affidabile perché l'allineamento verticale non lavora al di fuori delle tabelle, quindi ti verrebbe necessario ricorrere ai margini che non sono attendibili.
Perciò ti consiglio un altro tipo di approccio che personalmente ritengo più affidabile e che probabilmente ti farà pure perdere meno tempo.

Vorrei partire con un ragionamento.
Il pezzo di footer del logo non è del menù, infatti la domanda è: chi è in questo caso il vincolo per il pezzo aggiuntivo del footer (il logo)? Non è il menù, bensì il footer a fianco, perché sarà lui a decidere la posizione verticale del logo. Da ciò si deduce che per essere vincolato a lui deve essere suo figlio (secondo il normale ragionamento gerarchico dell'HTML).

In definitiva lo scopo è quello di vincolarlo al footer eppoi aggiustarlo a causa delle diverse dimensioni e posizioni, per far ciò ti prego di studiare questo codice che ti propongo che se provato dovrebbe darti il risultato che stai cercando (non guardare le larghezze, è solo un esempio da cui prender spunto, ho dato anche i colori tuoi per aiutarti

).

HTML

codice:

<html>
  <head>
    <title>Laboratorio</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="container">
      <div id="content">
        Qui fantastigliardi di paperon de paperoni di contenuti!...
      </div>
      <div id="footerlungo">
        Io sono il footer lungo, piacere!
        <div id="footeralto">
          Quello alto, piacere!
        </div>
      </div>
    </div>
  </body>
</html>

CSS (in index.css, stessa directory)

codice:

#container{
	width: 600px;
	height: 400px;
}

#content{
	width: 500px;
	height: 330px;
	background-color: lime;
}

#footerlungo{
	width: 500px;
	height: 70px;
	background-color: fuchsia;
	position: relative;
}

#footeralto{
	width: 100px;
	height: 170px;
	background-color: fuchsia;
	position: absolute;
	left: 500px;
	top: -100px;
}

Il segreto sta nell'utilizzo dell'assoluto relativo al suo genitore, infatti l'assoluto fa riferimento alle coordinate del punto superiore sinistro del suo primo diretto ascendente a posizionamento relativo. Che detto in tricolore vorrebbe dire che ho dato "position: relative;" al footer lungo dal momento che il footer alto ora è suo figlio, perciò quando andrà a cercare le coordinate assolute, le calcolerà in base al punto d'aggancio del footer lungo (perché relativo) anziché dell'intera finestra (vorrei ringraziare pubblicamente Skyblaze per questo suggerimento che mi diede tempo fa e che mi spalancò le porte di un mondo nuovo

).
Quindi se capisci il meccanismo (semplice in realtà, ma intrecciato da dire a parole), poi, facilmente, lo potrai applicare al tuo codice.

Ah dimenticavo, il codice l'ho testato su FF2 e IE7 e funge

PS: ti sei preoccupato per la lunghezza del tuo post... e io che dovrei dire??

hth
ciauz

**justonemoment** · 26-08-2008, 11:31

Grazie di cuore Raccoon!!!

ho capito l'utilizzo dell'assoluto relativo, una bella svolta. Praticamente posiziono veramente tutto come mi pare ghghgh!!!
Dovrei aver risolto il layout, ho aggiunto il menu di destra e messo un clear:both;

posto il codice per renderlo disponibile a chi abbia a che fare con un layout del genere:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<script>

</script>
<style type="text/css">
#container{
	width: 600px;
	height: 400px;
	float: left;
}

#content{
	width: 500px;
	height: 500px;
	background-color: lime;
	float: left;
}

#menudx{
	width: 80px;
	height: 230px;
	background-color: green;
	float:left;
}

#footerlungo{
	width: 500px;
	height: 70px;
	background-color: fuchsia;
	position: relative;
	clear: both;
}

#footeralto{
	width: 100px;
	height: 170px;
	background-color: fuchsia;
	position: absolute;
	left: 500px;
	top: -100px;
}

</style>
</head>
<body>
    <div id="container">
      <div id="content">
        Qui fantastigliardi di paperon de paperoni di contenuti!...</div>
      <div id="menudx"></div>
      <div id="footerlungo">
        Io sono il footer lungo, piacere!
        <div id="footeralto">
          Quello alto, piacere!
        </div>
      </div>
    </div>
</body>
</html>

Grazie ancora Raccoon, sei stato veramente disponibile e gentile, fa piacere frequentare un forum con persone così!

P.S.: Dimenticavo... se avrò altri problemi di layout chiederò di te!!!

**gengix** · 26-08-2008, 12:39

Scusa se mi intrometto ma non è proprio un esempio corretto il tuo layout definito in questo modo =)

Definire delle altezze per gli elementi di blocco che compongono la struttura non è una buona pratica, questo perchè il layout diventa troppo rigido.

Se un utente (e molti utenti per necessità lo fanno) dovesse aumentare le dimensioni del testo, quest'ultimo "sfonderebbe" i propri contenitori (inoltre hai degli elementi posizionati che verrebbero sovrapposti) e il risultato visivo lo puoi intuire.

Hai definito un'altezza per #container che di per se viene già "sfondata" dall'elemento figlio #content.

Inserire del testo libero dentro dei div e non all'interno di opportuni elementi (esempio

) è semanticamente scorretto e non agevolerebbe chi utilizza tecnologie assistive.

Attenzione all'utilizzo dei posizionamenti, puoi posizionare tutto è vero, ma è un'arma a doppio taglio. I posizionamenti bisognerebbe utilizzarli solo se strettamente necessario.

Prima dell'aspetto grafico di una soluzione bisognerebbe tenere conto dell'aspetto funzionale di una struttura rendendola adattabile a diverse situazioni =)

**justonemoment** · 26-08-2008, 15:11

hai perfettamente ragione gengix,
il mio non voleva essere un "must" ma soltanto un consiglio su come risolvere il problema, è ovvio che poi ognuno lo deve riadattare alle proprie esigenze e soprattutto a quello dell'usabilità del sito.
Per quello che sto creando non necessito di molta fluidità o di spazi variabili, quindi per comodità alcune altezze le fisso e alcune le lascio elastiche. Faccio sempre come mi conviene :P
So che non è l'approccio migliore ma a volte mi risulta più redditizio.

Edit: Visto che come layout va un pò fuori dai classici standard, qualcuno capace di scrivere l'esempio in maniera corretta lo potrebbe postare, può essere molto utile.

**gengix** · 26-08-2008, 17:29

Visto che come layout va un pò fuori dai classici standard, qualcuno capace di scrivere l'esempio in maniera corretta lo potrebbe postare, può essere molto utile.

Mi faresti vedere un immagine della pagina reale?

**justonemoment** · 26-08-2008, 17:59

mail to you

**gengix** · 27-08-2008, 10:30

Ecco qua:

codice:

<!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" />
<title>Prova</title>
	<style type="text/css">
	*{
	margin:0;
	padding:0;
	}
	html {
	font-size:100%;
	}
	body {
	text-align:center;
	font: 1em/1.5 Arial, Verdana, Tahoma, sans-serif;
	}
	ul, li {
	list-style:none;
	}
	.hide {
	position:absolute;
	left:-100000px;
	}
	.text {
	font-size:0.81em;
	}
	div#container {
	margin:auto;
	width:700px;
	text-align:left;
	background:#ffefd8;
	}
	div#header {
	background:#fedfc2;
	color:#fff;
	}
	div#navBar, ul#menu  {
	background:#f9afbc;
	height:1%;
	}
	div#navBar:after, ul#menu:after {
	content:".";
	clear:both;
	display:block;
	visibility:hidden;
	height:0;
	}
	ul#menu li {
	float:left;
	}
	ul#menu li a {
	display:block;
	width:100px;
	margin-left:0.5em;
	text-align:center;
	background:#e57f8d;
	color:#fff;
	}
	div#links {
	float:right;
	margin-top:10px;
	width:100px;
	background:#f9afbc;
	color:#fff;
	}
	div#content {
	margin-right:100px;
	padding:1em;
	background:#ffefd8;
	position:relative;
	}
	div#footer {
	clear:both;
	background:#f9afbc url(footer.jpg) center top no-repeat;
	height:auto !important;
	min-height:122px;
	height:122px;
	}
	div#footer p {
	padding-top:80px;
	}
	</style>
</head>
<body>
	<div id="container">
		<div id="header">
			<h1>young women become active citizen in europe</h1>
			<div class="hide">
				<h2>Accesso rapido:</h2>
				<ul>
					[*]Contenuto
					[*]Menu di navigazione
					[*]Sezione dei links
				[/list]
			</div>
		</div>
		<div id="navBar">
			<h2 class="hide">Menu di navigazione</h2>
			<ul id="menu">
				[*]home
				[*]partners
				[*]campus
				[*]forum
			[/list]
		</div>
		<div id="links">
			<h2>Links</h2>
			<ul>
				[*]voce1
				[*]voce2
				[*]voce3
				[*]voce1
				[*]voce2
				[*]voce3
			[/list]
		</div>
		<div id="content">
			<div class="hide">

Sei in: home</p></div>
			<p class="text">Ogni singola frase all´interno di un testo contiene solo una parte delle informazioni che sono oggetto della comunicazione. L´economia del discorso richiede che le parti si compongano articolandosi in legami e riferimenti incrociati, riducendo così al minimo la ridondanza e le ripetizioni. Le lingue si dotano perciò di dispositivi che colleghino fra loro le frasi per esprimere esplicitamente l´informazione necessaria a completarne il senso. Si prenda il testo seguente:
			   Ho visto Gianni uscire di gran fretta. Gli ho chiesto: "Dove corri?". Non mi ha sentito. Glielo ho ripetuto. E lui, per tutta risposta: "Lasciami stare!"...
			   Le frasi semplici gli ho chiesto, non mi ha sentito, glielo ho ripetuto, e lui per tutta risposta non sono comprensibili se isolate dal contesto, in quanto indici di coesione degli elementi della frase.
			</p>
		</div>
		<div id="footer">
			

Questo è il footer</p>
		</div>
	</div>
</body>
</html>

Io a grosso modo lo farei così. Testalo su browser anche più datati ma non dovrebbero esserci dei problemi.

Fai delle prove aumentando il testo e vedrai che il documento rimane leggibile.

Prova disattivare anche gli stile e vedere la struttura che include alcuni soluzioni che danno un minimo di accessibilità al documento.
Questo è un inizio, per le lingue non utilizzerei la soluzione delle bandierine, soluzione poco accessibile.

Per il footer, risolvi tagliando un'immagine (se vuoi te la mando) che comprende il pannello rosa scuro con un pezzo di marroncino e il logo che ti interessa. Il tutto diventa il background del footer, evitando così i posizionamenti.

Fammi sapere!

Discussione: Layout con footer diviso (2 altezze diverse)

Strumenti discussione

Ricerca discussione

Visualizza

Layout con footer diviso (2 altezze diverse)

Mi togli qualche curiosità?

Personalmente ti consiglierei un altro approccio

Permessi di invio