Sono un principiante di CSS, e ormai sono giorni che tento di sistemare questo layout semplicissimo.
So che l'argomento è ampiamente trattato, ma adattarlo a quello che serve a me da solo non ci riesco. Una mano o qualche indicazione mi permetterebbe di risolvere il problema.
Problema:
1 sola colonna fluida (elastica) con larghezza da 800 a 1024
La pagina deve essere allineata al fondo schermo min-height:100% e allungarsi all'aumentare del contenuto. Deve avere due ombre laterali.
Ho bisogno anche di un div hidden che contiene una immagine semitrasparente che funge da "Tappo" quando viene aperta un'altra div hidden che contiene delle caselle di scelta.
La pagina "ricorda la posizione" per cui se sono sceso con la barra di scorrimento, al rientro nella pagina mi trovo alla stessa altezza.
Il menu verticale scende con la pagina.
Vi allego quello che ho realizzato.
Ed ecco il terribile CSSCodice PHP:<body>
<div id="tutto">
<div id="container">
<form id="frmMenu" runat="server">
<div id="header">
...
</div>
<div id="menusinistra">
...
</div>
<div id="centrodestra">
...
</div>
<div id="clearfooter"></div>
<div id="footerimmagine">
....
</div>
<div id="container1"></div>
<div id="container2"></div>
<div id="RicRicerca">(questo è hidden)
....
</div>
</form>
</div>
<div id="Tappo"></div>(questo è hidden)
</div>
</body>
I problemi che riscontro:Codice PHP:html, body{ height:100%; margin:0; padding:0;}
h1, h2, h3, h4, h5, h6{margin:0;}
address, blockquote, dl, form, fieldset, ol, table, p, pre, ul{
margin:0;
}
/* mac hide\*/
html, body {height:100%}
/* end hide */
body{
font-family: Arial, Helvetica, sans-serif;
background-color: #D9DADC;
min-width:760px;/* for mozilla*/
color: #003;
text-align: center;
}
div#tutto{
position:relative;
min-height: 100%;
color: #003;
background-color: #FFF;
text-align:center;}
* html #tutto{height:100%}
html>body #tutto{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
div#container{
position:relative;
min-height: 100%;
min-width: 750px;
max-width: 974px;
margin:auto;
padding: 0px 20px 0px 20px;
color: #003;
background-color: #FFF;
text-align:center;}
* html #container{height:100%}
html>body #container{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
div#container1{
position:absolute;
top:0px;left:0px;
min-height: 100%;
width: 9px;
background: transparent url(../images/Bordo-S.gif) repeat-y left top;}
div#container2{
position:absolute;
top:0px; right:0px;
height: 100%;
width: 9px;
background:transparent url(../images/Bordo-D.gif) repeat-y right top;}
#clearfooter{ /*needed to make room for footer*/
clear:both;
height:59px;}
#footerimmagine{
position:absolute;
bottom:0; left:0;
height:59px;
width:98%;
margin-left:1%;
margin-right:1%;
background: url(../images/Parte-bassa.gif) no-repeat center top;}
* html #footer {/*only ie gets this style*/
/* \height:52px;/* for ie5 */
/* he\ight:50px;/* for ie6 */}
div,p {margin-top:0}/*clear top margin for mozilla*/
div#header{
height: 91px;
margin: 20px 20px 0px 20px;
background:transparent url(../images/Parte-alta.gif) no-repeat left top;}
div#menusinistra{
position: absolute;
top:111px;
left: 20px;
width: 146px;
color: #000033;
font-size: 13px;
border: 5px solid #D5E6ED;
margin: 0px 0px 0px 20px;
padding: 4px 4px 4px 4px;}
div#centrodestra{
position: relative;
color: #000033;
border: 5px solid #D5E6ED;
margin: 0px 20px 20px 190px;
padding: 4px 4px 0px 4px;}
div#Tappo{
visibility:hidden;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index:800;
background: transparent url(../images/Tappo.png) repeat right top;
}
div#RicRicerca{
border: 1px solid #000033;
position:fixed;
background-color:#FFF;
width:698px; /*700-2 di bordo*/
top:50%; left:50%;
margin: -200px 0px 0px -350px;
padding: 10px 10px 10px 10px;
z-index:900;
visibility: hidden;}
Ero riuscito a centrarlo poi ho dovuto aggiungere il div tutto, in modo che tappo aprendosi copra anche le eventuali "ali laterali" e copra il 100% della pagina che si continua a muovere in sottofondo, e adesso il tutto non raggiunge più il fondo pagina.
Ogni tanto le due ombre non raggiungono più il fondo pagina, ma si fermano a una altezza dal fondo pari all'altezza del Div hidden RicRicerca. Mi sembra che succeda quando avendo aperto il div uno esegue refresh della pagina. La carica correttamente senza il div ma l'altezza delle ombre cambia.
Container1 e 2 sono le due ombre laterali destra e sinistra. RicRicerca è popolato con un DataList.
Grazie per qualsiasi suggerimento.
Tomas
Rispondi quotando