Deixando resquícios duvidosos para arqueólogos do futuro.
Especiais
FixWidth
6 de dezembro, 2006 por Ricardo José Corrêa
( Não há classificações ainda)
Loading ...O script FixWidth tem a função de não deixar que uma DIV que envolva DIVs internas perca sua formatação de colunas se as mesmas DIVs internas estourarem seu tamanho.
O Exemplo a segui é um Tableless de 3 colunas.
fixwidth.js
/*/////////////////////////////////////////////////////////////////////// ////////////////////////////////FIXWHITH///////////////////////////////// ///////////////////////////////////////////////////////////////////////// Apresentação: Esse Javascript corrige o tamanho de uma DIV, caso as DIVs internas a ela aumentem de tamanho na horizontal. Isso permite que o design das páginas em Tableless seja menos afetado. Autores: Ricardo José Corrêa e Thomás Camargo www.rjcorrea.com.br ///////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////// *//////////////////////////////////////////////////////////////////////// function fixwith(seAumentar,seAumentarTamanho,quemAumenta){ /*Recebe o tamnho atual da DIV interna*/ seAumentarTamanhoAtual = document.getElementById(seAumentar).clientWidth; /*Verifica se o tamanho atual da DIV interna passou do tamanho original informado*/ if (seAumentarTamanhoAtual > seAumentarTamanho){ /*Recebe o tamanho atual da DIV a ser aumentada*/ quemAumentaTamanhoAtual = document.getElementById(quemAumenta).clientWidth; /*Aqui é calculada a diferença de quanto a DIV a ser aumentada estourou, comparando com seu tamanho atual*/ quemAumentaQuanto = seAumentarTamanhoAtual-seAumentarTamanho; /*Assim, somamos a diferença acima com o tamanho atual da DIV que irá aumentar.*/ /*Pegando sempre o tamanho atual da DIV que irá aumentar, podemos verificar, mais de uma vez, o tamanho de diversas DIVs internas que possam ter estourado e aumentar sempre com o tamanho atualizado*/ quemAumentaQuanto = quemAumentaQuanto+quemAumentaTamanhoAtual; /*Finalmente, o valor calculado de quanto irá aumentar é repassado para a DIV que será aumentada*/ document.getElementById(quemAumenta).style.width = quemAumentaQuanto; } }
style.css
body {
margin:0;
padding:0;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #FFB539;
}
H1{
font-size: 12px;
}
#tudo{
width:770px;
margin: 0 auto;
}
#menuDir, #conteudo, #menuEsq {
display: table;
vertical-align: top;
float: left;
margin: 0px;
text-align: left;
}
#menuEsq{
width:186px;
background-color:#FFE28B;
margin-right: 8px;
}
#conteudo{
width:437px;
background-color: #FFFFFF;
margin-right: 8px;
}
#menuDir{
width:131px;
background-color:#0968CA;
}
#rodape{
width:770px;
clear: both;
float: left;
color: #FFFFFF;
background-color: #000000;
}texto.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DeBE Tableless</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link xhref="style.css" mce_href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript" xsrc="fixwidth.js" mce_src="fixwidth.js" type="text/javascript">
</script>
</head>
<!--
O fixwith funciona assim: as informações das DIVs internas (id e tamanho) são passadas
para o script, que atualiza o tamanho da DIV que envolve todas essas outras DIVs.
Mantendo assim as DIVs sempre em coluna, sem que nenhuma delas passem para a linha debaixo
Coloquei para rodar a função ao carragar toda a página. Assim
podemos saber se alguma imagem, texto,
tabela etc. estourou o tamanho original da DIV.
A função é passada da seguinte forma:
fixwith('id da DIV','tamanho da DIV originalmente','quem aumenta se ela aumentar')
-->
<body onLoad="fixwith('menuEsq','186','tudo');fixwith('conteudo','437','tudo');fixwith('menuDir','131','tudo');">
<div id="tudo">
<div id="menuEsq">
<h1>Conteudo menu esquerdo</h1>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. </div>
<div id="conteudo">
<h1>Conteudo do site</h1>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
<div id="menuDir">
<h1>Conteudo menu direito</h1>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. </div>
<div id="rodape"> Aqui vem o rodape. </div>
</div>
</body>
</html>
