Rodapé no rodapé - Finalmente
Postado em December 18th, 2007| Algo sobre Bugs do IE, CSS, Tutoriais, Utilitários, Web Standards
Creio que muita gente por aqui já passou por isso, conseguir deixar o rodapé sempre na base do site. Uma tarefa que não parece ser tão difícil, mas que pode dar muita dor de cabeça.
A grande questão é quando o conteúdo da página ultrapassa o tamanho da tela, e é necessária a rolagem, então lá vamos nós apelar para o velho JS.
Recentemente o Nagueva Guilherme postou no site Outrolado, uma solução até então definitiva para o posicionamento do rodapé, (sem o uso de JS). Leia o post completo
Criando um box expansível com CSS e JS
Postado em November 29th, 2007| Algo sobre CSS, Javascript, Tutoriais
Hoje vou mostrar um nesse tutorial, um pequeno truque que muitas vezes quebra um galhão.
Se trata de um box, que exibe apenas uma parte do conteúdo, e quando é clicado, expande mostrando o conteúdo todo. Veja oque vamos fazer Lá vamos nós.
Todo o segredo está no seguinte código
<div class="box_fechado" onClick="javascript: this.className = ( this.className == 'box_aberto' ) ?
'box_fechado' : 'box_aberto';"> </div>
Esse javascript, faz com que a classe aplicada na div mude, de “box_fechado” para “box_aberto”, ou seja, o resto é CSS.
Criaremos duas classes, para os dois estados do box.
div.box_fechado,div.box_aberto{cursor:pointer;}
div.box_fechado{height:18px;overflow:hidden;}
div.box_aberto{overflow:none;}
O overflow:hidden, e o height faz com que o box fique travado em um tamanho definido, e ao clicar, o overflow fica “none” mostrando todo o conteúdo, ja que o height também some.
Isso é só o raciocínio inicial, aproveitando a lógica, pode-se também trabalhar com cores, backgrounds, e outras formatações, é só usar a imaginação.
Até a próxima
Mudando o background-image no hover
Postado em August 25th, 2007| Algo sobre CSS, Geral, Tutoriais
Vamos lá. Retomando o ritmo dos tutoriais que estava um pouco lento, ai vai mais uma dica para a galera que ta começando.
Quando usamos uma imagem como background de um link, e queremos que ela mude no hover, em geral vem a idéia de usar duas imagens, algo do tipo a{background-image:url(imagem1.jpg)} e a:hover{background-image:url(imagem2.jpg)}. Ok,essa maneira não possui nada de errado, mas pode ser melhorada.
Você abre a página, e a imagem inicial é carregada, quando passar o mouse no link, a imagem do hover por ainda não ter sido carregada, não vai aparecer instantaneamente, e vai ficar sem imagem por alguns segundos.
É um tempo que pode parecer insignificante, mas que pode ser evitado com uma alteração simples. Para tal, basta fazer isso usando uma imagem só. Ao invés de usar 2 background-image distintos, usaremos um background-position.
Para facilitar o entendimento, veja a imagem abaixo. Temos um botão com 100 x 40. Para isso precisaremos de um background de 100 x 80, que seriam os 2 backgrounds distintos, mas em uma única imagem, então apenas precisaremos mudar o bg de posição. Vejamos agora o código para essa tarefa.
a{
background:url(bg.jpg) no-repeat;
background-position:0 0;
width:100px;
height:40px;
display:block;
text-indent:-5000px;
}
a:hover{background-position:0 -40px;}
Note que a imagem tem 100×80, mas o botão terá apenas 100×40, fazendo com que só apareca a parte da imagem correspondente. Confira o resultado.
Sobre os Tutoriais
Postado em August 25th, 2007| Algo sobre Geral, Tutoriais
Para aqueles que estavam acostumados com a seção “Extras” no site anterior, onde eu diponibilizava alguns tutoriais, saibam que eles se encontram aqui no blog. Basta acessar a categoria “Tutoriais” para facilitar o acesso.
Breve estarei publicando mais alguns. Até a próxima.
Dicas de CSS
Postado em July 24th, 2007| Algo sobre CSS, Tutoriais, Web Standards
Para muita gente que está començando em sua caminhada rumo ao domínio de CSS, existem certas dificuldades que são quase que uma regra, detalhes como diferenças entre navegadores, versões de navegadores, resolução entre outros.
Segue abaixo, algumas dicas para ajudar no aprendizado, que podem amenizar muitas dores de cabeça. Vamos lá.
1. Trabalhando com margin, padding e border.
Esses 3 itens, costumam dar um pouco de trabalho no início, pelo fato de suas medidas serem somadas ao tamanho do elemento que ele faz parte. Exemplo: Se você estiver trabalhando com um elemento com 100×100px, e adicionar uma borda de 5px, ele passará a ter 110×110px, já que você adicionou 5px de cada lado. Para evitar isso, apenas lembre de sempre que adicionar um desses 3 elementos, considerar sua dimensão.
2.Resetar css
Com essa grande tormenta que nos segue, que é a luta IE x FF, muitos códigos costumam ser renderizados com diferenças gritantes. Algo que da muita diferença, são os tamanhos de paddings e a margins. Para evitar isso, a dica é resetar o css, ou seja, deixar tudo com um tamanho padrão. Segue o código para fazer isso.
*{margin:0;padding:0;}
address,th{font-style:normal;font-weight:normal;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
img,fieldset{border:none;}
ol,ul{list-style:none; font-size:inherit;}
a{text-decoration:none;}
div{position:relative;}
3. Resumindo o código
Uma outra coisa que ajuda, é uma maneira de declarar valores, com o mínimo de código possível. Alguns seletores como background, font, border, possuem várias caracteristicas, que poder ser reduzidas em uma linha só. Veja o exemplo.
div{
background-color:red;
background-image:url(bg.gif);
background-repeat:repeat-x;
background-position:50px 10px;
}
Esse código pode ser substituido por
div{background:red url(bg.jpg) repeat-x 50px 10px;}
4.Trabalhando com Float.
Essa faz parte de 90% das dúvidas que surgem para quem está começando.
Geralmente, o uso de float, deve ser acompanhado de um <br clear/>. Veja a seguir um exemplo de um dos problemas gerados pela falta desse detalhe.
Código sem float: Aqui temos algumas divs para exemplificar, mas tudo sem os floats.
Código com float: Quando colocamos o float, a div que contem o rodapé, fica escondida, pois como as duas colunas que ficam acima estão flutuando, o height delas não é considerado, e por isso não empurra o conteúdo para baixo.
Solução com br clear: Agora o exemplo com o problema resolvido, colocando um <br clear=”all”/> antes da div do rodapé, fazendo com que ele seja “empurrado” para baixo.
Existe uma outra solução mais “webstandards” que meu amigo Fechine costuma utilizar, que é usar um <br/> com o clear dentro do css, segue o exemplo:
<br class=”clear”>
clear {clear:both}
O resultado é o mesmo, porem, mais semanticamente correto.
5. Evite o uso desnecessário de divs:
Muitos elementos usando no html, podem ser formatados com css sem a necessidade de criar uma div para “prende-la”. Por exemplo, em um menu, onde geralmente usamos listas (<ul> </ul>), em alguns casos não precisamos criar uma div para colocar no menu. Podemos simplesmente formatar a ul, e deixa-la com o comportamento de uma div, colocando suas dimensões, background, e posicionamento.
6. Evitar os benditos <br/>:
Isso geralmente acontesse com quem trabalha no modo design dos editores de código, você sai dando “enters “, e vão aparencendo dezenas de <p></p> vazios, e <br/><br/> seguidos.
Para deixar o código mais limpo, e facilitar a formatação, uma dica é colocar um margin-bottom no parágrafo, assim, sempre terá um espaçamento entre parágrafos, evitando o uso desnecessário de <br/>
