Accedi per seguire   
Seguaci 0
ZipGenius

[css] Allineare Un Oggetto Alla Base Della Pagina

3 messaggi in questa discussione

Come posso allineare un oggetto alla base della pagina, indipendentemente dalla lunghezza della stessa? (Vorrei fare un footer, giusto per rendere l'idea)

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Non puoi :)

Non esiste il concetto di pagina in html...

Una pagina html non ha dimensioni standard...

Quello che puoi fare è simulare la cosa attraverso javascript o i css (o entrambi).

Devi decidere se vuoi che la pagina abbia sempre le stesse dimensioni minime e allora puoi utilizzare solo i css.

Se invece vuoi che la pagina si adatti alle dimensioni dello schermo, usi javascript per farti restituire quei valori e i css per impostare la dimensione minima della pagina (dei div che conterranno la pagina).

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Si può :):P dipende però da cosa vuoi esattamente: vuoi il footer a fondo pagina oppure in fondo alla finestra (quella del browser)? In quest'ultimo caso usa questo codice:

<div id="footer">
  testo generico...
</div>

css:

#footer {
		position: absolute;
		bottom: 5px;
		right: 10px;
	}

Il problema però è che restringendo la finestra o sviluppando verticalmente la pagina questo footer può accavallarsi con i contenuti.

Se, invece, il tuo obiettivo è posizionare un footer a fondo pagina allora devi lavorare sugli elementi che lo sovrastano. Per ottenere questo risultato io utilizzo i float: creo un'area in cui vado a posizionare tutti gli elementi, definire una larghezza è importante per portare a capo l'elemento che deve fungere da footer.

Se, ad esempio, ci sono due colonne queste devono fare un float come il footer stesso, in questo modo la lunghezza delle due colonne sovrastanti regolerà la posizione del footer. Io per ottenere

Un esempio semplice:

<html>
<head>
<style type="text/css" media="all">

* {
	margin: 0;
	padding: 0;
}

div {
	border: 1px dotted red;
	margin: 10px;
}

#wrap {
	width: 450px;
}

#aaa {
	float: left;
	width: 200px;
	height: 200px;
}

#bbb {
	float: left;
	width: 200px;
	height: 300px;
}

#ccc {
	float: left;
	width: 150px;
	height: 30px;
}

</style>
</head>
<body>
<div id="wrap">
	<div id="aaa">colonna A</div>
	<div id="bbb">colonna B</div>
	<div id="ccc">footer</div>
</div>
</body>
</html>

In questo esempio le colonne (#aaa e #bbb) hanno una larghezza complessiva di 400px a cui vanno aggiunti i margin (10px per il lato destro e sinistro su ogni colonna = 40px), quindi 440px, mentre il footer ha una larghezza di 150px. Per far sì che si posizionino, come nello screenshot allegato, si deve creare un contenitore (#wrap) che definisca la larghezza dell'area da prendere in considerazione (450px).

post-19863-1188730423_thumb.jpg

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Crea un account o accedi per lasciare un commento

Devi essere un utente registrato per partecipare

Crea un account

Iscriviti per un nuovo account nella nostra community. È facile!


Registra un nuovo account

Accedi

Sei già registrato? Accedi qui.


Accedi Ora
Accedi per seguire   
Seguaci 0