Forum Pplware / Mais Tech / Programação e Web v / Redimensionamento de divs

Colocar Resposta 
 
Avaliação do Tópico:
  • 0 votos - 0 Média
  • 1
  • 2
  • 3
  • 4
  • 5
Redimensionamento de divs
05-10-2009, 18:11 (Esta mensagem foi modificada pela última vez a: 05-10-2009 19:20 por claudiuh.)
Mensagem: #1
claudiuh Offline
Membro Júnior
**
 		Mensagens: 5
Registado: Mar 2009
Redimensionamento de divs
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.
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
05-10-2009, 21:12
Mensagem: #2
avlisrotiv Ausente
 
*****
 		Mensagens: 3.179
Registado: Aug 2009
RE: Redimensionamento de divs
Penso que isto possa ajudar um pouco.. ( http://u.nu/2xqf3 )
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
06-10-2009, 10:30
Mensagem: #3
RaCcOn Offline
w3blink mister!!
*****
 		Mensagens: 3.447
Registado: Oct 2008
RE: Redimensionamento de divs
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
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
06-10-2009, 16:12
Mensagem: #4
claudiuh Offline
Membro Júnior
**
 		Mensagens: 5
Registado: Mar 2009
RE: Redimensionamento de divs
Obrigado pela resposta. Vou experimentar fazer dessa maneira.
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
06-10-2009, 18:37
Mensagem: #5
claudiuh Offline
Membro Júnior
**
 		Mensagens: 5
Registado: Mar 2009
RE: Redimensionamento de divs
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.
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
06-10-2009, 19:27
Mensagem: #6
RaCcOn Offline
w3blink mister!!
*****
 		Mensagens: 3.447
Registado: Oct 2008
RE: Redimensionamento de divs
Fica mal como?
Podes meter print por cá para ver?
Se puderes meter URL melhor ainda.
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
08-10-2009, 00:16 (Esta mensagem foi modificada pela última vez a: 08-10-2009 16:51 por claudiuh.)
Mensagem: #7
claudiuh Offline
Membro Júnior
**
 		Mensagens: 5
Registado: Mar 2009
RE: Redimensionamento de divs
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?
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
10-10-2009, 19:17
Mensagem: #8
RaCcOn Offline
w3blink mister!!
*****
 		Mensagens: 3.447
Registado: Oct 2008
RE: Redimensionamento de divs
Pelo menos por estes lados está tudo direito,
Qual é o browser que estás a testar?
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
11-10-2009, 12:34
Mensagem: #9
claudiuh Offline
Membro Júnior
**
 		Mensagens: 5
Registado: Mar 2009
RE: Redimensionamento de divs
Já consegui resolver. Utilizei o min-width com o valor 1024 no top. Obrigado pela ajuda. Wink
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
15-10-2009, 22:25
Mensagem: #10
Bahbel Offline
Membro Júnior
**
 		Mensagens: 6
Registado: Oct 2009
RE: Redimensionamento de divs
(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!
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
Colocar Resposta 


Saltar Fórum:


Utilizadores a ver este tópico: 3 Visitante(s)

Contacte-nos | Pplware | Voltar ao Topo | Voltar ao conteúdo | Modo (Arquivo) Leve | RSS conteúdo