[Resolvido] Criando uma página/coluna constante

tesdey · Janeiro 31, 2012

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">
<!-- saved from url=(0014)about:internet -->
<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;
}

Diéssica · Janeiro 31, 2012

O problema é que foi feito em tabelas, fica muito mais difícil de manusear.

Determina na própria tabela do menu ou faz uma div com o mesmo background do menu e bordas e determina:

height:100%;

ou

overflow:hidden;

Alterei aqui e funcionou só com o height:100%, principalmente com a div. Aí não precisou de altura fixa nos links do menu.

tesdey · Janeiro 31, 2012

Nunca tinha usado Div antes, tive que aprender na marra agora, mas continuo tendo o mesmo problema

Segue o código da página do menu secundário (menu_produtos.html) alterado conforme sugerido:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<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 marginheight="0" marginwidth="0">


<div id="esqueleto">
   <div 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>
   </div>

   <div id="linhabranca"><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="" /></div>

   <div 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>
   </div>

   <div id="linhabranca"><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="" /></div>

   <div 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>
   </div>

   <div id="linhabranca"><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="" /></div>

   <div 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>
   </div>

   <div id="linhabranca"><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="" /></div>

   <div 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>
   </div>

   <div id="linhabranca"><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="" /></div>

   <div class="gradientx">a
   </div>

</div>



</body>
</html>

E o 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;}

.home_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 {
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;
}


#esqueleto {
max-width:223px;
border-right: 1px solid #cdcccc;	    		
border-left: 1px solid #a1a1a1;

}

.gradient {
border-left: 1px solid #ffffff;	
background: #fff url(imagens/menu_produtos_gradient.png) top left repeat-y;
padding: 9px;
}


.gradientx {
border-left: 1px solid #ffffff;	
background: #fff url(imagens/menu_produtos_gradient.png) top left repeat-y;
padding: 9px;
height: 100%;
}

.gradient2 {
border-left: 1px solid #ffffff;		
background: #fff url(imagens/menu_produtos_gradient_selec.png) top left repeat-y;
padding: 9px;
}

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

Diéssica · Janeiro 31, 2012

Adiciona no início do CSS então:

html, body {
height: 100%;
}

E height:100%; no #esqueleto.

:bye:

Guilherme Oderdenge · Janeiro 31, 2012

Por que você está usando a propriedade clip aí ein? Além de ser ultrapassada, você não está utilizando corretamente. Clip só funciona com posicionamento fixo ou absoluto.

E mais: trabalhar com altura 100% vai requerer também um posicionamento absoluto, porque não é relativo às outras camadas - tornando uma altura 100% inútil se não aplicada fixamente ou absolutamente.

Entendeu?

tesdey · Fevereiro 1, 2012

É como o Guilherme mencionou, não adianta eu usar height:100% se a página não está relativa as outras páginas, o menu continuou com o mesmo tamanho.

Mas usando posicionamento absoluto também não funcionou, poís o menu secundário fica atravessando o rodapé da página

Sobre o Clip foi erro tolo de minha parte.

Diéssica · Fevereiro 1, 2012

:seta: http://maujor.com/tutorial/lay2col-faux-colunm.php

:seta: http://positioniseverything.net/articles/onetruelayout/equalheight

tesdey · Fevereiro 1, 2012

Isto aparentemente não funcionou também

Por causa do código php Include, as páginas/colunas acabam não reconhecendo umas as outras

Pelo visto vou ter que fazer na gambiarra mesmo, mas eu agradeço a ajuda e tempo disponibilizado por todos

Guilherme Oderdenge · Fevereiro 1, 2012

Isto aparentemente não funcionou também

Por causa do código php Include, as páginas/colunas acabam não reconhecendo umas as outras

Pelo visto vou ter que fazer na gambiarra mesmo, mas eu agradeço a ajuda e tempo disponibilizado por todos

Se você quiser optar pelo caminho da gambiarra, tudo bem. Mas de verdade, estamos aqui pra te ajudar.

Se você especificar mais o erro, eu não me incomodo nem um pouco de te ajudar.

Diéssica · Fevereiro 1, 2012

Como assim com Faux Columns não funciona? Impossível oO

JS é a minha última opção...

function get_h(){
x = document.getElementById("div1").offsetHeight;
y = document.getElementById("div2");
y.setAttribute('style', 'height:'+x+'px;');
}

E get_h() no onload do body.

:seta: http://help.dottoro.com/ljuxqbfx.php

Thiago Moraes · Fevereiro 1, 2012

Se você conseguir essa barra lateral usando um background, não resolve?

Diéssica · Fevereiro 1, 2012

Se você conseguir essa barra lateral usando um background, não resolve?

Post #7 - Faux Columns

--------------------

Achei essa solução do William Bruno:

http://forum.imasters.com.br/topic/309442-solucao-para-faux-columns-sem-usar-imagens/

Pode tentar também.

tesdey · Fevereiro 2, 2012

Desculpem-me galera, é que para cada ideia sugerida eu acabava perdendo meio-dia de trabalho, acabei gastando tempo de mais nesse problema, ainda mais que grande tempo perdido nisso tudo vale a minha inexperiência com os códigos ainda.

@Diéssica, eu agradeço de coração sua ajuda, eu tentei este código do Java mas também não deu muito certo, no Height total da barra de produtos estava sendo adicionado algo além, e sempre estava passando um pouco do tamanho necessário, se eu perdesse um pouco mais de tempo/dias provavelmente iria dar certo, mas eu já não posso me dar o luxo de perder mais tempo nisso.

Eu peço desculpa a todos, sei que a regra de ouro aqui para pedir ajuda é ter paciência, mas a paciência a ser testada não foi a minha desta vez, e sim do meu superior(cliente). Apelei para a gambiarra mesmo, padronizei um final com fundo branco.

Arquivado

[Resolvido] Criando uma página/coluna constante

Recommended Posts

tesdey 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

tesdey 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Oderdenge 42

Compartilhar este post

Link para o post

Compartilhar em outros sites

tesdey 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

tesdey 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Oderdenge 42

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Moraes 32

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

tesdey 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Fóruns

Tempo Real

Informação importante