+- Forum Pplware (http://forum.pplware.com)
+-- Fórum: Mais Tech (/forumdisplay.php?fid=11)
+--- Fórum: Programação e Web (/forumdisplay.php?fid=16)
+--- Tópico: Redimensionamento de divs (/showthread.php?tid=3475)
Redimensionamento de divs - claudiuh - 05-10-2009 18:11
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 | 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:
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;
}Obrigado.
RE: Redimensionamento de divs - avlisrotiv - 05-10-2009 21:12
Penso que isto possa ajudar um pouco.. ( http://u.nu/2xqf3 )
RE: Redimensionamento de divs - RaCcOn - 06-10-2009 10:30
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
RE: Redimensionamento de divs - claudiuh - 06-10-2009 16:12
Obrigado pela resposta. Vou experimentar fazer dessa maneira.
RE: Redimensionamento de divs - claudiuh - 06-10-2009 18:37
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.
RE: Redimensionamento de divs - RaCcOn - 06-10-2009 19:27
Fica mal como?
Podes meter print por cá para ver?
Se puderes meter URL melhor ainda.
RE: Redimensionamento de divs - claudiuh - 08-10-2009 00:16
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 | NOTÍCIAS | EXEMPLO | EXEMPLO2 | 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?
RE: Redimensionamento de divs - RaCcOn - 10-10-2009 19:17
Pelo menos por estes lados está tudo direito,
Qual é o browser que estás a testar?
RE: Redimensionamento de divs - claudiuh - 11-10-2009 12:34
Já consegui resolver. Utilizei o min-width com o valor 1024 no top. Obrigado pela ajuda.
RE: Redimensionamento de divs - Bahbel - 15-10-2009 22:25
(11-10-2009 12:34)claudiuh Escreveu: Já consegui resolver. Utilizei o min-width com o valor 1024 no top. Obrigado pela ajuda.
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!