Ciao a tutti,
supponiamo di avere in una pagina i seguenti elementi:
1) header
2) parte centrale
3) footer
Come posso far si che la header ed i footer rimangano rispettivamente in alto ed in basso e la parte centrale occupi lo spazio restante, operando un resize a seconda delle dimensioni della finestra?
Saluti,
carlostefano
Qui dovresti trovare le tue risposte.. LINK
Questa volta, più che un voto.. è favoreggiamento.
Ciao Al_katraz984
Grazie per la risposta, ma il layout che mi hai indicato non è quello che cercavo io. Infatti come si può notare dall'esempio il container centrale non diventa più alto all'aumentare delle dimensioni della finestra ma rimane della altezza giusta per contenere il testo al suo interno. Io invece vorrei che il footer si trovasse sempre nella parte più bassa dello schermo (senza lasciare spazi con il bordo inferiore) e l'elemento centrale si allungasse fino alla header in modo da coprire la restante parte della pagina, anche se il testo al suo interno fosse di una sola riga.
Codice CSS
codice:body { margin: 0; padding: 0; color: #000000; font-family: arial, helvetica, sans-serif; } html, body, #contents { min-height: 100%; width: 100%; height: 100%; } html>body, html>body #contents { height: auto; } #contents { postion: absolute; top: 0; left: 0; } #header { height: 3em; } #content { width: 100%; } #footer { position: fixed; bottom: 0; width: 100%; border-top: 1px solid #000000; background-color: #FFFFFF; color: #000000; }
Da li in poi ci sono tutti i layout.. Io ti dò lo spunto.. poi ti arrangi se no 200E ihi hi hi hih i
Questa volta, più che un voto.. è favoreggiamento.
Ciao Scorpion,
ho utilizzato il codice che css che hai postato con alcune modifiche, per cercare di ottenere esattamente il layout che desidero. Con Firefox ottengo il risultato voluto, mentre con explorer si creano 2 barre di scrorrimento verticali, quando invece vorrei ce ne fosse solo una, quella relativa al container centrale. Si tratterebbe quindi di risolvere questo problema.
Codice html:
<!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">
<html>
<head>
<title>Layout Monolitico</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<link rel="stylesheet" type="text/css" href="prova.css" />
</head>
<body>
<div id="header">
<h1>Html.it</h1>
</div>
<div id="contents" style="overflow:auto;">
<div>
<ul>
[*]Home
[*]Pillole
[*]Contenuti
[*]Grafica
[*]Linguaggi
[*]Webdesign
[*]Software
[/list]
</div>
<div>
<ul>
[*]Home
[*]Pillole
[*]Contenuti
[*]Grafica
[*]Linguaggi
[*]Webdesign
[*]Software
[/list]
</div>
<div>
<ul>
[*]Home
[*]Pillole
[*]Contenuti
[*]Grafica
[*]Linguaggi
[*]Webdesign
[*]Software
[/list]
</div>
<div>
<ul>
[*]Home
[*]Pillole
[*]Contenuti
[*]Grafica
[*]Linguaggi
[*]Webdesign
[*]Software
[/list]
</div>
</div>
<div id="footer">© 1997-2004 - Grafica, layout e guide sono di esclusiva proprietà di HTML.it s.r.l.
Note e informazioni legali</div>
</div>
</body>
Codice CSS (file prova.css) :
body {
margin: 0;
padding: 0;
color: #000000;
font-family: arial, helvetica, sans-serif;
}
html, body, #contents {
min-height: 100%;
width: 100%;
height: 100%;
}
html>body, html>body #contents {
height: auto;
}
#contents {
postion: absolute;
top: 0;
left: 0;
background-color:#CCFF00;
}
#header {
height: 3em;
position: fixed;
background-color:#FFFFFF;
border-bottom: 1px solid #000000;
width: 100%;
top: 0;
}
#content {
width: 100%;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid #000000;
background-color: #FFFFFF;
color: #000000;
}
Guardando un problema alla volta, la prima cosa che non va è la seguente: su Firefox specificando l'altezza di un elemento div in % invece che in px, non viene creata nessuna barra di scorrimento. Il tag div infatti diventa alto esattamente come il testo che contiene al suo interno, mentre con explorer la barra viene creata, a patto di specificare nel tag body la proprietà height ad un valore del 100%.
Codice html-css:
<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body style="height:100%;">
<div style="background-color:#CCCCCC; width:300px;">
Questa è l'intestazione
</div>
<div style="overflow:auto; height: 300px; width: 300px; background-color: #993300;">
<ul>
[*]Home
[*]Pillole
[*]Contenuti
[*]Grafica
[*]Linguaggi
[*]Webdesign
[*]Software
[/list]
<ul>
[*]Home
[*]Pillole
[*]Contenuti
[*]Grafica
[*]Linguaggi
[*]Webdesign
[*]Software
[/list]
<ul>
[*]Home
[*]Pillole
[*]Contenuti
[*]Grafica
[*]Linguaggi
[*]Webdesign
[*]Software
[/list]
<ul>
[*]Home
[*]Pillole
[*]Contenuti
[*]Grafica
[*]Linguaggi
[*]Webdesign
[*]Software
[/list]
</div>
</body>
</html>
Qualcuno sa come ottenere lo stesso effetto con firefox?
Nel codice postato prima ho messo height = 300px; così funziona anche con firefox, ma non funziona impostando una percentuale, es. height= 30%
Veramente io non vedo il problema ke dici tu... l'unica differenza ke vedo tra firefox e IE del codice ke ho postato io è la posizione del footer...
Ma tu hai provato ad usare con Firefox l'ultimo codice che ho postato io mettendo, al posto di height: 300px, height: 30%?
Permessi di invio
Rispondi quotando