• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

claudiuh

[Dúvida]Redimensionamento de divs

2 mensagens neste tópico

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora