Estilizando o corpo do Blogger Profissionalmente

11 de dezembro de 2008

Bom, já trabalhamos no Body do Blogger, criamos 2 tipos de Header, agora vamos ao corpo do Blog (outer-wrapper). Neste trecho de código está o fluxo do blog literalmente. Aqui neste conteiner estão os Post, Data, Marcadores, Comentários, Sidebar, Widgets, etc. Vamos neste artigo definir o Layout deste trecho.
Para isso vamos reler os artigos: Designer do Blog e Fatiando imagens, para relembramos algumas medidas de largura do Blog.

Defini que o conteiner (pense em uma caixa que contëm outras caixas quando falar no outer-wrapper) terá 729px para caber a imagem fatiada que se localiza no topo do meu Blog:
 
A imagem acima tem 727px. Peraí? Se o outer-wrapper tem 729px como pode?
Se você olhar no meu Blog o body tem uma imagem que se repete na vertical que contém o fundo do blog e um sombreamento nas laterais, está imagem tem dimensões maiores e exatamente no meio o espaço é de 729px. Sendo assim sobram 1px de cada lado para a imagem do outer-wrapper, dando um efeito interessante.
Imagem do body:
 
 Vamos ao que interessa, o código em si.
Aqui iremos só mexer na CSS (Folha de estilos) do outer-wrapper:
#outer-wrapper {
  width: 729px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  background: url(http://imagemdotopodoblog.jpg) no-repeat center top;
   }
Aqui neste trecho de código não se precisa explicar muita coisa, mas veja que a largura foi de 729px, a margens são automaticas na vertical para centralizar, dei um espaçamento em todos os lados do conteiner de 10px, o texto mandei alinhar a esquerda porque no body havia definido como center para corrigir o navegador IE6 que não entende margens automáticas e finalmente a imagem coloquei no centro e acima. Isso termina a configuração deste elemento.
Agora vamos aos elementos dentro de outer-wrapper, no caso são: content-wrapper, main-wrapper e sidebar-wrapper.
Content-wrapper também é um conteiner que contém: main-wrapper e sidebar-wrapper.
#content-wrapper {
  width:650px;
  padding:0;
  margin:0 auto;
  background: url(http://imagemdocontent-wrapper.jpg) repeat-y;
}
Largura definida em 650px, limpei todo espaçamento, mandei centralizar com margens automáticas e coloquei uma imagem de fundo se repetindo na vertical. Veja a imagem:
 
Está imagem cria uma coluna falsa. Coluna falsa é a melhor técnica para ser usar na sidebar. Se a sidebar for menor em altura que a área dos post, ela continuará fluindo normalmente, graças as colunas falsas. 
Main-wrapper é a área dos Post vamos defini-la:
#main-wrapper {
  width: 417px;
  padding : 20px 0 0 0px;
  float: left;
  background: url(imagemdomainwrapper.jpg) no-repeat top center;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
Largura de 417px, espaçamento de 20px na parte de cima para o título dos post não ficar muito expremido, mandei flutuar a esquerda, coloquei uma imagem no topo para dar um sombreado:
 
O restante do código são correções para IE, então deixe como está.
E finalmente a Sidebar:
#sidebar-wrapper {
  width: 233px;
  float: right;
  font : 11px Tahoma, Arial, sans-serif;
  padding: 20px 0 0 0;
  color : #999;
  background: url(imagemsombreamento.jpg) no-repeat top center;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
Largura 233px, flutuação a direita, a fonte eu mudei para Tahoma na sidebar, o mesmo espaçamento top que dei em main-wrapper, a cor do texto também mudei na sidebar e coloquei uma imagem de sombreamento:
 
Bom, feito tudo isso seu template já deve estár bem vestido. No próximo artigo vamos tratar da estilização mais apuradas destes elementos. Até lá!
Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

14 comentários:

luizvalerio disse...

Você tem dado aulas interessantíssimas de webdesigner para pessoas leigas no assunto. Eu li todos os postos e os achei bastante didáticos, ainda que fazer as atividades pareça um pouco complicado para quem não entende de Javascript ou HTML. Mas com um pouco de estudo e esforço dá para aprender e fazer tudo direitinho. Valeu pela iniciativa de socializar seus conhecimentos. Afinal, essa é a dinâmica desse ambiente colaborqativo que é a web.


Luiz Valério publicou um post sobre.. Entre o desespero e a tênue esperança

luizvalerio disse...

Suas orientações têmmsido cada vez mais válidas para mim, caro Marcelo. Você tem sido muito didático em seus textos. Não me canso de louvar a sua iniciativa.

Luiz Valério publicou um post sobre.. Entre o desespero e a tênue esperança

Marcelo R. Souza disse...

@Luiz este tem sido meu objetivo. Espero alcança-lo.

luis disse...

cara me ajuda.
as minhas imagens nao estao abrindo no internet explorer. fica tudo branco.
parece que nao tah carregando.
uso o template minima.
valeu!

Marcelo R. Souza disse...

@luis verifica sua propriedade background e veja se está digitada corretamente. Uma vez minha imagem do rodapé não aparecia no IE6 então redigitei a propriedade background e ela funcionou, era apenas um espaço que faltava. Não sei pq acontece isso mas verifica todas está propriedade e redigita elas de novo

Luís disse...

Pô Marcelo, deu certo!
Valeu!
q ridículo esse tal de IE

Marcelo R. Souza disse...

@Luís na realidade não podemos ridicuralizar o IE pois senão fosse ele não corrigiriamos vários bugs nos navegadores modernos. Eu ainda escrevo códigos para ele pq ainda existem muitas pessoas que o usam.

Gem@ disse...

Muy interesante, me encantó descubrir este blog :)

Marcelo R. Souza disse...

Seja muito bem-vinda!

GAMA disse...

Olá, creioq ue é aprimeira vez que comento em seu site,bom ja tenho um certo conhecimento em html/css ...

mas estou com um problema,creio que seja aquele tipo de coisa, esta ali o erro mas ja estou nervoso de + para achalo :P

Bom
meu site é

http://storm-ex.com/

se vc usa firefox talvez não encontre erros mas se vc usa IE vc verá um erro no link dos comentarios,
no Firefox ele fic acom adime~sao 30px por exemeplo enkuanto no IE fica 25px..

Bom se o problema fosse apenas este, eu usaria os 'hacks' como o underline ou asterisco antes das definições, ma so grand eproblema é que eu percebi é que o google crhome e o Opera estão interpretando da mesma forma que o IE ...
e se eu colocar o 'hack' so estara certo apenas no IE ...

se pudr me ajudar agradeço MUUITO

Obg flws !

GAMA disse...

Ah obs :


IE 7

o IE 6 n ligo mais XD ^~

Marcelo R. Souza disse...

@Gama
Dei uma olhada em seu código e vi muito div style e o problema está em um deles. O problema que seu template ta com marcação desnecessária e fica dificil de te falar onde realmente está o erro sem analizar o código fonte.

GAMA disse...

Na verdade todos as marcações sao necessarias

:x
... bom mesmo n ajudando vlw

flws

Anônimo disse...

great post

Postar um comentário

Faça seu comentário ou sua pergunta. Quando for possível postarei a resposta.
Obrigado!
Para deixar o link da sua última postagem coloque este código:

<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu link do último post">Título do Post</a></em>

Ficará assim:
Marcelo publicou um post sobre.. Alguma coisa