• C
    User Newbie •

    Problema emulazione frame

    Ciao a tutti.
    Ecco il mio problema: io voglio realizzare nella mia pagina un header fisso, un footer fisso e una parte centrale, dove visualizzare contenuti vari. Il mio problema è che ridimensionando la finestra del browser (firefox o ie), non avviene un ridimensionamento corretto del "frame" centrale. Frame è tra virgolette perchè ho emulato il frame con div e css.

    Quello che accade è che header e footer rimangono fissi, ancorati al bordo superiore ed inferiore della pagina di visualizzazione del browser; il problema è nella parte centrale, la quale si ridimensiona solo parzialmente, e il footer mi copre la scroll-bar. Dimenticavo: footer e header contengono immagini alte 120px che si posizionano ai quattro lati dello schermo.

    Ecco il mio codice 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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>TEST</title>
    <link rel="stylesheet" type="text/css" media="screen" href="test.css" />
    </head>

    <body>
    <div class="header"> <!-- Inizio header -->
    <div class="left">
    <img src="img/media.jpg" />
    </div>

    <div class="right">
  <img src="img/media.jpg" />
</div>

    </div> <!-- Fine header -->

    <div class="container"> <!-- Inizio "frame" centrale -->
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
    </div> <!-- Fine "frame" centrale -->

    <div class="footer"> <!-- Inizio footer -->
    <div class="left">
    <img src="img/media.jpg" />
    </div>

    <div class="right">
  <img src="img/media.jpg" />
</div>

    </div> <!-- Fine footer -->

    </body>
    </html>
    Ed ecco il mio css:
    html {padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    border-width: 0px 0px 0px 0px; }

    body { padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    border-width: 0px 0px 0px 0px;
    position: absolute;
    height: 100%;
    overflow:hidden; }

    div { padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    border-width: 0px 0px 0px 0px; }

    .header { height: 120px;
    background-color: #00FF00; }

    .footer { height: 120px;
    background-color:;
    position: absolute;
    bottom: 0px;}

    .container { height: 354px;
    overflow: auto;
    background-color: #0000FF;}

    img { border-style: none; }

    .left {float: left;}
    .right {float: right;}

    0
  • P
    User Newbie •

    prova a togliere i due <div class='left'> e <div class='right'> e mettere alle due immagini l'attributo class

    0
  • massy
    Moderatore •

    Prova a dare clear:both a .container 🙂

    :ciauz:

    0
Effettua l'accesso per rispondere