[xhtml & CSS] emulazione iframes css e scroll di internet explorer

**ledfloyd** · 28-03-2007, 23:57

buona sera, stò facendo una pagina web che contiene tre div cornice e uno centrale nel quale ci sono i contenuti, grazie all'emulazione degli iframes con i css.
però non funziona bene...quando faccio lo scrolling della pagina i tre div cornice non rimangono fissi ma salgono insieme alla pagina...questo con internet explorer mentre con firefox va quasi tutto bene...un'unica piega stà nel fatto che non riesco a capire come mai la scroll bar sia distante dal bordo pagina:

ora cmq vi scrivo il codice
INDEX.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" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<head>

<link href="style.css" rel="stylesheet" type="text/css" media="screen">



</head>

<body>

<div id="testa">
<div id="angolo-alto">[img]immagini/angoloAltoDestra.jpg[/img]</div>
<div id="testa-dx">

</div>
<div id="testa-sx">

</div>
</div>

<div id="sinistra">
<div id="sinistra-interno">

</div>
</div>

<div id="contenuti">
<div id="contenuti-sx">
<div id="banner"></div>
<div id="corpo">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pretium. Aliquam faucibus facilisis purus. Praesent dictum sollicitudin erat. Aliquam est velit, interdum et, pellentesque non, gravida a, sapien. Nulla facilisi. Proin tempus pulvinar quam. Proin tortor. Aenean vulputate lorem eu erat. Nunc volutpat, lacus et sodales facilisis, libero tellus condimentum massa, in mattis erat risus a orci. Phasellus accumsan lectus nec eros. Donec iaculis, augue ac imperdiet sodales, erat pede gravida justo, quis tincidunt turpis justo et justo. Nullam id nisi. Ut sit amet elit vel diam vestibulum egestas. Cras eleifend orci eu odio. Maecenas commodo feugiat pede. Donec tincidunt purus sed elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer suscipit magna in tellus. Curabitur auctor. Nulla mi.

Etiam luctus. Vivamus vulputate, augue eu vehicula suscipit, sem urna tempus purus, eget feugiat sem elit ac leo. Quisque a metus ornare nisl dictum tempus. Pellentesque quam. Sed eu leo vitae leo aliquet egestas. Fusce gravida ligula eget turpis interdum pellentesque. Sed quis elit. Nunc turpis nulla, ullamcorper vel, ornare a, laoreet id, nisi. Donec feugiat nulla. Sed nec dui. Pellentesque a ante adipiscing sem tristique feugiat. Etiam sit amet nunc ac elit dapibus dapibus. In congue.

Ut suscipit quam at nulla. Vestibulum neque magna, commodo at, hendrerit ac, molestie sed, mi. Duis posuere iaculis velit. Quisque tortor. Fusce sagittis consectetuer diam. Nullam commodo pretium dolor. Nullam eget nunc. Etiam laoreet massa a eros. Vivamus eget enim id ipsum euismod feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque fermentum convallis diam. Maecenas quam lorem, mollis eu, varius eu, malesuada a, tortor. Integer eu odio sit amet lacus gravida tristique. Mauris ipsum orci, suscipit ac, condimentum nec, accumsan et, justo. Aenean tristique pede eu lectus. Aliquam vel nulla vitae urna laoreet faucibus. Nullam non est eu urna viverra euismod.

Sed molestie est at risus. Suspendisse pede sapien, dapibus sit amet, feugiat at, facilisis sit amet, lectus. Cras fringilla. Aliquam id velit. Pellentesque rhoncus adipiscing libero. Donec sagittis rhoncus tortor. Duis et orci. Quisque volutpat. Sed orci. Curabitur auctor sollicitudin libero. Integer lectus sapien, iaculis id, scelerisque ac, pharetra at, quam. In sed dolor. Sed imperdiet enim. Mauris nec erat. Sed arcu mauris, placerat iaculis, ultrices at, ultrices vitae, purus. Curabitur ornare vehicula orci.

