Newsgroup: it.comp.www.html
Titolo: [aiuto] problema con CSS

Ho un CSS che dovrebbe costruirmi una struttura di questo tipo:
[head----------------------------]
[menu---][corpo-----------------]
[footer---------------------------]
Nel CSS head ha width=100% in modo che si espanda su tutta la pagina a
seconda della risoluzione (stessa cosa vale per footer). Menu invece gli do
una posizione 'absolute' e a seconda dell'height di 'head' lo colloco sotto
di questa attribuendo a width=200px. Ora arriva il PROBLEMA: Corpo deve
avere una posizione 'absolute' e deve distaccarsi ovviamente dal bordo 200px
pari alla larghezza di Menu, se pero' come width gli do 100% Corpo si
espande oltre la lunghezza di head, cioe':
[head----------------------------]
[menu---][corpo------------------------]
[footer---------------------------]
La DOMANDA: come posso far rimanere sempre in linea, indipendentemente dalla
risoluzione, il margine destro di head, corpo, e footer?
Grazie!
PS: bozza del CSS di cui parlavo... dove la percentuale di Corpo e 90%...
#head {
 background-color: Red;
 width: 100%;
 height: 20px;
}
#menu {
 position:absolute;
 background-color: White;
 width: 200px;
 height: 280px;
}
#corpo {
 position:absolute;
 background-color: White;
 margin: 0px 0px 0px 200px;
 width: 90%;
 height: 280px;
}
#footer {
 background-color: Red;
 width: 100%;
 height: 30px;

 ha scritto nel messaggio
news:aUQmb.67133$vO5.2...@twister1.libero.it...
|
| La DOMANDA: come posso far rimanere sempre in linea, indipendentemente
dalla
| risoluzione, il margine destro di head, corpo, e footer?
Con Ie 5,5 e Opera 6.01 modificando il css come sotto,
si visualizza come vuoi tu.
Bye Cico
#head {
position:relative;
 background-color: Red;
 width: 100%;
 height: 20px;
}
#menu {
 position:relative;
float:left;
 background-color: White;
 width: 200px;
 height: 280px;
}
#corpo {
 position:relative;
 background-color: black;
 margin: 0px 0px 0px 200px;
 width: auto;
 height: 280px;
}
#footer {
position : relative;


Cosě impostato il tuo corpo prende il 100% dell'elemento padre e cioč il
body. Le soluzioni sono tante ma puoi provare questa: Mantenendo la tua
struttura... fammi sapere.
 body {
 margin: 0px;
}
div#head {
 height: 50px;
 width:100%;
 background-color: black;
}
div#menu {
 margin-right: -2px;  /* corregge un bug di IE */
 float: left;
 width:200px;
 height: 100px;
 background-color: yellow;
}
div#corpo {
 height: 100px;
 background-color: blue;
}
div#footer {
 clear: both;
 width:100%;
 background-color: red;
}

 position : relative;
Come mai metti sempre relative... in realta' funziona anche senza?!?
Il problema è che ci sono 2 o 3 pixel tra MENU e CORPO... forse si annullano
con quanto proposto dall'altra risposta che ho ricevuto... ma è al quanto
fastidioso!
Grazie,
David.

  clear: both;
Cosa vuol dire?
Grazie,
David.

"Via"  ha scritto:
| Ho un CSS che dovrebbe costruirmi una struttura di questo tipo:
|
| [head----------------------------]
|
| [menu---][corpo-----------------]
|
| [footer---------------------------]
|
| Nel CSS head ha width=100% in modo che si espanda su tutta la pagina a
| seconda della risoluzione (stessa cosa vale per footer). Menu invece gli do
| una posizione 'absolute' e a seconda dell'height di 'head' lo colloco sotto
| di questa attribuendo a width=200px. Ora arriva il PROBLEMA: Corpo deve
| avere una posizione 'absolute' e deve distaccarsi ovviamente dal bordo 200px
| pari alla larghezza di Menu, se pero' come width gli do 100% Corpo si
| espande oltre la lunghezza di head, cioe':
|
| [head----------------------------]
|
| [menu---][corpo------------------------]
|
| [footer---------------------------]
|
| La DOMANDA: come posso far rimanere sempre in linea, indipendentemente dalla
| risoluzione, il margine destro di head, corpo, e footer?
|
| Grazie!
Ciao Via,
    se posizioni assolutamente il menů, dovresti farlo anche per il corpo
(e soprattutto specificare le coordinate).Inoltre i div, a meno che non
siano float, posizionati assolutamente, o vicino a elementi float, avranno
larghezza 100% implicita essendo block-level element.
Se invece si specifica "width: 100%" al "corpo", nel tuo caso succede,
com'e' giusto che sia, che il 100% č riferito al suo contenitore,
quindi il body e cioč il viewport.
come lo farei? molto piů semplicemente con un float del menů e
aggiungendo un margin-left al corpo.
html:
<div id="header">
        <!-- ecc..-->
</div>
<div id="menu">
        <!-- ecc..-->
</div>
<div id="content">
    <!-- ecc..-->
</div>
<div id="footer">
    <!-- ecc..-->
</div>
E il css degli elementi cruciali:
div#menu{
    float: left;
    width: 200px
    }
div#content{
    margin-left: 200px
    }
div#footer{
    clear: left
    }
Ciao,
    SantaKlauss

Ciao ragazzi.
A me se scrivo il codice che tu dici, mi compare uno spazio fra i due div,
credo sia un bug di explorer, come dicevo sopra...

 David.

 Questa sembra essere la parola magica... che vuol dire?
e' arrivato il momento (anche per te) di dare un occhio
al "float tutorial".
http://css.maxdesign.com.au/floatutorial/tutorial0801.htm
non e' difficile, poi tutto ti sara' piu' chiaro.
poi per finire in bellezza:
"float model problem"
http://www.positioniseverything.net/floatmodel.html
ciao.
-- 
email: goldicus1970 AT 
yahoo.it
web: 
http://www.deelan.com