Layout Liquido

animax · Fevereiro 2, 2011

Olá estou com muitas duvidas sobre layout liquido,

tenho um site, que foi feito com divs e tabelas, mas não consigo deixar ele redimensinavel, para tds aas telas.

quando eu tento criar uma tabela e colocar todo o conteudo dentro, as divs não entram ficam sobrepondo a tabela criada

abaixo está o código, se puderem me ajudar agradeço muito.

e o site é desfilemodas.com.br

<html>
<body>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>::.::Desfile Modas::.::</title>
<link href="../construcao/css.css" rel="stylesheet" type="text/css">
<style type="text/css"> 
<!--
#apDiv1 {
position:absolute;
left:232px;
top:-2px;
width:209px;
height:218px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:477px;
top:-1px;
width:630px;
height:580px;
z-index:5;
background-color:#FFF;
}
#apDiv3 {
position:absolute;
left:220px;
top:243px;
width:221px;
height:349px;
z-index:3;
}
#apDiv4 {
position:absolute;
left:220px;
top:282px;
width:167px;
height:27px;
z-index:4;
}

a:link {

color: #333;

text-decoration: none;

}

a:visited {

text-decoration: none;

color: #333;

}

a:hover {

text-decoration: none;

color: red;

}

a:active {

text-decoration: none;

color: #F00;

}

.menuitens strong a {

color: #C46200;

}
.menuitens {
font: 11px Verdana, Geneva, sans-serif;
color: #333;
text-align: left;
}

.web a {

color: #FFF;

}
.fonte {
font-family: "BellCent Add BT";
color:#999;
}
#apDiv5 {
position:absolute;
left:477px;
top:577px;
width:630px;
height:23px;
z-index:5;
background-color: #ebebeb;
}
#apDiv6 {
position:absolute;
left:261px;
top:481px;
width:121px;
height:86px;
z-index:5;
}
#apDiv7 {
position:absolute;
left:259px;
top:481px;
width:126px;
height:88px;
z-index:5;
}
#apDiv8 {
position:absolute;
left:505px;
top:625px;
width:578px;
height:51px;
z-index:6;
font-style: italic;
}
.branco_Font {
color: #FFF;
text-align: left;
font-size: 10px;
}
#apDiv8 p {
font-style: normal;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
width:100%;
}




-->

</style>

<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<!--body background="img/bg_preto.jpg"-->
<body background="fotos_grav/1296057018bg_preto.jpg">

<div id="apDiv1">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="209" height="225">
       <param name="movie" value="docs/1296587262logo_desfile.swf" />
       <param name="quality" value="high" />
       <param name="wmode" value="opaque" />
       <param name="swfversion" value="6.0.65.0" />
       <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don't want users to see the prompt. -->
       <param name="expressinstall" value="../Scripts/expressInstall.swf" />
       <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
       <!--[if !IE]>-->
       <object type="application/x-shockwave-flash" data="docs/1296587262logo_desfile.swf" width="209" height="225">
         <!--<![endif]-->
         <param name="quality" value="high" />
         <param name="wmode" value="opaque" />
         <param name="swfversion" value="6.0.65.0" />
         <param name="expressinstall" value="../Scripts/expressInstall.swf" />
         <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
         <div>
           <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
           <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
         </div>
         <!--[if !IE]>-->
       </object>
       <!--<![endif]-->
 </object>