Nunc ut lacus at purus fringilla bibendum. Vivamus porttitor porta nisl. Proin massa lectus, dapibus ut, ultricies at, blandit eget, orci. Proin pellentesque, risus semper accumsan feugiat, risus mauris varius orci, eu mattis nisi ipsum at elit. Cras cursus, dui ac scelerisque ullamcorper, lectus velit semper massa, id convallis purus orci sit amet diam. Curabitur diam. Integer faucibus vestibulum leo. Morbi euismod ligula eu lacus. In hac habitasse platea dictumst. Nullam dignissim velit ut erat. Nullam a massa. Etiam at ipsum. Fusce cursus est sed diam vestibulum faucibus. Vestibulum vel massa. Nam venenatis. Phasellus metus sapien, ullamcorper eu, viverra nec, cursus id, est. Nulla ultricies.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pretium. Aliquam faucibus facilisis purus. Praesent dictum sollicitudin erat. Aliquam est velit, interdum et, pellentesque non, gravida a, sapien. Nulla facilisi. Proin tempus pulvinar quam. Proin tortor. Aenean vulputate lorem eu erat. Nunc volutpat, lacus et sodales facilisis, libero tellus condimentum massa, in mattis erat risus a orci. Phasellus accumsan lectus nec eros. Donec iaculis, augue ac imperdiet sodales, erat pede gravida justo, quis tincidunt turpis justo et justo. Nullam id nisi. Ut sit amet elit vel diam vestibulum egestas. Cras eleifend orci eu odio. Maecenas commodo feugiat pede. Donec tincidunt purus sed elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer suscipit magna in tellus. Curabitur auctor. Nulla mi.

Etiam luctus. Vivamus vulputate, augue eu vehicula suscipit, sem urna tempus purus, eget feugiat sem elit ac leo. Quisque a metus ornare nisl dictum tempus. Pellentesque quam. Sed eu leo vitae leo aliquet egestas. Fusce gravida ligula eget turpis interdum pellentesque. Sed quis elit. Nunc turpis nulla, ullamcorper vel, ornare a, laoreet id, nisi. Donec feugiat nulla. Sed nec dui. Pellentesque a ante adipiscing sem tristique feugiat. Etiam sit amet nunc ac elit dapibus dapibus. In congue.

Ut suscipit quam at nulla. Vestibulum neque magna, commodo at, hendrerit ac, molestie sed, mi. Duis posuere iaculis velit. Quisque tortor. Fusce sagittis consectetuer diam. Nullam commodo pretium dolor. Nullam eget nunc. Etiam laoreet massa a eros. Vivamus eget enim id ipsum euismod feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque fermentum convallis diam. Maecenas quam lorem, mollis eu, varius eu, malesuada a, tortor. Integer eu odio sit amet lacus gravida tristique. Mauris ipsum orci, suscipit ac, condimentum nec, accumsan et, justo. Aenean tristique pede eu lectus. Aliquam vel nulla vitae urna laoreet faucibus. Nullam non est eu urna viverra euismod.

Sed molestie est at risus. Suspendisse pede sapien, dapibus sit amet, feugiat at, facilisis sit amet, lectus. Cras fringilla. Aliquam id velit. Pellentesque rhoncus adipiscing libero. Donec sagittis rhoncus tortor. Duis et orci. Quisque volutpat. Sed orci. Curabitur auctor sollicitudin libero. Integer lectus sapien, iaculis id, scelerisque ac, pharetra at, quam. In sed dolor. Sed imperdiet enim. Mauris nec erat. Sed arcu mauris, placerat iaculis, ultrices at, ultrices vitae, purus. Curabitur ornare vehicula orci.

Nunc ut lacus at purus fringilla bibendum. Vivamus porttitor porta nisl. Proin massa lectus, dapibus ut, ultricies at, blandit eget, orci. Proin pellentesque, risus semper accumsan feugiat, risus mauris varius orci, eu mattis nisi ipsum at elit. Cras cursus, dui ac scelerisque ullamcorper, lectus velit semper massa, id convallis purus orci sit amet diam. Curabitur diam. Integer faucibus vestibulum leo. Morbi euismod ligula eu lacus. In hac habitasse platea dictumst. Nullam dignissim velit ut erat. Nullam a massa. Etiam at ipsum. Fusce cursus est sed diam vestibulum faucibus. Vestibulum vel massa. Nam venenatis. Phasellus metus sapien, ullamcorper eu, viverra nec, cursus id, est. Nulla ultricies.

