Newsgroup: it.comp.www.html
Titolo: [Niubbo] Posizionamento div pagina html con CSS

Buonasera a tutti, mi sto cimentando nella progettazione della mia pagina
web usando le tecnologie html/css/php/mysql.
Premetto che sono alle prime esperienze nel campo quindi abbiate un po' di
pazienza.
Dunque, ho creato un contenitore che si centra all'interno del browser,
dove, al suo interno sono presenti ulteriori contenitori, header,
menu,corpo e a concludere il footer.
Il problema e' che io non so in anticipo quanto mi occupera' la sezione
corpo ( vorrei usare lo stesso template per tutto il sito, variando solo
il contenuto della sezione corpo) quindi mi risulta difficile posizionare
correttamente (senza accavallamenti strani, infatti se non specifico il
top-margin lui giustamente si disegna all'inizio) la sezione footer. Per la
sezione header,menu il posizionamento e' facile, tanto non cambiano,quindi
uso top-margin e menate varie.
Ora uso un layout con misure fisse (solo per provare e capire).
Qualcuno mi sa indicare come si puo' posizionare gli elementi senza sapere
le misure in precedenza..??
Spero di essere stato chiaro e grazie della pazienza.
SC
Posto il mio css (che utilizzo ora):
body,html {
	height:100%; 
	margin:0px; 
	padding:0px;
	background-color:#c4c8cd;
}
#container_template {
	width:900px;
	height:750px;
 
	position:absolute;
	left:50%;
	margin-left:-450px;
	margin-top:20px;
 
	border:1px solid #000000;
	background-color:#FFFFFF;
}
//ora con misure fisse dopo vorrei eliminare l'altezza
#container_corpo {
	width:900px;
	height:602px;
 
	position:absolute;
	margin-top:97px;
 
	background-color:#e5edf4;
}
#container_header {
	height:80px;
	width:900px;
 
	position:absolute;
 
	background-color:#f46b27;
	border-bottom:1px solid #000000;
}
// come lo posiziono senza sapere l'altezza di container_corpo??
#container_footer {
	height:50px;
	width:900px;
 
	position:absolute;
	margin-top:699px;
 
	background-color:#f46b27;
	border-top:1px solid #000000;
 
}
#container_menu {
	height:15px;
	width:900px;
 
	position:absolute;
	margin-top:81px;
 
	background-color:#7ebdf8;
	border-bottom:1px solid #000000;
}
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 Spero di essere stato chiaro e grazie della pazienza.
E` proprio perche` usi misure fisse e posizione absolute per tutti gli 
elementi che hai poca flessibilita`.
Devi ragionare in modo piu` "elastico".
Senza vedere il codice e` difficile immaginare quello che vuoi, ma dai css 
mi pare che tu non voglia colonne, solo 4 elementi uno sotto l'altro: 
header, menu, corpo, footer.
In questo caso ti basta mettere i 4 div in quest'ordine nell'html.
Se invece vuoi usare una struttura (nell'html) del tipo corpo, menu, 
header, footer, devi prevedere gli ingombri di header e menu, e impostare 
a loro un position:absolute, mentre a corpo darai solo un margin-top pari 
alla somma delle loro dimensioni.
Non necessariamente e` in pixel, puoi anche fare
#header {
  height: 10em;
  position: absolute;
  top: 0;
}
#menu {
  height: 3em;
  position: absolute;
  top: 10em;
}
#corpo {
  margin-top: 13em;
}
#footer {
 /* non serve niente */
}
Ah, i commenti con // non sono standard, e funzionano solo con Firefox 
(non so con Opera e Safari. Di sicuro con IE no).
ye.


 header, menu, corpo, footer.
Ciao, intanto grazie per la risposta.
Hai capito bene, sono 4 elementi uno sotto l'altro, header, menu, corpo,
footer, eventualmente solo la sezione corpo sara' un po' piu' elaborata,
con magari una colonna posizionata a sinistra della pagina.
La mia domanda adesso e':
ma essendo gli elementi a loro volta contenuti in un box centrato,
mantenendo fissi header e menu',mantenedo variabile l'altezza del corpo
della pagina, il box crescera' a sua volta in relazione all'altezza della
pagina..??
Inoltre il footer se lo lascio come dici tu, non rischia di porizionarsi
in quella che e' la pozizione 0,0 del box contenitore..??
Spero di essermi spiegato e buon proseguimento di serata.
SC


 pagina..??
In teoria sì.
Ti consiglio, specialmente se sei alle prime armi (come lo ero io due 
mesi fa ;) ) di non cercare di reinventare ciò che è già stato fatto 
(meglio) da altri: ci sono molti siti (esempio 
http://www.dynamicdrive.com
) che propongono layout, menu, form e 
quant'altro, in modo da poter essere utilizzati senza preoccuparsi di 
cosa succederà con IE o Opera, perché qualcun'altro li ha già testati.
Ovviamente non puoi semplicemente fare un copia/incolla, altrimenti alla 
prima modifica sei morto: devi comunque studiare i CSS per capire cosa 
fa un float:left o un position:relative; ci sono molti tutorial in giro, 
anche in ita, per esempio 
http://css.html.it/guide/leggi/2/guida-css-di-base/
Buono studio, e non dimenticare che se una cosa funziona su un browser, 
non è affatto detto che funzioni su un altro :)
-- 
Jax


 cosa succederà con IE o Opera, perché qualcun'altro li ha già testati.
Aggiungo di cercare su Google "layout gala". Lo sto testando in questo 
periodo e non sembra affatto male. :)
A fronte di un HTML fisso (header, footer, contenuto e due box 
aggiuntivi), cambiando solo il css lo trasformi come vuoi.
Ora sono di corsa, nel caso servisse, domani approfondiamo :)
Bye.


 periodo e non sembra affatto male. :)
GREAT! :D
Ho sempre ritenuto 
html.it
 un gradino sotto ai vari siti stranieri, ma 
pian piano mi sto ricredendo...
-- 
Jax


 pian piano mi sto ricredendo...
E' solo strapieno di javascript (credo) che lo rende innavigabile sul 
mio ibook.
