Menu CSS com imagens ao lado dos links

Neste tutorial vamos fazer um menu css e conhecer duas maneiras de colocar imagens ao lado dos links, uma utilizando "background-image" e outra a tag "img src".

Criando o menu.

Código HTML:

<ul id='menuvert'>
  <li><a href='#;'>Home</a></li>
  <li><a href='#;'>Produtos</a></li>
  <li><a href='#;'>Serviços</a></li>
  <li><a href='#;'>Contato</a></li>
  <li><a href='#;'>Sobre</a></li>
</ul>

Código CSS:

ul#menuvert {
width:150px;
margin:0;
padding:0;
background:#000;
list-style:none;
}
ul#menuvert li a {
border-bottom:1px solid #ccc;
color:#ccc;
font:14px Tahoma, Arial, sans-serif;
text-decoration:none;
display:block;
}
ul#menuvert li a:hover {
border-bottom:1px solid orange;
color:orange;
}

Colocar imagem ao lado dos links - Método 1 - "background-image".

Nosso menu já está pronto, agora vamos colocar uma imagem ao lado dos links acrescentando a parte em negrito ao código.

ul#menuvert li a {
padding:5px 0 2px 20px;
background-image: url('endereço da imagem');
background-repeat:no-repeat;
background-position:left center;
border-bottom:1px solid #ccc;
color:#ccc;
font:14px Tahoma, Arial, sans-serif;
text-decoration:none;
display:block;
}

Versão abreviada:

ul#menuvert li a {
padding:5px 0 2px 20px;
background: url('endereço da imagem') no-repeat left center;
border-bottom:1px solid #ccc;
color:#ccc;
font:14px Tahoma, Arial, sans-serif;
text-decoration:none;
display:block;
}

Com o padding definimos um espaço acima e abaixo dos links de 5 e 2px respectivamente. A esquerda definimos 20px que será onde nossa imagem ficará.
Nas propriedades de background declaramos:
background-image(endereço da imagem);
background-repeat(no-repeat para a imagem não se repetir);
background-position(colocamos nossa imagem a esquerda e alinhada no centro);

Colocar imagem ao lado dos links - Método 2 - tag "img src".

Nesse segundo método colocamos a imagem no html e não no css. Para isso acrescentamos o seguinte código em negrito dentro da tag <a href='#;'></a>.

<ul id='menuvert'>
   <li><a href='#;'><img src='endereço da imagem' />Home</a></li>
   <li><a href='#;'><img src='endereço da imagem' />Produtos</a></li>
   <li><a href='#;'><img src='endereço da imagem' />Serviços</a></li>
   <li><a href='#;'><img src='endereço da imagem' />Contato</a></li>
   <li><a href='#;'><img src='endereço da imagem' />Sobre</a></li>
</ul>

Note que com esse método podemos colocar imagens diferentes para cada link.

No css vamos declarar uma pequena distância a direita da imagem para separá-la do texto e alinhá-la verticalmente ao centro:

ul#menuvert li a img {
padding-right:5px;
vertical-align:middle;
}

Fonte do ícone.

Para terminar seguem dois sites onde podemos encontrar ícones para personalizar nosso menu:

• Iconspedia
• Iconseeker

Continuar lendo ... "Menu CSS com imagens ao lado dos links"

Ajustar a largura do blog - Blogger

Antes de alterarmos as dimensões do blogger vamos conhecer como ele é estruturado e quanto de espaço vamos reservar para cada parte do layout.

»Estrutura básica do blogger.

Baseado no modelo Minima teremos a seguinte estrutura:
(Clique para ampliar / Abre em outra janela)

Legenda:

outer-wrapper: Bloco principal que engloba todo conteúdo do blog. Dentro dele estão as demais partes citadas abaixo;

header-wrapper: Aqui fica o cabeçalho(título) da página;

main-wrapper: Aqui ficam as postagens e os comentários;

sidebar-wrapper: Aqui fica a barra lateral;
Créditos: 10calco.blogspot.com
footer-wrapper: E aqui fica o rodapé da página.

»Alterando os valores.

Para começar acessamos Design > Editar HTML > e localizamos o seguinte trecho:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
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: $endSide;
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 */
}Créditos: 10calco.blogspot.com

Como já sabemos o que cada parte faz, para mudarmos sua largura basta alterarmos o valor width de cada seletor para os valores desejados.
Lembrando que o valor do main e da sidebar juntos não devem ultrapassar o valor do outer-wrapper.

»Exemplo

Vamos deixar nosso blog compatível com resoluções de 1024px de largura para cima.

#outer-wrapper {
width: 980px;
margin:0 auto;
...
}

#main-wrapper {
width: 650px;
float: left;
margin-right:10px;
...
}

#sidebar-wrapper {
width: 320px;
float: right;
...
}

Somando o valor do main-wrapper, mais a margin-right com o valor da sidebar obtemos o valor do outer-wrapper.

Podemos ainda alterar a largura do cabeçalho com a seguinte parte do código:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
} /* Créditos: 10calco.blogspot.com */

Nota: Nem todos os templates apresentam os mesmos nomes e valores.
Baseado nas dicas passadas aqui cabe a você identificar cada parte e configurá-la como desejar.


»Não esqueça de testar seu blog em várias resoluções após definir novos valores.

