Alinhando as colunas e o Texto no blog

Eu ensinei como adicionar coluna nos templates, mas acho que me esquecí de um detalhe importante que é o alinhamento das colunas, ou seja, os espaços entres elas. O que tá acontecendo é que vejo muito blog onde uma coluna foi adicionada, mas ela acaba ficando grudada na coluna do post, o que é bem feinho. Então vou ensinar a alinharem direitinho, não só a coluna, como os textos.

Vou usar, novamente, o Template Mínima (do Blogger), como exemplo. Um template deste você irá encontrar assim:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: left;
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 */
}

#sidebar-wrapper {
width: 220px;
float: right;
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 */
}

Recapitulando, que nunca é demais: Outer-wrapper é a largura total do template, por isso, ao acrescentar uma coluna, você deve somar os valores da largura de todas as colunas e o valor total não pode ultrapassar o valor da Outer-Wrapper (width= largura). Aqui, por padrão, a largura total é só de 660px e para inserir uma nova coluna tem que aumentar este valor, ou a coluna desce.Vamos aumentar para 850px e inserir uma nova coluna de 200px. Vai ficar assim:

410px (main) + 220px (sidebar) + 200px (newsidebar) = 830px

Ficando uma sobra de 20px. Inserindo a coluna, não esqueça de posicionar ela direitinho (float) e tenham atenção para que, quando se insere uma nova coluna, ela está vazia (não tem elementos de página), portanto, quando você visualizar não vai ver nada e a coluna do post vai tomar o lugar dela. Explicando melhor: você tem um Mínima e colocou uma nova coluna com float: left; mas visualizou e o que estava à esquerda era a coluna do post. Salve, vá em Modelo e você verá a coluna lá. Coloque algum elemento de página e pronto, a sidebar aparece e a coluna do post vai para o centro da página.

Mas voltando...No meu exemplo ficou uma sobra de 20px e a coluna nova que inserí à esquerda, ficou colada na coluna do post:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 850px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
border: 1px solid $bordercolor;
float: left;
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 */
}

#sidebar-wrapper {
width: 220px;
border: 1px solid $bordercolor;
float: right;
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 */
}

#newsidebar-wrapper {
width: 200px;
border: 1px solid $bordercolor;
float: left;
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 */
}

Veja a imagem correspondente (clique para ampliar):

Veja que só inserindo coluna sem determinar margin, a nova coluna e a coluna do post ficaram grudadas. Vamos arrumar isto:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 850px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
border: 1px solid $bordercolor;
margin-left: 7px;
border: 1px solid $bordercolor;
float: left;
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 */
}

#sidebar-wrapper {
width: 210px;
margin-right: 5px;
border: 1px solid $bordercolor;
float: right;
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 */
}

#newsidebar-wrapper {
width: 200px;
margin-left: 5px;
border: 1px solid $bordercolor;
float: left;
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 */
}

Veja o que eu fiz: empurrei as duas colunas laterais a uma distância de 5px das margens e coloquei uma margem de 7px da coluna do post para a esquerda. O que aconteceu? Uma das colunas desceu, por que extrapolei a conta: 5px+5px+7px= 17px. Aí você me diz, mas não era uma folga de 20 px? Era, se eu não estivesse usando bordas. Veja que todas as colunas tem 1px de borda, 1px cada lado=2px e somando as tres colunas=8px a mais na nossa conta. O que eu fiz? Repare que neste ultimo código a sidebar está agora com 210px e não mais com 220px como antes. Ficou assim:

Problema de coluna resolvido e sem massagem... (não resistí )

Agora vamos para o texto. Você vê na imagem que o texto está grudado nas bordas por que os templates do Blogger, principalmente o Mínima, não tem margem nenhuma nas colunas, Então vamos colocar. Primeiro o do post. Encontre este código:

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

A parte em azul está relacionada a data do post, a parte em vermelho ao post em sí e a verde, ao título, antes e depois que se passa o mouse sobre ele.

Em post, vamos apagar a margin que está lá e colocar:
margin: 10px;

Faça o mesmo para a data.

Agora procure este trecho, que se refere as colunas sidebar e newsidebar:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

onde estiver escrito margin, apague os valores e coloque 5px (10px aqui pode estreitar muito a coluna). O resultado até agora é esse:



Bem melhor, né? Mas olha como o título do blog está estreito em proporção ao template novo...Vamos arrumar isto também!

Suba a página (do código do seu template, claro) e encontre este trecho:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Modifique o valor de width para um que corresponda à medida nova do template. No meu exemplo eu coloquei 840px;. Ficou assim:



Bem melhor do que no começo, não?

É isso. Espero ter sido bem claro, por que eu sempre acho muito mais fácil aprender do que ensinar, então, espero que comentem e digam se entenderam ou não. Este é o meu post 101 e estou muito contente que este blogue tenham sobrevivido e conseguido ajudar alguns blogueiros. Estou preparando um outro post com novas dicas. Até lá, abraços!