A seguir está o conteúdo citado:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Altura igual (método para ter a mesma altura de coluna)</title>
<style type="texto/css">
corpo{
preenchimento: 0;
margem: 0;
tamanho da fonte: 12px;
família de fontes: Arial, Helvetica, sans-serif;
altura da linha: 140%;
plano de fundo:#E7DFD3;
}
#meio{
largura: 580px;
flutuar:esquerda;
plano de fundo:#FFFFFF;
alinhamento de texto: esquerda;
} #cabeçalho,#rodapé{
plano de fundo: #E8E8E8;
largura: 750px;
alinhamento de texto:centro;
}
#ladoesquerdo{
largura: 580px;
flutuar: esquerda;
posição:relativo;
margem esquerda: -580px;
}
#lado direito{
largura: 170px;
flutuar: certo;
posição:relativo;
margem: 0 -170px 0 0;
plano de fundo: #F0F0F0;
} #rodapé{
claro: ambos;
}
h1,h2,endereço,p{
margem: 0;
preenchimento: 0,8em;
}
h1,h2{tamanho da fonte: 20px;} </estilo>
<script type="texto/javascript">
// <![CDATA[ function toggleContent(nome,n) {
var i,t='',el = document.getElementById(nome);
if (!el.origCont) el.origCont = el.innerHTML;
for (i=0;i<n;i++) t += el.origCont;
el.innerHTML = t;
} // ]]>
</script>
</head>
<corpo> <div id="cabeçalho">
<h1>Cabeça</h1>
<div id="meio">
<div id="lado direito">
<div id="lado esquerdo">
<h2>lado esquerdo</h2>
<p><a href="javascript:toggleContent('sideleft',1)">Comprimento padrão</a> <a href="javascript:toggleContent('sideleft',2)">Página mais longa< /a></p>
<p> Não é fácil passar de uma abordagem de design fixa, baseada em pixels, para uma abordagem de design relativa e flexível. Mas, se usado corretamente, pode ser uma escolha natural para aumentar a acessibilidade e a facilidade de uso sem sacrificar o design. </p>
<p> Um pixel é um ponto não escalável na tela de um computador e um
h3 é um quadrado do tamanho de uma palavra. Devido à mudança no tamanho da fonte, h3
Uma unidade relativa que representa o tamanho de texto preferido do usuário. </p>
<p> Pode ser mais fácil optar por um design fixo e impresso porque há menos a considerar se as dimensões permanecerem as mesmas. No entanto, se você adotar um método de design flexível, poderá aproveitar ao máximo o <a href="http://product.yesky.com/catalog/345/" class="bluekey" target="_blank">monitor </a> e navegador. </p>
<p> Talvez você queira que seu site tenha uma determinada aparência, mas o que os usuários desejam ver pode ser diferente. Qualquer coisa imposta aos usuários prejudica a facilidade de uso e, portanto, prejudica o sucesso do site. </p>
<p> Não é fácil passar de uma abordagem de design fixa, baseada em pixels, para uma abordagem de design relativa e flexível. Mas, se usado corretamente, pode ser uma escolha natural para aumentar a acessibilidade e a facilidade de uso sem sacrificar o design. </p>
</div>
<h2>lateralmente</h2>
<p> Não é fácil passar de uma abordagem de design fixa, baseada em pixels, para uma abordagem de design relativa e flexível. Mas, se usado corretamente, pode ser uma escolha natural para aumentar a acessibilidade e a facilidade de uso sem sacrificar o design. </p>
<p> Um pixel é um ponto não escalável na tela de um computador e um
h3 é um quadrado do tamanho de uma palavra. Devido à mudança no tamanho da fonte, h3
Uma unidade relativa que representa o tamanho de texto preferido do usuário. </p>
<p> Pode ser mais fácil optar por um design fixo e impresso porque há menos a considerar se as dimensões permanecerem as mesmas. No entanto, se você adotar uma abordagem de design flexível, poderá aproveitar ao máximo o monitor e o navegador do seu computador. </p>
<p> Talvez você queira que seu site tenha uma determinada aparência, mas o que os usuários desejam ver pode ser diferente. Qualquer coisa imposta aos usuários prejudica a facilidade de uso e, portanto, prejudica o sucesso do site. </p>
</div></div>
<div id="rodapé">
<endereço>
Rodapé
</endereço>
<p>Produção: <a href="http://homepage.yesky.com">Página Tao Bar</a></p>
</div>
</body>
</html>
<linguagem script="Javascript">
var agora = nova Data();
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");
</script>
<noscript>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>
</noscript> |
