[Defasado] Alinhamento de imagens

Atualizado dia 02/01/2013 às 18h43.

02/01/2013 → Abra o post Alinhar imagens com CSS que está mais atualizado. Este aqui está defasado, mas continuará no ar para consulta histórica.

Alinhando direto na tag <img>

Para alinhar a imagem em uma das margens, podemos usar align ou style=float, veja:

À esquerda

Usando apenas HTML:

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif' align='left'>

Usando CSS:

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif' style='float:left;'>

À direita

Usando apenas HTML:

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif' align='right'>

Usando CSS:

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif' style='float:right;'>

Centralizando

Para que a imagem fique centralizada, você pode usar a tag <center>:

<center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif'></center>

Alinhando com text-align

Você utiliza div com text-align quando não quer que o texto e/ou outro elemento fique em volta de imagem, como nos casos supracitados.

À esquerda

<div style='text-align:left;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif'></div>

À direita

<div style='text-align:right;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif'></div>

Centralizando

<div style='text-align:center;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif'></div>

Alinhando na folha de estilos

Para poupar código você pode definir o alinhamento de imagens na folha de estilos. Há muitas e muitas formas de fazer isso, mas vou dar um exemplo onde cada posição de imagem que desejo tem sua própria ID.

#meio {text-align:center; margin:auto; display:block; padding:5px;}
#dire {float:right; padding:5px;}
#esqu {float:left; padding:5px;}
]]></b:skin>

<img id='meio' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif" />

<img id='esqu' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif" />

<img id='dire' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif" />

Imagem do post no álbum Gifs Animados

02/01/2013 → Abra o post Alinhar imagens com CSS que está mais atualizado. Este aqui está defasado, mas continuará no ar para consulta histórica.

Blogs que ajudam a blogar

Eu estou tão envolvida com os vários posts que estou escrevendo ao mesmo tempo (são mais de cinco, o que é normal para mim, já que meu cerébro sempre funcionou melhor no modo não-linear) que só agora percebi que o Mestre Blogger me indicou em uma peteca que ele mesmo criou: Blogs que ajudam a blogar.

1. Você deve apontar (linkar) numa postagem em seu blog com o título Blogs que ajudam a blogar os blogs que mais o ajudaram na blogsfera - de 3 (três) a 10 (dez) - e, se possível, colocar uma pequena descrição.
2. A seguir você deve indicar 5 (cinco) ou mais blogs para participarem do meme.
3. Você deve deixar uma referência para o blog que o indicou.

Muitos dos blogs que me ajudaram a blogar no início, há mais de 6,5 anos, nem existem mais, mas vou colocar aqui os que resistem:

1. Blog a La Carter

Em português. Excelentes tutoriais para Blogger.

2. Blogger Buster

Em inglês. Fonte maravilhosa de tutoriais para Blogger.

3. By Marina

Em português. Quem começou na minha época se lembra dos famosos Templates by Marina. Usei vários antes de começar a criar os meus.

4. CSS no Lanche

Em português. Confesso que ainda não consigo entender todos os posts, alguns são muito avançados para minha cabecinha de não-programadora, mas tem muitos tutoriais legais de CSS que iniciantes também conseguem acompanhar.

5. Interney

Em português. Quando comecei, Interney era sinônimo de meta-blog.

6. PurpleMoggy

Em inglês. Apesar de não ser atualizado há mais de 1,5 ano, continua sendo referência por causa dos muitos tutoriais para Blogger, muitos deles usei no Helen Fernanda Ponto Com.

7. Templates para novo Blogger

Em português. Foi o blog que me salvou quando aceitei deixar o template clássico do Blogger.

8. Tiago Dória Weblog

Em português. Comecei a ler o Tiago em 2004 quando ele ainda fazia faculdade de Jornalismo, tinha um blog gratuito no Blogger e no seu perfil se identificava como jornalista e webdesigner, como eu. Até hoje me identifico muito com os posts do Tiago e “quando eu crescer” quero ser uma pro-blogger-jornalista-consultora-de-mídia que nem ele.

