Publicado em 31 de jan.

[Resolvido] Criando uma página/coluna constante

Bom dia todos,

Estou tentando desenvolver um site para uma empresa, e como sou um leigo em código ainda, acabei me enrolando em um problema.

Observem o estado atual do site:

http://imber.com.br/testeimber2012/

O site está dividido em 4 páginas diferentes usando o código php Include, o menu principal de cima é uma página, aonde está o texto "teste teste teste" é a página onde será visualizado o conteúdo do site, a página da direita é o menu secundário do site, e a barra debaixo é mais uma página.

Como vocês podem observar no site, o Menu secundário da direita está cortado, e não está acompanhando o conteúdo do site. O que eu gostaria que vocês me ajudassem, é que este menu secundário adaptasse o seu tamanho conforme o conteúdo exposto no site. Não desejo trabalhar com valores fixos, pois o conteúdo do site também varia de tamanho e não desejo usar scroll. Outro detalhe, não quero que o menu secundário saia de sua proporção, desejo que apenas o gradiente se expanda; Eis um exemplo:

http://i43.tinypic.com/4s16wn.jpg

Desde já, eu agradeço a ajuda.

código da página Index:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Imber</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta name="keywords" content="máquina, água, fabricação, extrusão, coestrusão, serras, corte, perfis, tubos, bolçadeiras, tubos, pvc, desenvolvimento, ferramentas, pe, ps, abx, cabeçotes, automação, desenvolvimento.">
<meta name="description" content="A Imber é uma empresa voltada à fabricação de maquinas de extrusão e coestrusão (extrusoras e coextrusoras), linhas de frente para extrusão, serras para corte de perfis e tubos, bolçadeiras para tubos de pvc, desenvolvimento e fabricação de ferramentas de extrusão para PVC PE PS ABX e outros materiais, cabeçotes, automação de extrusão, desenvolvimento de produtos na area de extrusão.">
<meta name="author" content="Felipe Leonel Guindo">

<style type="text/css">td img {display: block;}</style>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>

</head>

<body bgcolor="#ffffff" marginheight="0" marginwidth="0" >
 <center>

 <table border="0" cellpadding="0" cellspacing="0" width="980">
 <tr>
 <td><img src="spacer.gif" width="754" height="1" border="0" alt="" /></td>
 <td><img src="spacer.gif" width="225" height="1" border="0" alt="" /></td>
 <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
 </tr>

 <tr>
 <td colspan="2" valign="top"><?php

include "menu_principal.php"

?></td>
 <td></td>
 </tr>

 <tr>
 <td valign="top"><?php
$link=$_REQUEST["link"];

 $paginas[1]="empresa.html";
 $paginas[2]="contato.html";
 $paginas[3]="trabalhe.html";
 $paginas[4]="localizacao.html";
 $paginas[5]="ferramenta_extrusao.html";
 $paginas[6]="extrusoras.html";
 $paginas[7]="bolsadeiras.html";
 $paginas[8]="automacao_industrial.html";
 $paginas[9]="consultoria.html";

 if (!empty($link))
 {
 //verifico se o link passado via GET é valido, caso valido carrego pagina
 if(file_exists($paginas[$link]))
 {
 include $paginas[$link];
 }
 else
 {
 include $paginas[1];
 }
 }

 if (empty($link))
 {
 include "empresa.html";
 }

?></td>

 <td valign="baseline" valign="top"><?php

include "menu_produtos.html"

?></td>

 <td></td>
 </tr>

 <tr>
 <td colspan="2" valign="top"> <?php

include "barra_debaixo.html"

?></td>
 <td></td>
 </tr>

 </table>

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

