Nenhum produto encontrado nessa seleção.
Um layout responsivo com coluna fixa tem várias vantagens para a maioria dos tamanhos de tela em que ele será exibido. Se o cliente estiver vendo seu conteúdo em um smartphone, o layout irá se adaptar àquele tamanho de tela sem redirecionar a página para outro endereço.
O mesmo acontece quando o cliente estiver em seu desktop ou tablet, ou seja, um único layout que se adapta para qualquer tamanho de monitor ou tela.
Criar um layout responsivo não é nada complicado, porém, deve-se tomar bastante cuidado, principalmente se você já tem o costume de trabalhar com layouts de largura fixa.
No layout responsivo os elementos devem ser redimensionados automaticamente para a largura do elemento que os envolve caso o usuário modifique o tamanho da tela de seu navegador, ou acesse o site em um dispositivo com tela pequena, como um smartphone, por exemplo.
Por que barra fixa?
A barra fixa tem vantagens e desvantagens. Uma das vantagens é quando o site tem que exibir conteúdo fixo na barra lateral, como é o exemplo de anúncios do Adsense. Como o conteúdo é fixo, ficaria sem lógica a sua barra lateral ser redimensionada juntamente com o conteúdo do site.
Por outro lado, uma das desvantagens da barra lateral fixa é que ela terá que seguir o fluxo do layout quando a tela for pequena demais. Com isso, seus anúncios ou o conteúdo da barra lateral irão ficar abaixo do conteúdo principal para smartphones ou tablets com a tela muito pequena.
Veja exemplos nas imagens abaixo:
320px de largura:
980px de largura:
Demo
Não faz sentido você seguir um tutorial sem saber exatamente o que você vai fazer, por isso, temos um exemplo do layout que vamos criar neste tutorial, segue o link abaixo:
Vou explicar como criar este modelo.
Compatibilidade
O Layout responsivo que vamos criar é completamente compatível com todos os navegadores, com exceção do IE6, já que vamos utilizar uma propriedade CSS não suportada por ele – max-width.
Compatibilidade com o IE7 ou superior e todos os outros navegadores (Chrome, Opera, Firefox, Safari, etc…).
Criando o layout responsivo
Já falamos demais, então se você ainda estiver lendo, vamos começar a criar nosso layout pelo HTML.
Vou fazendo e explicando tudo.
O HTML
Vamos criar 3 DIVs para nosso layout, uma que vai ser o "container" e outras duas que serão a coluna da esquerda e direita respectivamente.
Dentro de ambas as colunas teremos uma outra DIV apenas para criar um espaçamento entre o conteúdo e a borda da mesma (padding).
<div class="site-cols-wrapper"> <div class="site-left-col"> <div class="site-left-col-inner"> Esquerda </div> </div> <div class="site-right-col"> <div class="site-right-col-inner"> Direita </div> </div> </div>
| Classe | Função |
|---|---|
| site-cols-wrapper | Envolver todas as DIVs e para criar a largura máxima do site. |
| site-left-col | Coluna da esquerda. |
| site-left-col-inner | Espaçamento interno da coluna da esquerda. |
| site-right-col | Coluna da direita. |
| site-right-col-inner | Espaçamento interno da coluna da direita. |
Agora vamos adicionar um pouco de estilo às nossas DIVs.
O CSS
Nossa DIV principal (site-cols-wrapper) terá no máximo 1200px de largura (max-width). Nossa DIV da direita (site-right-col), que será a barra lateral, terá 360px de largura fixa (width). Nossa DIV da esquerda, que terá o conteúdo (site-left-col), ficará livre, ou seja, a largura vai variar dependendo da largura da tela do navegador. Por fim, nossas DIVs que estão dentro de cada uma das colunas (site-left-col-inner e site-right-col-inner), terão apenas um espaçamento (padding).
.site-cols-wrapper{
max-width:1200px;
margin:0 auto;
font-family: sans-serif;
font-size:18px;
color:#555;
}
/* Coluna da esquerda */
.site-left-col{
width:100%;
margin-right:-360px;
float:left;
}
.site-left-col-inner{
padding:20px;
margin-right:360px;
}
/* Coluna da direita */
.site-right-col{
width:360px;
float:right;
}
.site-right-col-inner{
padding:20px;
}
Os truques:
- A DIV .site-left-col tem largura de 100%, no entanto, tem margin-right:-360px;, o valor negativo irá atrair o próximo elemento para próximo dela se este for menor que 360px;
- Para que as DIVs não fiquem uma sobre a outra, a DIV interna .site-left-col-inner corrige o problema com margin-right:360px;
Pronto, o CSS e HTML estão feitos. Neste ponto você já deve ver suas duas colunas funcionando, no entanto, quando você diminuir muito a tela do seu navegador, a coluna lateral irá sobrepor a coluna do conteúdo. Por este motivo, iremos fazê-la seguir o fluxo quando a tela estiver menor que 800px.
Vou explicar como fazer isso com jQuery, no entanto, vamos precisar de mais classes CSS para quando a tela for pequena demais, veja abaixo:
.site-left-col-resized{
width:100%;
margin-right:0;
float:none;
}
.site-left-col-inner-resized{
padding:20px;
margin-right:0;
}
.site-right-col-resized{
width:100%;
float:none;
}Isso deverá ser colocado no final do seu CSS. Vamos incluir essas classes nas DIVs quando a tela for pequena demais e removê-las quando estiver em um tamanho razoável (leia-se: 800px ou mais).
O jQuery
Vamos utilizar a função .resize() no elemento window para saber o tamanho da janela e fazer a barra lateral sumir.
function resizeSidebar() {
var window_width = $(window).width();
if ( window_width < 800 ) {
$('.site-right-col').addClass('site-right-col-resized');
$('.site-left-col').addClass('site-left-col-resized');
$('.site-left-col-inner').addClass('site-left-col-inner-resized');
} else {
$('.site-right-col').removeClass('site-right-col-resized');
$('.site-left-col').removeClass('site-left-col-resized');
$('.site-left-col-inner').removeClass('site-left-col-inner-resized');
}
}
jQuery(function(){
resizeSidebar();
$(window).resize(function(){
resizeSidebar();
});
});Simplesmente isso, apenas faz com que a barra lateral siga o fluxo quando a tela for menor que 800px.
Todo o código junto
Se quiser copiar e colar, o código abaixo já vem com tudo embutido:
<!DOCTYPE html>
<html>
<head>
<title>Layout responsivo com coluna fixa (CSS, HTML e jQuery) | Demo</title>
<style>
body,
html{
margin:0;
padding:0;
height:100%;
}
* img{
max-width:100% !important;
height:auto !important;
}
.site-cols-wrapper{
max-width:1200px;
margin:0 auto;
font-family: sans-serif;
font-size:18px;
color:#555;
}
/* Coluna da esquerda */
.site-left-col{
width:100%;
margin-right:-360px;
float:left;
}
.site-left-col-resized{
width:100%;
margin-right:0;
float:none;
}
.site-left-col-inner{
padding:20px;
margin-right:360px;
}
.site-left-col-inner-resized{
padding:20px;
margin-right:0;
}
/* Coluna da direita */
.site-right-col{
width:360px;
float:right;
}
.site-right-col-resized{
width:100%;
float:none;
}
.site-right-col-inner{
padding:20px;
}
/* "Menu" */
.menu{
padding:20px 0;
text-align:center;
width:100%;
displau:block;
clear:both;
font-size:20px;
color:#fff;
background:#000;
}
.menu a{
color:#fff;
text-decoration:none;
font-weight:700;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function resizeSidebar() {
var window_width = $(window).width();
if ( window_width < 800 ) {
$('.site-right-col').addClass('site-right-col-resized');
$('.site-left-col').addClass('site-left-col-resized');
$('.site-left-col-inner').addClass('site-left-col-inner-resized');
} else {
$('.site-right-col').removeClass('site-right-col-resized');
$('.site-left-col').removeClass('site-left-col-resized');
$('.site-left-col-inner').removeClass('site-left-col-inner-resized');
}
}
jQuery(function(){
resizeSidebar();
$(window).resize(function(){
resizeSidebar();
});
});
</script>
</head>
<body>
<div class="menu">
<a href="http://www.todoespacoonline.com/w/?p=129"> * voltar para o tutorial *</a>
</div>
<div class="site-cols-wrapper">
<div class="site-left-col">
<div class="site-left-col-inner">
Esquerda
</div>
</div>
<div class="site-right-col">
<div class="site-right-col-inner">
Direita
</div>
</div>
</div>
<div class="menu">
<a href="http://www.todoespacoonline.com/w/?p=129"> * voltar para o tutorial *</a>
</div>
</body>
</html>Só colar em um arquivo HTML e estudar suas possibilidades.
Se for adicionar um menu e rodapé, faça isso fora da DIV principal que criamos neste tutorial, assim elas serão mantidas na mesma estrutura sempre.
Concluindo
Este layout irá funcionar em todos os navegadores, incluindo os que estão presentes em smartphones e tablets. Por fim, funciona no famoso IE (Internet Explorer 7 e posterior).
Caso tenha algum erro no código, queira aprimorar, ou tirar sua dúvida, comente, vamos partilhar nosso conhecimento com todos.
