jugifs: Alinhando as Colunas e Texto

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 está acontecendo é que vejo muito blog onde uma coluna foi adicionada, mas ela acaba ficando grudada na coluna do post. Então vou ensinar a alinharem, não só a coluna, como os textos.

Vou usar, novamente, o Template Mínima (do Blogger), como exemplo.

/* 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: 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 é preciso 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

Inserindo a coluna, não esqueça de posiciona-la (float) e tenha 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.

No meu exemplo ficou uma sobra de 20px e a nova coluna 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:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Apague os valores em margin e coloque:
margin: 10px;

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

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
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 margin, apague os valores e coloque 5px. 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!

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;.