9. Tie Dye POA

Em português. Uma das minhas primeiras inspirações quando comecei o blog Sacoleira.

10. Usuário Compulsivo

Em português. Também uso muitos tutoriais e widgets dele. Quem não usa?

Eu indico para darem continuidade à peteca:

1. Elisabeth do Bubuzando na Net!
2. Burity do Digital Vítima
3. Igor Linhares do Lucky Star Downloads
4. Ígor Medeiros
5. Núbia do Meu Canto
6. Pedro do Pedro Cabral Blog
7. Ricardo do Vida Digital - Know-How

Indicaram o HTMHelen como blog que ajuda a blogar:

• in-Antenado
• Mestre Blogger
• Utilidade Pública

Espero continuar ajudando!

Joelma + Maria Clara = Milena

Joelma Mendes + Maria Clara Gueiros = Milena do BBB 9

Tô mentindo?

Programa de Trainees J.Macêdo

Pré-requisitos:

• Graduados e/ou pós-graduados no período de dez/2006 a dez/2008.
• Cursos: Administração, Economia e Engenharias (Alimentos, Elétrica, Mecânica e Produção).

6 erros cometidos em nomes de blogs

Indisponível. E agora?

Erros cometidos em nomes de blogs atrapalham o posicionamento da marca (sim, o nome de seu blog é uma marca) e passam uma imagem negativa, em maior ou menor escala, de:

Novos produtos Monange nas prateleiras

Este post foi transferido para o blog Consultoras de Beleza.

Coloque seu blog no MySpace

Neste post vou mostrar como eu fiz para colocar os últimos posts do meu blog na minha página de perfil do MySpace. Pré-requisitos:

• Ter conta no MySpace.
• Ter blog, microblog, vlog, flog, álbum de fotos ou qualquer outra página pessoal com feed próprio.

Margens e espaçamento interno

Nível: intermediário

Margens (margin) e espaçamento interno (padding) ajudam a manter seu blog bonito e fácil de ler. Em muitos casos é só isso que falta para que a página fique realmente agradável.

Não são raros os blogs todo “espremidinhos” que encontro todo dia, em que o título “disputa” espaço com o texto que “briga” com as imagens. Muito desagradável. Em qualquer design o espaço em branco é muito bem-vindo quando utilizado corretamente. Muitos dos casos de elementos espremidos em blogs e outros sites podem ser resolvidos com margin e padding.

Margin

A margem é o espaço externo. Se minha casa fosse um elemento HTML, a margem dela seria a calçada. Quando um elemento utiliza margens, ele está dizendo a cada um dos demais: Hei, mantenha-se a pelo menos X pixels de mim, ok?

Calçada surrupiada do Panóptico

Texto com margem

Código:

<div style='margin-top:4px; margin-bottom:5px; margin-left:100px; margin-right:7px;'>Neste exemplo de texto, as margens foram definidas na própria tag.<div>

Visualização:

Neste exemplo de texto, as margens foram definidas na própria tag.

Texto e imagem com margem

Código:

<img style='margin:5px; margin-right:100px;' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX6w0ELSvZnT9BqcFSIMx2w2-AxggVkIJvBBiB0RnrqhLC1hR8nbvODytOU73yxNFbLoH5TBicK9TTOSJhWMCDnaAb8tjcj9eVUSYYdcWiYMgdTZFWKGeh0DV_FzvMNUvDEbrDWw0pZTcd/s400/yahoo.jpg" align='right' />Observe que a imagem tem margem de 100px à direita e 5px nos outros três lados, de forma que não atrapalha a visibilidade do texto.

Visualização:

Observe que a imagem tem margem de 100px à direita e 5px nos outros três lados, de forma que não atrapalha a visibilidade do texto.

Padding

Se margin é a calçada, padding é o quintal, o espaço entre o muro (bordas) e o elemento (espaço construído da casa). Vejamos alguns exemplos:

Exemplo sem padding