</div>
<div id="apDiv2"><iframe name="img" width="629" height="580" src="home.php"></iframe></div>
<div id="apDiv3">
 <table width="220" border="0" cellpadding="0" cellspacing="0">
   <tr>
     <td width="10" > </td>
     <td colspan="4" bgcolor="#FFFFFF"> </td>
   </tr>
   <tr>
     <td> </td>
     <td width="9" bgcolor="#FFFFFF"> </td>
     <td colspan="2" bgcolor="#ebebeb"> </td>
     <td width="10" bgcolor="#FFFFFF"> </td>
   </tr>
   <tr>
     <td height="31" colspan="4" bgcolor="#ebebeb"> </td>
     <td bgcolor="#FFFFFF"> </td>
   </tr>
   <tr>
     <td> </td>
     <td bgcolor="#FFFFFF"> </td>
     <td colspan="2" bgcolor="#ebebeb"> </td>
     <td bgcolor="#FFFFFF"> </td>
   </tr>
   <tr>
     <td> </td>
     <td bgcolor="#FFFFFF"> </td>

     <td colspan="2" bgcolor="#d8d8d8" class="menuitens"><img src="img/set.gif" width="8" height="15" /> <a href="home.php" target="img">Home</a></td>
     <td bgcolor="#FFFFFF"> </td>
   </tr>
   <tr>
     <td> </td>
     <td bgcolor="#FFFFFF"> </td>
     <td colspan="2" bgcolor="#ebebeb" class="menuitens"><img src="img/set.gif" width="8" height="15" /> <a href="empresa_.php" target="img">Conheça a Desfile</a></td>
     <td bgcolor="#FFFFFF"> </td>
   </tr>
   <tr>
     <td> </td>
     <td bgcolor="#FFFFFF"> </td>
     <td colspan="2" bgcolor="#d8d8d8" class="menuitens"><img src="img/set.gif" width="8" height="15" /> <a href="profissionais.php" target="img">Coleções</a></td>
     <td bgcolor="#FFFFFF"> </td>
   </tr>
   <tr>
     <td> </td>
     <td bgcolor="#FFFFFF"> </td>
     <td colspan="2" bgcolor="#ebebeb" class="menuitens"><img src="img/set.gif" width="8" height="15" /> <a href="parceiros.php" target="img">Marcas</a></td>
     <td bgcolor="#FFFFFF"> </td>
   </tr>
   <tr>
     <td> </td>
     <td bgcolor="#FFFFFF"> </td>
     <td colspan="2" bgcolor="#d8d8d8" class="menuitens"><img src="img/set.gif" width="8" height="15" /><a href="artigos_view.php" target="img"> Mini Blog</a></td>
     <td bgcolor="#FFFFFF"> </td>
   </tr>
   <tr>
     <td> </td>
     <td bgcolor="#FFFFFF"> </td>
     <td colspan="2" bgcolor="#ebebeb" class="menuitens"><img src="img/set.gif" width="8" height="15" /><a href="localizacao.php" target="img"> Localização</a></td>
     <td bgcolor="#FFFFFF"> </td>
   </tr>

   <tr>
     <td> </td>
     <td bgcolor="#FFFFFF"> </td>
     <td colspan="2" bgcolor="#d8d8d8" class="menuitens"><img src="img/set.gif" width="8" height="15" /><a href="contato.php" target="img"> Contato</a></td>
     <td bgcolor="#FFFFFF"> </td>
   </tr>
     </table>
 <table width="211" height="66" border="0" align="right" bgcolor="#FFFFFF">
   <tr>
     <th width="220" scope="2"><center><img src="docs/1296589730slogan.jpg" width="150" height="101" /></center></th>
   </tr>
 </table>
</div>
<div id="apDiv4"><img src="img/mtm.png" width="162" height="31" /></div>
<div id="apDiv5" class="menuitens"><center>Praça São José, 231 – Centro - Mogi Mirim – SP / Tel: (19) 3862-3688 / <a href="mailto:desfile@desfilemodas.com.br">desfile@desfilemodas.com.br</a></center></div>
<div id="apDiv8" class="branco_Font" align="center">
 <p align="center">© Copyright 2010, 2011. Theodorojr  - Todos os direitos reservados. É proibida a  reprodução do conteúdo desta página em qualquer meio de comunicação, eletrônico  ou impresso, sem autorização escrita do autor.</p>
</div>
<script type="text/javascript"> 
<!--
swfobject.registerObject("FlashID");
//-->
</script>

</body>
</html>

Obrigado aguardo resposta o mais rápido possível.

William Bruno · Fevereiro 2, 2011

-> não use tabelas para estrutura do layout

-> não use position dessa forma, ainda mais o absolute

leia:

http://forum.imasters.com.br/index.php?/topic/347842-layout-liquido/

animax · Fevereiro 2, 2011

-> não use tabelas para estrutura do layout

-> não use position dessa forma, ainda mais o absolute

leia:

http://forum.imasters.com.br/index.php?/topic/347842-layout-liquido/

eu teria que fazer o layout do site td de novo?

William Bruno · Fevereiro 2, 2011

no ponto de vista de Padrões Web, o código que você apresentou, está completamente incorreto.

Não consigo 'te ajudar', sem descartar tudo, e começar novamente como deveria ser.

Posso te mover pro fórum de Dreamweaver.

animax · Fevereiro 2, 2011

no ponto de vista de Padrões Web, o código que você apresentou, está completamente incorreto.

Não consigo 'te ajudar', sem descartar tudo, e começar novamente como deveria ser.

Posso te mover pro fórum de Dreamweaver, e lá te sugerirem gambiarras, e remendos porcos, para ajustar essa estrutura mal modelada.

Ta certo pode me transferir pro forum do Dreamweaver.

Obrigado pela ajuda.

alebae · Fevereiro 8, 2011

Bom, não tem muito o que "arrumar" aí.

Sites feito com Layers irão pular de resolução para resolução.

Utilize a dica do William Bruno, reconstruir este código seria mais fácil que arrumar o já existente.

Entrar

Arquivado

Layout Liquido

Recommended Posts

animax 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

animax 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

animax 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

alebae 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

recuperando parametros simplexml_load_file

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante