Modo listagem | Modo Linear

claudiuh

Boas, tenho um problema com umas divs quando redimensiono o browser.

Aqui está a imagem normal:

http://i34.tinypic.com/znsz83.png

E aqui a imagem com o browser redimensionado e com o scroll para a direita:

http://i34.tinypic.com/2m2vtjr.jpg

Ou seja... as 3 divas de cima (header, logo e menu) quando redimensiono o browser ficam como se tivessem cortadas...

código do index:

Código:

<html>

<head>

<title>Nova Template</title>

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

</head>

<body>

<div class = "header">

    <table class = "header_table">

        <tr>

            <td>

                <?php

                echo date('d-m-Y');

                ?>

            </td>

        </tr>

    </table>    

</div>

<div class = "logo">

</div>

<div class = "menu">

    <table class = "menu_table" align = "center">

        <tr>

            <td>

                HOME&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;NOTÍCIAS&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;EXEMPLO&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;EXEMPLO2&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;EXEMPLO3

            </td>

        </tr>

    </table>

</div>

<div class = "middle">

<div class = "submenu">

    <table class = "submenu_table">

        <tr>

            <td>

            <font color = "#427ea1">Menu</font>

            <br><br><br>

            </td>

        </tr>

        <tr>

            <td>

                <ul>

                    <li>Home</li><br>

                    <li>Outra Coisa</li><br>

                    <li>Bla Bla</li><br>

                    <li>Hum....</li><br>

                    <li>Ok</li><br>

                </ul>

            </td>

        </tr>

    </table>

</div>

<div class = "content">

    Teste<br>

    Olá

</div>

</div>

</body>

</html>

código da css:

Código:

body {

    background: url(images/bg_color.png) no-repeat top left #006ba9;

    margin:0px;

}

.header {

    margin-left:0px;

    margin-right:0px;

    width:100%;

    height:27px;

    background: url(images/header.png) repeat-x;

    text-align:left;

}

.header_table{

    margin-left:2px;

    margin-top:2px;

    text-align:left;

    color:#427ea1;

    font-family:Trebuchet MS;

    font-size:12px;

}

.logo{

margin-top:0px;

margin-left:0px;

margin-right:0px;

width:100%;

height:186px;

background: url(images/logo.png) no-repeat top center #000000;

}

.menu{

background: url(images/menu.png) repeat-x;

height:31px;

text-align:center;

}

.menu_table{

margin-top:4px;

font-family:Tahoma;

font-size:12px;

font-weight: bold;

color: #427ea1;

}

.middle{

position:relative;

margin-top:50px;

left:0px;

width:100%;

}

.submenu{

position:absolute;

background: url(images/submenu.png) no-repeat;

width:200px;

height:276px;

left:40px;

top:0px;

}

.submenu_table{

margin-left:2px;

color:#000000;

font-family:Trebuchet MS;

font-size:12px;

text-align:left;

}

.content{

position:absolute;

margin-left:50px;

margin-right:auto;

background: url(images/content.png);

width:850px;

right:50px;

left:250px;

top:0px;

}

Alguém consegue ajudar-me?

Obrigado.