<div style='border:1px solid black;'>Este é um texto sem padding, observe que as bordas estão encostando no texto e deixando a aparência um tanto quanto desagradável.</div>

Visualização:

Este é um texto sem padding, observe que as bordas estão encostando no texto e deixando a aparência um tanto quanto desagradável.

Exemplo com padding 1

<div style='border:1px solid black; padding:5px;'>Este é um texto com padding, observe que usei a mesma medida dos quatro lados.</div>

Visualização:

Este é um texto com padding, observe que usei a mesma medida dos quatro lados.

Exemplo com padding 2

<div style='border:1px solid black; padding:5px; padding-left:50px; padding-right:10px;'>Este é um texto com padding, observe que usei medidas diferentes dos quatro lados.</div>

Visualização:

Este é um texto com padding, observe que usei medidas diferentes dos quatro lados.

Margin e padding

Exemplo de código:

<div style='text-align:justify; border:1px solid salmon; height:228px; padding:5px;'><img style='margin:5px;' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX6w0ELSvZnT9BqcFSIMx2w2-AxggVkIJvBBiB0RnrqhLC1hR8nbvODytOU73yxNFbLoH5TBicK9TTOSJhWMCDnaAb8tjcj9eVUSYYdcWiYMgdTZFWKGeh0DV_FzvMNUvDEbrDWw0pZTcd/s400/yahoo.jpg" align='right' />Observe que o elemento div tem padding de 5px que é o espaço entre as bordas e o texto e entre as bordas e a imagem, enquanto a imagem tem margin de 5px que é a distância entre ela e o texto.</div>

Como fica:

Observe que o elemento div tem padding de 5px que é o espaço entre as bordas e o texto e entre as bordas e a imagem, enquanto a imagem tem margin de 5px que é a distância entre ela e o texto.

Na folha de estilos

Para mudar as margin e padding de qualquer elemento na folha de estilos é muito simples também. Veja o exemplo:

h2 {padding:5px; margin-top:10px; margin-bottom:5px;}
blockquote {padding:5px; padding-left:50px;}
body {border:0px; margin:0px; padding:5px;}
blockquote #cita {margin-top:5px; margin-bottom:10px; margin-left:25px; margin-right:50px;}
]]></b:skin>

Divirta-se!

Reforma ortográfica

Eu não estou aqui para ensinar, já que ainda estou aprendendo. Sempre que tenho que escrever palavra com hífen, por exemplo, fico em dúvida e tento substituir por algum sinônimo. Pior ainda são as palavras que não tinham hífen e passam a ter. Jornalistas, blogueiros, professores, vestibulandos, concurseiros… todos em estado de nervos com essas mudanças. Imagine então eu, que sou jornalista-blogueira-concurseira? Loucura!

📚 Dois sites imperdíveis para bibliófilos

Divulgue sua estante!

Popularmente, denominamos de bibliófilo aquele que costumar ler com muita frequência.

Wikipédia

Descobri neste fim de semana dois sites em português que leitores assíduos de livros vão curtir muito.

Skoob - partilhe resenhas

Caso você já esteja cadastrado no Goodreads, o Skoob tem a mesma função: partilhar resenhas de livros. Você adiciona os livros que já leu, que está lendo, que pretende ler… A vantagem é que é brasileiro e assim fica mais fácil encontrar outros livros editados no Brasil. A minha estante está no endereço skoob.​com.​br/​perfil/​helenfernanda. Sugiro que olhe os livros que pretendo ler e escolha um para me dar de presente. 😁

Trocando Livros

Bem, se você não me der nenhum um livro de presente, não há problema. Eu já me cadastrei no Trocando Livros. O objetivo do site é só esse mesmo: trocar livros. Para começar, cadastre os livros semi-novos que você quer disponibilizar para outras pessoas lerem. Aguarde até alguém solicitar um de seus livros e mande. Quando você manda um livro ganha crédito para poder solicitar livros de outras pessoas. Legal, né? Esse site eu descobri no Canto da Lu.

Mais dicas de sites em português para bibliófilos serão sempre bem-vindas!