docBaixar arquivo PDF
download 
Denúncia Transcrição
Baixar arquivo PDF
Layouts elásticos estrutura básica
<!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>Divs elásticas </title>
<style type="text/css">
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background-image:url(Penguins.jpg);
margin: 0; /* é uma boa prática a zero a margem e padding do elemento corpo para explicar diferentes padrões do navegador */
padding: 0;
text-align: center; /* Isso centraliza o recipiente em navegadores IE 5 *. O texto é, então, definido como padrão alinhado à
esquerda no # container selector */
color: #000000;
}
/* Dicas para layouts elásticos
1. Uma vez que os layouts elásticos geral de dimensionamento é baseado no tamanho fontes padrão do usuário, eles são mais
imprevisíveis. Usado corretamente, eles também são mais acessíveis para aqueles que precisam de maior tamanho de fontes desde que
o comprimento da linha permanece proporcional.
2. Dimensionamento de divs neste esquema são baseadas no tamanho da fonte 100% em o elemento do corpo. Se você diminuir o
tamanho do texto em geral por meio de um font-size: 80% sobre o elemento do corpo ou do container #, lembre-se que todo o layout vai
reduzir proporcionalmente. Pode querer aumentar as larguras dos vários divs para compensar isso.
3. Se a fonte de dimensionamento é mudado em diferentes quantidades em cada div em vez de sobre a concepção global (isto é: #
sidebar1 é dado um tamanho de fonte de 70% e # mainContent é dado um tamanho de fonte de 85%), este irá mudar proporcionalmente
cada um dos divs globais tamanho. Você pode querer ajustar com base na sua fonte tamanho final.
*/
.twoColElsLtHdr #container {
width: 46em; /* essa largura vai criar um recipiente que vai caber em uma janela do navegador 800px se o texto é deixado em
tamanhos de fonte padrão do navegador */
background: #FFFFFF;
margin: 0 auto; /* as margens são automaticamente ajustadas. (em conjunto com uma largura) do centro da página */
border: 1px solid #000000;
text-align: left; /* Isso substitui o text-align: center no elemento body. */
}
.twoColElsLtHdr #header {
background: #DDDDDD;
padding: 0 10px; /* este preenchimento coincide com o alinhamento à esquerda dos elementos nas divs que aparecem abaixo
dela. Se uma imagem é usada no # header em vez de texto, você pode querer remover o preenchimento. */
}
.twoColElsLtHdr #header h1 {
margin: 0; /* Zerar a margem do último elemento no cabeçalho div # vai evitar o colapso margem - um espaço inexplicável entre
divs. Se a div tem uma borda em torno dele, isso não é necessário, pois que também evita o colapso margem */
padding: 10px 0;/* Com estofamento em vez de margem vai permitir que você mantenha o elemento de distância das bordas do
div */
}
/*Dicas para sidebar1:
1. Esteja ciente de que, se você definir um valor de font-size nessa div, a largura total da div serão ajustados em conformidade.
2. Como estamos trabalhando em ems, não é melhor usar enchimento na própria barra lateral. Ele será adicionado à largura para criar
padrões de browsers com uma largura real desconhecido.
3. O espaço entre o lado da div e os elementos dentro dele pode ser criado por colocação de uma margem esquerda e direita, nos
elementos como visto na regra ". TwoColElsLtHdr # sidebar1 p".
*/
.twoColElsLtHdr #sidebar1 {
float: left;
width: 12em; /*uma vez que este atributo é criado, uma largura deve ser dada */
background: #EBEBEB; /* a cor do fundo será exibido para o comprimento do conteúdo da coluna, mas nenhuma outra */
padding: 15px 0; /* preenchimento superior e inferior criar espaço visual dentro deste div */
}
.twoColElsLtHdr #sidebar1 h3, .twoColElsLtHdr #sidebar1 p {
margin-left: 10px; /* a margem esquerda e direita deverá ser dada a cada elemento que serão colocados nas colunas laterais */
margin-right: 10px;
}
/* Dicas para mainContent:
1. Se você der este # mainContent div um valor de font-size diferente do # sidebar1 div, às margens do mainContent div # será baseado
em seu font-size ea largura do # sidebar1 div será baseado em seu font-size . Você pode querer ajustar os valores destes divs.
2. O espaço entre o mainContent e sidebar1 é criado com a margem esquerda da div mainContent. Não importa o quanto o conteúdo da
div sidebar1 contém, o espaço coluna permanecerá. Você pode remover esta margem esquerda se você quiser que o texto do
mainContent da div # para preencher o espaço # sidebar1 quando o conteúdo em # sidebar1 extremidades.
3. Para evitar a queda de float, você pode precisar de um teste para determinar a imagem / element tamanho máximo aproximado uma
vez que este layout é baseado no fonte do usuário dimensionamento combinado com os valores definidos. No entanto, se o usuário tem
o tamanho da fonte do navegador definido inferior ao normal, menos espaço estará disponível no mainContent div # do que você pode
ver em teste.
4. No Internet Explorer comentário condicional abaixo, a propriedade zoom é usado para dar o mainContent "hasLayout". Isto evita vários
bugs-IE específicos que possam ocorrer.
*/
.twoColElsLtHdr #mainContent {
margin: 0 1.5em 0 13em; /* A margem direita pode ser dada em ems ou pixels. Ele cria o espaço para o lado direito da página. */
}
.twoColElsLtHdr #footer {
padding: 0 10px; /* Isto coincide com o estofamento alinhamento à esquerda dos elementos nas divs que aparecem acima. */
background:#DDDDDD;
}
.twoColElsLtHdr #footer p {
margin: 0; /* Zerar as margens do primeiro elemento no rodapé irá evitar a possibilidade de um colapso margem - um espaço entre
divs */
padding: 10px 0; /* Preenchimento deste elemento irá criar espaço, assim como a margem teria, sem emissão colapso margem * /
}
/* códigos para reutilização */
.fltrt { /* Esta classe pode ser usada para flutuar um elemento na sua página. O elemento flutuado deve preceder o elemento que deve
ser o próximo a na página. */
float: right;
margin-left: 8px;
}
.fltlft { /* esta classe pode ser utilizada para flutuar um elemento deixado na sua página */
float: left;
margin-right: 8px;
}
.clearfloat { /* esta classe deve ser colocado em uma div ou elemento de ruptura e deve ser o elemento final antes do fim de um
recipiente que deve conter totalmente um carro alegórico */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
</style>
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColElsLtHdr #sidebar1 { padding-top: 30px; }
.twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]
/ * Coloque css correções para todas as versões do IE neste comentário condicional * /
. twoColElsLtHdr # sidebar1 {padding-top: 30px;}
. twoColElsLtHdr # mainContent {zoom: 1; padding-top: 15px;}
/* A propriedade zoom proprietária acima dá o IE hasLayout ele precisa evitar diversos erros */ -->
</head>
<body class="twoColElsLtHdr">
<div id="container">
<div id="header">
<h1>CABEÇALHO</h1>
<!-- FIM DO CABEÇALHO #header --></div>
<div id="sidebar1">
<h3>lOCAL PARA MENU</h3>
<p>A cor do fundo nesta div só irá mostrar para o comprimento do conteúdo. Se você gostaria de uma linha divisória em vez disso,
colocar uma borda no lado esquerdo do container principal div # o container principal div # sempre conterá mais conteúdo do que o
# menu div. </p>
<p>mais conteúdo ...... </p>
<!-- FIM DA DIV MENU ESQUERDA #sidebar1 --></div>
<div id="mainContent">
<h1> Container Principal </h1>
<p>Local para a disponibilização das paginas </p>
<p>INFORMAÇÕES DO PRIMEIRO PARÁGRAFO.</p>
<h2>H2 cabeçalho nivel 2 </h2>
<p>Informações para segundo parágrafo <br />Informações para segundo parágrafo <br />Informações para segundo parágrafo
<br />Informações para segundo parágrafo <br />Informações para segundo parágrafo <br />Informações para segundo parágrafo <br
/>Informações para segundo parágrafo <br />Informações para segundo parágrafo <br />Informações para segundo parágrafo <br
/>Informações para segundo parágrafo <br />Informações para segundo parágrafo <br />Informações para segundo parágrafo <br
/>Informações para segundo parágrafo <br />Informações para segundo parágrafo <br />Informações para segundo parágrafo <br
/>Informações para segundo parágrafo <br />Informações para segundo parágrafo <br />Informações para segundo parágrafo <br
/>Informações para segundo parágrafo <br />Informações para segundo parágrafo <br />Informações para segundo parágrafo <br /></p>
<!-- Fim da div do container principal #mainContent --></div>
<!-- Este elemento de compensação deve seguir imediatamente a mainContent # div, a fim de forçar a div # recipiente para conter
todas as divs internas flutuantes --><br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- Fim do rodapé #footer --></div>
<!-- Fim da primeira div #container --></div>
</body>
</html>
