Blue MUIOMUIO

Blogue sobre tecnologia, internet, web design, etc..

8 dicas uteis em CSS

Friday April 04th 2008 Tutoriais

O CSS Globe publicou á uns tempos um artigo com 8 dicas CSS interessantes. No artigo intitulado 8 Premium One Line CSS Tips podem encontrar exemplos de algumas destas linhas em funcionamento.

  • Alinhamento vertical com Line-Height

    line-height:24px;

    Quando se atribuí uma altura (height) fixa a um bloco pode-se usar a propriedade line-height para centrar verticalmente o conteúdo.
    Mais sobre o line-height:
    http://www.w3schools.com/css/pr_dim_line-height.asp
    http://www.maujor.com/tutorial/elinhas.php

  • Impedir que o conteúdo saia fora do layout

    overflow:hidden;

    Este código irá esconder todo o conteúdo que sair fora do layout. Imaginando que temos um DIV com 500px de largura e um link enorme. O texto do link que ultrapassar a largura definida (500px) não irá aparecer.
    Se quiserem que apareça um scroll para que o conteúdo mostre todo e apenas quando o conteúdo ultrapassar as dimensões definidas podem usar o seguinte código:

    overflow:auto;

  • Impedir que o texto se parta

    white-space:nowrap;

    Podem ver um exemplo aqui do que acontece quando se usa o nowrap.

  • Centrar blocos horizontalmente

    margin:0 auto;

    O valor auto funciona para as margens laterais (esquerda e direita). Isto fará com que o bloco fique centrado horizontalmente.

  • Remover borders de links activos

    Quando se clica num link aparece um border á sua volta. Já falei disso aqui e como remover este link. Nada mais simples:

    outline:none;

Sem dúvida, excelentes dicas :cool:

0 Comments / save to del.icio.us 0

Botões Liquidos com CSS & HTML

Sunday March 30th 2008 Tutoriais

Por vezes na construção de sites deparo-me com um problema, não quero criar uma imagem para cada botão que crio e não me apetece ter um botão quadrado completamente plano, por vezes pode mesmo quebrar o design do site.

Código HTML

A tag BUTTON tem uma maior capacidade de personalização que usando input type=submit.
Esta tag foi introduzido com a versão 4.01 do HTML e permite, por exemplo, que sejam adicionadas imagens dentro dele.

Fica aqui algumas referencias úteis:

Sem dúvida que a grande vantagem da TAG BUTTON é a sua capacidade de ter conteúdo e é essa capacidade que vou explorar.

<button><span><em>Texto Botão</em></span></button>

O objectivo com este código é criar um botão que permita ter um comprimento variável adaptando-se ao seu conteúdo de forma a que não seja necessário editar o CSS cada vez que quero criar um novo botão.
(more…)

0 Comments / save to del.icio.us 0

Bugfix para imagens PNG no Internet Explorer

Wednesday March 26th 2008 Tutoriais, Web Design

Em 2006 publiquei um artigo que ensinava como colocar transparência em imagens PNG no Internet Explorer 6.

Há uns tempos atrás dei de caras com uma library em javascript que torna o IE mais de acordo com os standards nomeadamente no que se trata des CSS e transparência em imagens PNG.

Site do Script: http://dean.edwards.name/IE7/

Como instalar

Basta colocarem o seguinte código dentro das tags <HEAD></HEAD>

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

Podem fazer download do ficheiro JavaScript aqui: http://code.google.com/p/ie7-js/downloads/list.

O ficheiro ZIP trás diversos ficheiros:

  • ie7-core.js - É um modulo fundamental. Contem um motor que permite que CSS funcione correctamente.
  • ie7-html4.js - Arranja tags HTML incorrectas.
  • ie7-layout.js - Permite o suporte do box-model do W3C e permite o suporte das propriedades CSS min-width, max-width e min-height.
  • ie7-css2-selectors.js - Permite usar selectores do CSS2.
  • ie7-graphics.js - Permite que o browser suporte transparencia PNG.
  • ie7-fixed.js - Permite o uso da propriedade Fixed no posicionamento de imagens.
  • ie7-standard-p.js - Um compacto de todos os scripts em cima, desta forma basta chamar apenas 1 script.
  • ie7-css3-selectors.js - Permite o suporte de selectores CSS3.
  • ie7-css-strict.js - Todos os selectores CSS são convertidos em classes do IE7.
  • ie7-overflow.js - Permite o uso de overflow:visible.
  • ie7-recalc.js - Permite o uso de document.recalc().
  • ie7-dynamic-attributes.js- Permite o suporte de selectores com atributos dinâmicos.
  • ie7-squish.js - Bug fixes.

Mais informações sobre os ficheiros em:
http://dean.edwards.name/IE7/usage/configure.html

Para que o script saiba quais os ficheiros em que deve actuar devem incluir -trans.png no nome das imagens.

Este script usa a propriedade filter que impede, no IE6, que se consiga posicionar ou repetir uma imagem de fundo PNG, a solução pode passar por criar um div que permite a inclusão da imagem como fundo.

Podem ler mais sobre este script em:
http://trevordavis.net/blog/tutorial/the-ultimate-png-guide/

Site Oficial: IE7-JS

0 Comments / save to del.icio.us 0

Tutorial: Secções Extensíveis

Thursday March 06th 2008 Tutoriais

Neste tutorial irei explicar como criar uma secção extensível com conteúdo. O resultado final pode ser visto aqui.

secção extensível show hide div

Breve descrição

A secção extensível é composta por 2 partes:

  1. O cabeçalho
  2. O conteúdo

(more…)

0 Comments / save to del.icio.us 0

Tempo de carregamento da página

Friday July 27th 2007 Tutoriais

De certeza que já viram por aí muitas páginas que têm no final algo a dizer “Loading time”. Este é um tutorial em PHP e é algo bastante simples de fazer e para quem gosta de ter estatisticas no seu site é uma especie de rebuçado com papel de embrulho brilhante.

Em teoria o que vamos fazer é gravar o tempo no inicio da página, gravar o tempo no final da pagina e calcular o tempo que demorou.

O código seguinte deve ser colocado no inicio da página:

$micro_tempo = explode(” “,microtime());
$micro_tempo = $micro_tempo[0] + $micro_tempo[1];
$tempo_inicial = $micro_tempo;

A função microtime() dá-nos os micro-segundos no inicio da página.
Usando a função explode() “transforma” os micro-segundos num vector. (more…)

3 Comments / save to del.icio.us 0