</div>
</div>
<div id="contenuti-dx">
<div id="dx-alto"></div>
<div id="dx-basso"></div>
</div>

</div>

<div id="piede">
<div id="angolo-sinistra">[img]immagini/angoloBassoSinistra.jpg[/img]</div>
<div id="angolo-destra">[img]immagini/angoloBassoDestra.jpg[/img]</div>
</div>

</body>

</html>

STYLE.CSS

body {
overflow: hidden;
margin:0;
padding:89px 0 89px 184px;
background-image: url(immagini/biancoBody.jpg);
background-position: left;
background-repeat: repeat-y;
font-size: 1em;
}

#testa, #sinistra, #piede{
position:absolute;
left:0;
overflow:auto;
}

#testa {
top:0;
z-index:10;
width:100%;
height:89px;
background-color:#01499d;
background-image: url(immagini/angoloAltoSinistra.jpg);
background-position: left;
background-repeat: no-repeat;
}

#testa-sx{
margin-left: 25px;
margin-top: 7px;
}

#angolo-alto{
position:absolute;
top:0;
right:0;
z-index:0;
}

#testa-dx{
position:absolute;
top:0;
right:0;
z-index:1;
}

#sinistra{
top:89px;
bottom:89px;
width:184px;
margin:0;
padding:0;
color:#000;
background-color:#e1e7f3;
background-image: url(immagini/biancoSinistra.jpg);
background-position: left;
background-repeat: repeat-y;
}

#sinistra-interno{
margin-left: 10px;
}

#contenuti{
position:absolute;
top:89px;
bottom:89px;
left:184px;
rigt:0;
overflow-y:auto;
padding: 1em 0 1em 1em;
}

#piede{
bottom:0;
width:100%;
height:89px;
background:#004a9d;
font-size: 10px;
}

#angolo-sinistra{
position:absolute;
bottom:0;
left:0;
}

#angolo-destra{
position:absolute;
bottom:0;
right:0;
}

.testo-piede{
margin-left: 50px;
}

@media screen {
body>#testa{position:fixed!important;}, body>#basso{position:fixed!important;}, body>#sinistra{position:fixed!important;}
}

STYLEIE.CSS

body{
margin:0;
padding:89px 0 0 0;
}

#contenuti{
overflow:scroll;
padding:1em 0 1em 1em;
}

#piede{
bottom:-2px;
}

#sinistra{
top:0;
overflow:hidden;
height:100%;
margin:0;
padding:89px 0 0 0;
}

#angolo-alto{
right:-1px;
}

#angolo-destra{
right:-1px;
}

il codice è stato cambiato un sacco di volte a causa degli innumerevoli ed inutili tentativi che ho fatto..quindi...nel caso individuate altri errori fatemelo notare.
allego anche l'indirizzo per scaricare un archivio contenente tutto:
http://www.megaupload.com/?d=CJUKC7Q0

**ledfloyd** · 29-03-2007, 11:32

nessuno può darmi una mano???

**ledfloyd** · 29-03-2007, 18:28

ormai è diventato un monologo il mio...mi domando e mi rispondo da solo...
cmq il problema con internet explorer l'ho risolto...non mi ricordo come
ora però ne ho uno con firefox....
lo scroll avviene ma non fino alla fine del contenuto del div contenitore...
credo che non tenga conto del div piede e quest'ultimo copra parte del contenuto

qualcuno ha già avuto questo problema?
sa come risolverlo?

grazie per le eventuali risposte

**ledfloyd** · 29-03-2007, 18:34

risolto...non ho messo overflow: auto; nel css di ffx

l'altro problema l'ho risolto bloccando lo scroll del body:

e modificando il css in vari punti (principalmente ridimensionamenti e position: fixed!imprtant

si può chiudere per me..

Discussione: [xhtml & CSS] emulazione iframes css e scroll di internet explorer

Strumenti discussione

Ricerca discussione

Visualizza

[xhtml & CSS] emulazione iframes css e scroll di internet explorer

Permessi di invio