Layout con header e footer [era:Sovrascrittura sfondo con div]

**Dark867** · 19-07-2012, 23:49

Ciao, vorrei ottenere un semplicissimo layout fatto così:

<header>
<content><menu>
<footer>

che occupi tutta la pagina, cioè anche quando c'è scritto solo un rigo in content il footer va e resta cmq in basso a tutto e l'header allo stesso modo in alto.

ho provato così:
html:

codice:

<body>
	<div id="container">
	<div id="header"></div>
        <div id="navigation"></div>
        <div id="content"></div>
        <div id="footer"></div>
	</div>
</body>

e, ovviamente css:

codice:

#container{height: 100%;}
#header{float:top;}
#navigation{float:right;}
#content{float:left;}
#footer{float:bottom;}
}

più diverse varianti, ma non riesco...mi date un mano?

**Mich_** · 20-07-2012, 09:31

Praticamente hai inventato valori per alcuni attributi CSS

.

Comunque vedi tra i "lilnk utili" alla voce "footer" (e` in prima pagina, in evidenza).

**Dark867** · 20-07-2012, 09:49

In che senso?Uso solo float e heigth praticamente...a meno che non sia un errore di battitura esistono eccome...

**Mich_** · 20-07-2012, 09:52

Il float esite, certo, ma non esistono i valori top e bottom per il float.

Comunque devi studiare qualcosa in piu`; e` per quello che ti ho indirizzato ai manuali

**Dark867** · 20-07-2012, 10:00

Cavoli hai ragione! Su consiglio di un altro utente ho usato le proprietà top e bottom e adesso sembra funzionare tutto bene...mi dai un giudizio su questo layout? Non vorrei aver commesso errori...

codice:

#header {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
}

#container {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}

#navi {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 250px;
    bottom: 0px;
    z-index:3
}

#content {
    position: absolute;
    top: 0px;
    right: 254px;
    left: 0px;
    bottom: 0px;
    overflow:auto;
    z-index:3
}

in particolare non capisco quando conviene usare float e quando è meglio fare come in questo caso...ah già che ci sei potresti anche modificare il titolo della discussione?Io non posso farlo nè eliminarla per poi ricrearla...

**Mich_** · 20-07-2012, 10:28

Usare i posizionamenti assoluti e` un rischio che porta a sovrapposizioni in alcuni browser/risoluzioni. E` una delle cose piu` complesse da fare, per cui e` assolutamente sconsigliabile per chi inizia.

Il mio consiglio l'ho gia` espresso: inizia daccapo partendo da un layout pronto.

**Dark867** · 20-07-2012, 11:59

Mi potresti dare il link di un layout basico fatto come ho detto o cmq simile?
Il dannato footer non riesce a restare in basso...ho provato a mettere una lista un po' più grande e mi ha sconvolto tutto!

**Mich_** · 20-07-2012, 12:04

Ci sono ottime raccolte di layout in giro per la rete. Alcune sono citate tra i "link utili".
Cerca quella che ti sembra piu` rispondente alle tue esigenze, e parti da quella.

**Dark867** · 20-07-2012, 12:21

Alcune pagine sono irraggiungibili, altre usano px (assoluto) che non mi va bene...vabbè continuo la ricerca se qualcuno ne trova uno con le % prima di me lo scriva qui per favore.

**Dark867** · 20-07-2012, 12:41

Ok ho guardato qualche tutorial e l'ho modificato..perché continua a non andare?

html:

codice:

<div id="container">
		
			<div id="header" >
				
			</div>
			
			<div id="content">content
			</div>
			
			<div id="navi">
				<ul>
					[*]HOME
					[*]HOME[*]HOME
				[/list]	
			</div>	
			
			<div id="footer">
			</div>	
</div>

css:

codice:

body,html {
    margin:0;
    padding:0;
    color:#000;
    background:#a7a09a;
}


#container {
	width: 100%;
	height: 100% 
    margin:0 auto;
    background:#99c;
}

#header {
	background:#ddd;
	height: 10%;
}

#content {
	float:left;
	width: 70%;
	height: 85%;
	background:#9c9;
}

#navi {
	float:right;
	width: 30%;
	height: 85%;
	background:#c9c;
}

#footer {
	clear: both;
	background:#cc9;
	height: 5%;
}

Discussione: Layout con header e footer [era:Sovrascrittura sfondo con div]

Strumenti discussione

Ricerca discussione

Visualizza

Non riesco a ottenere questo layout!

Permessi di invio