Forum Pplware

Versão Completa: Redimensionamento de divs
Está de momento a ver uma versão reduzida do nosso conteúdo. Ver versão completa com o formato adequado.
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.
Penso que isto possa ajudar um pouco.. ( http://u.nu/2xqf3 )
Podes fazer isso de várias maneiras.
Uma delas é criar uma div container que vai ter todo o conteudo do website.

outra é criares tudo aos poucos.
Devido aquele efeito que tens que passa por trás do menu lateral e do conteudo eu apostava na primeira.
Ora vejamos...

body{margin:0px; background-color:blue; witdh:1000px; height:1000px} os valores que defini para os height e witdh são meramente a titulo de exmplo, a resolução mais usada neste momento é 1024 x 768 logo convém estar dentro dos 1000px. (1024px menos o scroll do browser)

container {witdth: 100%;height:100%; background-image:efeito.png; background-position:top left; background-repeat:no-repeat;}

depois disto, crias uma div para top, onde vais colocar la dentro mais divs, com aquela beira em cima, com a imagem que tens aquela cara e com o menu.

em baixo, crias uma conteudo, onde vais ter a de menu em Float left e a de conteudo em Float left tb
e penso que seja tudo heeh
Obrigado pela resposta. Vou experimentar fazer dessa maneira.
RaCcOn já experimentei fazer dessa maneira mas eu ao definir valores para a altura e a largura do body faz com que fiquem mal nas resoluções superiores.
Fica mal como?
Podes meter print por cá para ver?
Se puderes meter URL melhor ainda.
Voltei a fazer o código de novo:

index.php
Código:
<html>
<head>
<title>Nova Template</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
    <div id = "container">
    
        <div id = "top">
            
            <div id = "header">
                <table id = "header_table">
                    <tr>
                        <td>Exemplo</td>
                    </tr>    
                </table>
            </div>
            
            <div id = "logo">
            
            </div>
            
            <div id = "menu">
                <table id = "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>
        
        <div id = "middle">
        
            <div id = "submenu">
                <table id = "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 id = "content">
                Teste<br>
                Olá
            </div>
        
        </div>
    </div>
</body>
</html>

css.css
Código:
body {
    margin:0px;
    background-color:#006ba9;
}

#container {
    width:100%;
    height:100%;
    background: url(images/bg_color.png);
    background-position:top left;
    background-repeat:no-repeat;
}

#top {
    width:100%;
    height:244px;
    text-align:left;
}

#header {
    width:100%;
    height:27px;
    background: url(images/header.png) repeat-x;
}

#header_table {
    width:100%;
    margin-left:2px;
    margin-top:2px;
    text-align:left;
    color:#427ea1;
    font-family:Trebuchet MS;
    font-size:12px;
}

#logo {
    width:100%;
    height:186px;
    background: url(images/logo.png) no-repeat top center #000000;
}


#menu {
    width:100%;
    height:31px;
    background: url(images/menu.png) repeat-x;
    text-align:center;
}

#menu_table {
    margin-top:4px;
    font-family:Tahoma;
    font-size:12px;
    font-weight: bold;
    color: #427ea1;
}

#middle {
    position:relative;
    width:100%;
}

#submenu {
    position:relative;
    float:left;
    background: url(images/submenu.png) no-repeat;
    width:200px;
    height:276px;
    margin-left:60px;
    margin-top:50px;
}

#submenu_table {
    margin-left:2px;
    color:#000000;
    font-family:Trebuchet MS;
    font-size:12px;
    text-align:left;
}

#content {
    position:absolute;
    float:left;
    margin-left:350px;
    margin-top:50px;
    background: url(images/content.png);
    width:60%;
}

Meti o site online:
http://inforc.myweblive.net/

Só que continua tudo na mesma.

Alguma solução?
Pelo menos por estes lados está tudo direito,
Qual é o browser que estás a testar?
Já consegui resolver. Utilizei o min-width com o valor 1024 no top. Obrigado pela ajuda. Wink
(11-10-2009 12:34)claudiuh Escreveu: [ -> ]Já consegui resolver. Utilizei o min-width com o valor 1024 no top. Obrigado pela ajuda. Wink

Atenção aos min/max-width/height.. apesar de ser CSS3 nao é aceite por todos os browsers.

Agora não tou com grande cabeça para ir ver o teu código mas a solução há de passar por positions. Amanha passo aqui outra vez!
URL's de Referência