Layout líquido

[Thiago Retondar 18]

Hello, people!

 

Vejo que o pessoal tem muitas dúvidas em relação à layout líquido na horizontal. Então resolvi fazer um tutorial para tentar sanar um pouco das dúvidas.

 

Chega de lenga-lenga e vamos ao que interessa, o tutorial.

 

O que acontece é que a maioria se engasga no XHTML, pois sua marcação não é meio semântica.

<div id="container">
<div id="header">
<h1>TOPO</h1>
</div><!-- /header -->

<div id="menu">
<h1>MENU</h1>
</div><!-- /menu -->

<div id="box-lat">
<h1>BOX-LAT</h1>
</div><!-- /box-lat -->

<div id="content">
<h1>CONTEÚDO</h1>
</div><!-- /content -->

<div id="footer">
<address>Rodapé do site</address>
</div><!-- /footer -->
</div><!-- /container -->

 

Nossa marcação ficou assim. Agora vamos adicionar conteúdo.

 

<div id="container">
<div id="header">
<h1>TOPO</h1>
</div><!-- /header -->

<div id="menu">
<h1>MENU</h1>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /menu -->

<div id="box-lat">
<h1>BOX-LAT</h1>
<ul>
<li>Item da lista</li>
<li>Item da lista</li>
<li>Item da lista</li>
<li>Item da lista</li>
<li>Item da lista</li>
<li>Item da lista</li>
<li>Item da lista</li>
<li>Item da lista</li>
<li>Item da lista</li>
<li>Item da lista</li>
<li>Item da lista</li>
<li>Item da lista</li>
<li>Item da lista</li>
<li>Item da lista</li>
</ul>
</div><!-- /box-lat -->

<div id="content">
<h1>CONTEÚDO</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div><!-- /content -->

<div id="footer">
<address>Rodapé do site</address>
</div>
</div><!-- /container -->

Adicionado o conteúdo, vamos formatar com o CSS.

/*Site desenvolvido por Thiago Retondar*/*{	font-family: Arial, Helvetica, sans-serif;	margin: 0;	padding: 0;	text-decoration: none;	list-style:  none;	font-style:  normal;}/* TAGs */body{	background: #74c6e4;	min-width: 735px;	padding: 10px;}h1{	font-size: 22px;	color: #000;	text-align: center;}a, li, p, address{	color: #3E3E3E;	font-size: 13px;}a:hover{	text-decoration: underline;}p{	text-indent: 15px;}/* /TAGs *//* IDs */#header, #menu, #box-lat, #content, #footer{	background: #92C8DC;	border: 5px solid white;	padding: 5px;	margin: 5px 0;}#header{	height: 100px;	width: auto;}#menu, #box-lat{	height: auto;	width: 100px;}#menu{	float: left;	}#box-lat{	float: right;}#content{	margin: 10px 135px;	height: auto;	width: auto;}#footer{	width: auto;	height: 15px;	clear: both;	text-align: center;}/* /IDs */

O segredo está aqui:

 

#menu{	float: left;	}#box-lat{	float: right;}#content{	margin: 10px 135px;	height: auto;	width: auto;}

O #menu vai estar à esquerda e o #box-lat à direita. O #content não var receber nenhum float, pois como o #menu e #box-lat estão flutuados, ele se encaixa ali no meio. Apenas o que fazemos é ajustar a sua estética, colocando margin.

 

Exemplo online :seta: http://thiagotestes.site90.com/tutoriais/layout-liquido/

 

As dúvidas devem ser postadas no fórum principal!

 

Bem é isso, pessoal. Até a próxima.

[Thiago de Oliveira Cruz 21]

Muito bom

 

Parabens

[Henrique Barcelos 290]

Boooooa Thiago...

 

Chega de tópicos "Problemas com layout líquido"...

 

Simplesmente esclarecedor para qualquer um que não entenda muito bem de HTML e CSS :thumbsup:

[New Web Design 0]

sou novo na area e esse tópico tbm sanou muitas duvidas minhas

eu geralmente tentava outras alternativas porém um pouco mais complicadas.

dessa forma o código ficou bem mais semântico e menor tbm neh rsrsrs

valeu thiago

[pslucasps 2]

@Thiago Retondar: Sou o user que você estava ajudando em outro tópico e como disse iria dar mais uma estuda pra compreender melhor algumas coisas e esse tópico ajudou muito, pois consegui ter uma melhor noção sobre Box Model. Parabéns.

[flneves 0]

Show de bola...... Ajudou muito!

[Rafael Queiroz 0]

Thiago, eu to com um probleminha!

Eu gostaria que meu layout fosse assim, "auto-ajustável". Entretanto, tem alguns complicadores no meu site que me fazem não saber o que fazer! hehe

É o seguinte: o meu site tem uma figura principal (que vai ser o menu) que fica centralizado. O menu eu consegui fazer com que ficasse flutuante, de acordo com o tamanho do navegador. Entretanto, eu estou trabalhando com um script de hide/show divs em JS para as divs que ficam ao redor desse menu central. Para isso, tenho que definir o position dessas divs como absolute.

Outro complicante é que eu tenho que definir o tamanho da div, para que as outras possam ficar em suas respectivas posições.

 

Eu queria saber se tem como com CSS eu trabalhar com esse auto resizing das divs que ficam ao redor do menu principal, para que o site inteiro diminua de tamanho de acordo com o tamanho do navegador ou se tem algum outro jeito pra eu solucionar esse meu problema!

 

valeu!

[Thiago Retondar 18]

Posta sua dúvida lá no fórum principal e manda o link do site, assim fica mais fácil de ajudar.

 

:thumbsup:

[macielcr7 9]

Caro senhor.!' Thiago

Seu tutorial está D+........... :clap:

[RenanMonteiro 0]

Perfeito, perfeito! ajudou muito, era o que estava empacando a continuidade do site que estou desenvolvendo rs. :clap:

 

Uma dúvida, no meu caso, o BOX-LAT é do tamanho de 200px, e o Menu, de 150, quando mudo o tamanho deles pra esses valores, o content fica em baixo no BOX-LAT. Como faz pra ficer certinho?

[Thiago Retondar 18]

Só modificar o margin do #content: margin: 10px 240px 10px 190px, por exemplo.

 

:thumbsup:

[RenanMonteiro 0]

agora deu certinho! valeu!