Continuar lendo ... "Ajustar a largura do blog - Blogger"

Teste seu blog em várias resoluções

De acordo com as estatísticas da w3schools e do w3counter, a maioria dos usuários utilizam resoluções de 1024x768 ou superior. Enquanto o velho 800x600, que já foi muito usado a tempos atrás vem caíndo consideravelmente, sendo utilizado atualmente por cerca de 2% do total de usuários.Créditos: 10calco.blogspot.com

Qual a resolução mínima que seu blog ou site suporta?

Se você nunca se preocupou com isso é uma boa hora para começar. Já imaginou entrar em um blog com o menu pela metade e a sidebar jogada abaixo das postagens? Aqui no 10calço me aconteceu mais ou menos isso, resolvi ver como o blog estava sendo apresentado em outras resoluções e para minha surpresa em 1024x728 a sidebar ficava colada no rodapé.

Veja seu site em várias resoluções.

Foi usando o Viewlike.us que descobri o problema com a sidebar. Através dele podemos ver nosso site em 7 diferentes resoluções, desde 800x600 até 1920x1200!, sem contar a resolução para iPhone e Wii Browser.

Nota: Digite a url que quiser verificar sem o http://.
Créditos: 10calco.blogspot.com
Outro serviço no mesmo estilo é o Simures. Com a diferença que nele digitamos a largura e altura que queremos avaliar.


E ai, já sabe como seu blog se comporta em outras resoluções? Será que a sua sidebar não anda "fugindo"?

Continuar lendo ... "Teste seu blog em várias resoluções"

Redimensionar imagem no IE com CSS e HTML

Devido ao internet explorer não aceitar grande parte das propriedades CSS (como o background-size), vamos precisar fazer um macete para redimensionarmos imagens nele.

Tutorial testado no IE 6, Firefox 3.6, Chrome 9 e Ópera 11.

Imagem por: Marjan Krebelj

Caso queira redimensionar imagens usando CSS (background-size) acesse:

• redimensionar imagens com CSS3.

Para começar vamos fazer uma div que conterá a imagem a ser redimensionada:

Créditos: 10calco.blogspot.com
<div id='test'>
 <ul>
  <li>
  Texto Texto Texto Texto Texto Texto
  </li>
 </ul>
</div>

Após a tag UL vamos acrescentar a imagem e vamos definir uma classe para ela através do seguinte código em negrito:

<div id='test'>
 <ul><img class='bg' src='plano_de_fundo.jpg'/>
  <li>
  Texto Texto Texto Texto Texto Texto
  </li>
 </ul>
</div>

No CSS vamos definir o tamanho da div e aplicar z-index igual a 1 ao LI:

#test {
width:500px;
height:100px;
}

#test ul li {
z-index:1;
}

Por último vamos colocar a imagem por trás do texto com z-index igual a -1, definir posição absoluta e deixar a imagem do mesmo tamanho da div:

#test img.bg {
z-index:-1;
position:absolute;
width:500px;
height:100px;/* Créditos: 10calco.blogspot.com */
}

-Nota: Se o tamanho da imagem estiver em porcentagem ela só ficará correta no IE.
[Editado: 08/04/2011] Para resolver esse problema veja: Imagem auto ajustável com CSS.[/Editado]

Conhece algum outro macete ou algum aprimoramento para este? Então poste nos comentários ou entre em contato

Continuar lendo ... "Redimensionar imagem no IE com CSS e HTML"

Table e Tableless, quais as diferenças?

Não é raro encontrarmos layouts formulados em tabelas, ou ainda layouts que misturam table e tableless. Mas afinal, qual a diferença e quando usar cada um?

Vamos a uma breve explicação sobre essas duas técnicas:

Table/tabelas.

Técnica criada para apresentar dados tabulares, que passou a ser usada na estruturação de layouts.

•Código básico de uma tabela:

Créditos: 10calco.blogspot.com

<table>
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td>Célula 3</td>
    <td>Célula 4</td>
  </tr>
</table>

•E como seria visto no navegador:

Célula 1	Célula 2
Célula 3	Célula 4

Com a evolução do HTML e a individualidade dos browsers em interpretar os códigos, foram necessárias algumas mudanças na forma de estruturar layouts.

Tableless/"sem tabelas".

Consiste em dar maior semântica ao uso das tags HTML na construção de layouts. Uma das características do tableless é o fato de trabalhar com a linguagem de marcação (ex: HTML) separada da linguagem de estilo (CSS), o que permite maior controle e facilidade na hora de fazer alterações nos códigos.

•Código básico em tableless:

<div id='menu'>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

•E como seria visto no navegador:

• Item 1
• Item 2

Créditos: 10calco.blogspot.com

»Conclusão.

Table já foi a principal ferramenta para criação de layouts, e ainda é muito defendida e utilizada por parte dos usuários. Porém após a criação do Web standards, juntamente com o Tableless e o CSS podemos criar layouts com maior acessibilidade, semântica e facilidade na sua manutenção.
Isso não quer dizer fim ao table, ou condenar sua utilização, mas sim fazer uso racional dessas técnicas, utilizando cada uma para seu devido fim.

Para finalizar deixo aqui um link muito interessante do blog Revolução Etc, de Henrique C. Pereira sobre Introdução a Semântica.

Continuar lendo ... "Table e Tableless, quais as diferenças?"