Início
#1
Espaço Entre Colunas Qui Dez 15, 2011 2:37 pm
BrunoSouza
Designer
Espaço Entre As Colunas
Uma grande dificuldade que vejo entre os
blogueiros é acertar a distancia entre as colunas e a postagem do
blog, ou seja, às vezes os menus ficam encostados um no outro ou muito
distante, isso acontece tanto em relação às colunas como os posts do
blog afinal todos são colunas. Para corrigir esse problema é só
colocar padding-left ou padding -right no código da coluna que deseja
dar um espaço.
Fazer essa correção pode parecer um pouco confusa, pois existem
muitos modos de fazer a mesma coisa e, além disso, as variações de
lado também podem confundir na hora de alterar os códigos, então vamos
primeiro localizar o que vamos alterar. Vamos usar o exemplo da
coluna das postagens estar encostada na coluna do lado esquerdo, você
pode entrar na pagina editar HTML e procurar por:
#main {width: 490px;color:#000000;float: left;line-height: 140%;padding-left:5px;….
E colocar padding -left:15px, se já tiver algo assim no seu blog
apenas altere o valor (não repita o mesmo código duas vezes) isso fará
surgir um espaço de 15 pixels entre a coluna das postagens e o menu
do lado esquerdo, note que aumentamos o espaço ocupado pela coluna
(mais 10 pix.) então isso pode fazer que uma das colunas do seu blog vá
parar no final da pagina por falta de espaço então normalmente quando
fazemos esse tipo de alteração devemos reduzir a largura da coluna que
em nosso exemplo é 490 isso está logo no inicio, assim manteremos a
mesma largura total que a coluna ocupava. Note como funciona a coluna
tinha 490 de largura mais 5 de margem, ou seja, 495, se aumentarmos a
margem para 15 vamos diminuir a largura da coluna para 480 assim
continuaremos ocupando 495.
O mesmo que fizemos com a coluna main(postagem) poderia ser feito
com qualquer uma das colunas do blog. Para saber qual lado deve
colocar a margem veja o float que está no código, geralmente a margem
deve ser do mesmo lado. Outro detalhe é que dependendo do seu template
usar padding pode atrapalhar no layout (dependendo das imagens e
cores de fundo) então o mesmo que fizemos com padding poderia ser
feito com margin, assim margin-left:15px; e tudo funciona do mesmo
jeito apenas trocamos o código. Apesar de funcionar do mesmo padding e
margin não são exatamente a mesma coisa você pode ver aqui a
diferença entre usar padding ou margin, outra dica relacionada com
esse tema é como alterar as larguras do blog.
Outra coisa que não poderíamos deixar de falar é que é muito bom
visualizar seu blog em vários navegadores (pelo menos Internet
Explorer e Firefox), pois é possível haver uma variação na aparência
do seu blog entre eles.
Creditos tutorail: Criando Portais
blogueiros é acertar a distancia entre as colunas e a postagem do
blog, ou seja, às vezes os menus ficam encostados um no outro ou muito
distante, isso acontece tanto em relação às colunas como os posts do
blog afinal todos são colunas. Para corrigir esse problema é só
colocar padding-left ou padding -right no código da coluna que deseja
dar um espaço.
Fazer essa correção pode parecer um pouco confusa, pois existem
muitos modos de fazer a mesma coisa e, além disso, as variações de
lado também podem confundir na hora de alterar os códigos, então vamos
primeiro localizar o que vamos alterar. Vamos usar o exemplo da
coluna das postagens estar encostada na coluna do lado esquerdo, você
pode entrar na pagina editar HTML e procurar por:
#main {width: 490px;color:#000000;float: left;line-height: 140%;padding-left:5px;….
E colocar padding -left:15px, se já tiver algo assim no seu blog
apenas altere o valor (não repita o mesmo código duas vezes) isso fará
surgir um espaço de 15 pixels entre a coluna das postagens e o menu
do lado esquerdo, note que aumentamos o espaço ocupado pela coluna
(mais 10 pix.) então isso pode fazer que uma das colunas do seu blog vá
parar no final da pagina por falta de espaço então normalmente quando
fazemos esse tipo de alteração devemos reduzir a largura da coluna que
em nosso exemplo é 490 isso está logo no inicio, assim manteremos a
mesma largura total que a coluna ocupava. Note como funciona a coluna
tinha 490 de largura mais 5 de margem, ou seja, 495, se aumentarmos a
margem para 15 vamos diminuir a largura da coluna para 480 assim
continuaremos ocupando 495.
O mesmo que fizemos com a coluna main(postagem) poderia ser feito
com qualquer uma das colunas do blog. Para saber qual lado deve
colocar a margem veja o float que está no código, geralmente a margem
deve ser do mesmo lado. Outro detalhe é que dependendo do seu template
usar padding pode atrapalhar no layout (dependendo das imagens e
cores de fundo) então o mesmo que fizemos com padding poderia ser
feito com margin, assim margin-left:15px; e tudo funciona do mesmo
jeito apenas trocamos o código. Apesar de funcionar do mesmo padding e
margin não são exatamente a mesma coisa você pode ver aqui a
diferença entre usar padding ou margin, outra dica relacionada com
esse tema é como alterar as larguras do blog.
Outra coisa que não poderíamos deixar de falar é que é muito bom
visualizar seu blog em vários navegadores (pelo menos Internet
Explorer e Firefox), pois é possível haver uma variação na aparência
do seu blog entre eles.
Creditos tutorail: Criando Portais
