Soluções de desenvolvimento com webstandards

Desabilitar link do menu na página corrente

noreply@blogger.com (Leidiane Oliveira) — Mon, 17 May 2010 15:40:00 +0000

Fazer menu com on mouse hover, usando css todo mundo já sabe. Mas uma coisa que sempre me incomodou foi o fato de o link da pagina ativa continuar disponivel para se clicar.
Encontrei uma solução para isso.

Vou descrever aqui somente como desabilitar o link, sem ter que alterar nada no código. O menu em css posso postar dps se alguem interessar

Exemplo de estrutura:
<ul>
       <li class="home"><a href="home.html">Home</a></li>
       <li class="sobre"><a href="sobre.html">Sobre</a></li>
       <li class="clientes"><a href="clientes.html">Clientes</a></li>
       <li class="contato"><a href="contato.html">Contato</a></li>
</ul>

É extremamente simples, basta setar alguns valores, no link da página ativa.
Exemplo para o link de Clientes ficar desalibitado

.clientes a{
pointer-events: none;
cursor: default;}

Testado no Firefox 3.6, Chrome 4.1, Safari 3, Ie7 e Ie8
Fonte: Css-Tricks

PS.: Esse css precisa ser chamado somente na pagina ativa, ou seja, nesse caso de exemplo, somente quando se entrar na página de clientes.

Por questões de organização eu sempre crio um css para formatação geral, que é comum a todas as páginas(geral.css), e um css para cada página (clientes.css, home.css, etc...)
Sendo assim esse código css ficaria na pagina de clientes, que é chamada somente quando entra na página.
Há outra maneira usando id no body. Depois crio um post só falando disso.

Margin duplicada no IE6

noreply@blogger.com (Leidiane Oliveira) — Wed, 12 May 2010 18:25:00 +0000

Problema recorrente no IE6.

Vcocê define uma margem no valor X, e quando vai conferir no Ie6 está bem maior do que nos demais navegadores. Se você medir, vai ver que o Ie6 duplicou o valor do margin.

Descobri que isso acontece sempre que se coloca o margin para o mesmo lado do float.
Ex.:

{ float : left;

  margin-left: 15px}

Os navegadores normais irão manter a margem de 15px e o Ie6 irá aplicar 30px.

Para resvolver isso é só aplicar display:inline no elemento. Vai ficar assim:

{ float : left;

  margin-left: 15px;

  display: inline}

Agora minha dúvida é, e se eu ja tiver usando outro tipo de display no meu elemento? o.O
Vou pesquisar e posto aqui.

Mas a dúvida inicial fica resolvida. E assim que achar a resposta, edito aqui

Alguém tem mais alguma solução a não ser essa?

Html e body com 100%

noreply@blogger.com (Leidiane Oliveira) — Tue, 11 May 2010 15:20:00 +0000

Precisei colocar dois background em uma página, uma para o topo do site e outro para o rodapé.
Para isso basta colocar background no Html e outro no body, mas os dois precisavam estar com 100%, para que o background do rodapé, esteja realmente lá embaixo.
Eu estava inserindo a codificação css:

html, body {heigth:100%}

Mas não estava funcionando, eu colocava um cor de fundo e via que o html estava terminando no meio da do conteudo. Sei lá porque ( se alguém souber me fale).

Solução encontrada:
Nas tentativas e erros, o que funcionou foi o seguinte código:
html {height: 100%;}
body {min-height: 100%;}
E pronto. Ficou tudo lindo e funcionando corretamente :-)

Padding-top no input

noreply@blogger.com (Leidiane Oliveira) — Tue, 11 May 2010 15:09:00 +0000

Hoje encontrei uma diferença entre a exibição do padding-top no inputs nos navaegadores Firefox e IE.
Coloquei um input somente com formatação de background e altura e fonte.

input{

    height:30px;
    background:url(../images/pesqTopo.png) no-repeat;
    font:normal 12px Arial, Helvetica, sans-serif;}

E ele foi exibido assim nos navegadores.

O firefox já exibe com o texto centralizado na vertical. Já o internet explorer faz o que deveria ser correto, exibe o texto colado lá em cima, pq não tem padding.

Ao inserir o padding-top para alinhar o texto no IE, acontece o que já era previsto. O texto alinha no ie, e cai no Firefox.

input{

      padding-top:10px;

    height:30px;
    background:url(../images/pesqTopo.png) no-repeat;
    font:normal 12px Arial, Helvetica, sans-serif;}

Vejam como fica:

Eu ainda não consegui entender ou saber o porque, já que eu reseto os valores de padding e margin no inicio do css /*{padding:0; margin:0} /

Solução encontrada: Retirar a altura do input.

input{

       padding-top:10px;

    background:url(../images/pesqTopo.png) no-repeat;

font:normal 12px Arial, Helvetica, sans-serif;}

Funciona, todos os dois passam a ser exibidos iguais, mas como estão sem altura, corta o background na parte inferior.

Para resolver isso basta colocar também padding-bottom no input.

input{

    padding:10px 0 5px 0;
    background:url(../images/pesqTopo.png) no-repeat;
    font:normal 12px Arial, Helvetica, sans-serif;}

E fica tudo igual, lindo e resolvido! :-)