[Dúvida]Redimensionamento de divs

claudiuh · October 5, 2009 at 05:16 PM

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:

<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   |   NOTÍCIAS   |   EXEMPLO   |   EXEMPLO2   |   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:

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.

jarsantos · December 6, 2009 at 06:58 PM

Então que querias que fizesse? tens tamanhos fixos para a largura de todos os objectos.

Se queres que eles "estiquem" quando redimensionas a imagem, tens que usar percentagens.

Já agora, experimenta colocar em todas as div's "overflow:scroll" é que parece-me que os teus conteúdos estão a sair para fora das div's e isso pode ter vir a prejudicar bastante no futuro.

Sign In

[Dúvida]Redimensionamento de divs

Recommended Posts

claudiuh

Link to comment

Share on other sites

jarsantos

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information