Código do menu secundário (menu_produtos.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>
<title>menu_produtos.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<link href="style.css" rel="stylesheet" type="text/css" />

<script language="JavaScript">

function mouse_over_menu(objDiv)

{

objDiv.className = 'gradient2';
}

function mouse_out_menu(objDiv)

{

objDiv.className = 'gradient';
}

</script>

</head>
<body bgcolor="#ffffff" marginheight="0" marginwidth="0">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="226" >

 <tr>
 <td rowspan="12" height="100%" width="1" bgcolor="#a1a1a1"></td>
 <td rowspan="12" height="100%" width="1" bgcolor="#FFFFFF"></td>
 <td height="49" class="gradient" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);"><p class="menu_principal_escrita">
 <a href="index.php?link=5">FERRAMENTAS DE EXTRUSÃO
 </a></p></td>
 <td rowspan="12" width="1" bgcolor="#cdcccc"></td>
 <td rowspan="12"><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
 </tr>

 <tr>
 <td><img name="menu_produtos_r2_c3" src="images/menu_produtos_r2_c3.jpg" width="222" height="1" border="0" id="menu_produtos_r2_c3" alt="" /></td>
 </tr>

 <tr>
 <td height="49" class="gradient" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);"><p class="menu_principal_escrita">
 <a href="index.php?link=6">
 EXTRUSORAS</a></p></td>
 </tr>

 <tr>
 <td><img name="menu_produtos_r2_c3" src="images/menu_produtos_r2_c3.jpg" width="222" height="1" border="0" id="menu_produtos_r2_c3" alt="" /></td>
 </tr>

 <tr>
 <td height="49" class="gradient" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);"><p class="menu_principal_escrita"><a href="index.php?link=7">BOLSADEIRAS</a></p></td>
 </tr>

 <tr>
 <td><img name="menu_produtos_r2_c3" src="images/menu_produtos_r2_c3.jpg" width="222" height="1" border="0" id="menu_produtos_r2_c3" alt="" /></td>
 </tr>

 <tr>
 <td height="59" class="gradient" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);"><p class="menu_principal_escrita"> <a href="index.php?link=8">FERRAMENTAS DE AUTOMAÇÃO<br />
 INDUSTRIAL</a></p></td>
 </tr>

 <tr>
 <td><img name="menu_produtos_r2_c3" src="images/menu_produtos_r2_c3.jpg" width="222" height="1" border="0" id="menu_produtos_r2_c3" alt="" /></td>
 </tr>

 <tr>
 <td height="49" class="gradient" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);"><p class="menu_principal_escrita"> <a href="index.php?link=9">CONSULTORIA INDUSTRIAL</a></p></td>
 </tr>

 <tr>
 <td><img name="menu_produtos_r2_c3" src="images/menu_produtos_r2_c3.jpg" width="222" height="1" border="0" id="menu_produtos_r2_c3" alt="" /></td>
 </tr>

 <tr>
 <td height="49" width="222" class="gradient"></td>
 </tr>

 <tr>
 <td width="222" class="gradient"></td>
 </tr>

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

E não sei se é necessário tb, mas aqui está o código do style CSS:

a:link {text-decoration: none; color: #505260;}
a:visited {text-decoration: none; color: #505260;}
a:hover { text-decoration: underline; color: #114f8a;}
a:active {text-decoration: none;}

.menu_principal_escrita {
font-family: Verdana, Arial;
font-size: 10px;
color: #505260;
text-align: left;
text-shadow: 1px 1px #FFF;
clip: rect(auto,12px,12px,12px);
padding-left: 17px;
padding-right: 12px;
}

.menu_principal_escrita a:hover{

font-family: Verdana, Arial;
font-size: 10px;
color: #505260;
text-align: left;
text-shadow: 1px 1px #FFF;

text-decoration: underline

clip: rect(auto,12px,12px,12px);
}

.menu_debaixo_escrita {
font-family: Verdana, Arial;
font-size: 10px;
color: #505260;
text-align: center;
text-shadow: 1px 1px #FFF;
clip: rect(auto,12px,12px,12px);
padding-left: 17px;
padding-right: 12px;
}

.gradient {
background: #fff url(imagens/menu_produtos_gradient.png) top left repeat-y;
padding: 0;
}

.gradient2 {
background: #fff url(imagens/menu_produtos_gradient_selec.png) top left repeat-y;
padding: 0;
}

.gradient_barra_debaixo {
background: #fff url(imagens/barra_debaixo_gradient.png) top left repeat-y;
padding: 0;
}

Discussão (12)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...