Com o tempo e com a propagação do webstandards essa tag passou a ficar obsoleta. Aconselha-se utlizar a seguinte linha de CSS para textos sem quebras:

.nobr {white-space: nowrap; }

Até a próxima.

Neste post vou mostrar como centralizar uma div (ou qualquer outro elemento). Com dois casos, o primeiro e mais fácil com altura fixa e o segundo sem altura definida (altura depende do conteúdo).

Para elementos com altura fixa, basta usar posicionamento absoluto, definir o top e left com 50% e puxar negativamente a metade da largura/altura. Seu elemento de altura fixa estará centralizado.

Já para elementos sem altura definida você pode usar o display:table, vertical-align: middle, abaixo mostro como ficaria o CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

/*COM ALTURA FIXA*/
.centralizado{
   width: 500px;
   height: 200px;
   top: 50%;
   left: 50%;
   margin-top: -100px;
   margin-left: -250px;
   position: absolute;
}
 
/*SEM ALTURA FIXA*/
html, body {
   width:100%;
   height:100%;
   padding: 0px;
   margin: 0px;
}
 
#table {
   width: 100%;
   height: 100%;
   position: static;
   display: table;
   *overflow: hidden; /* hack para o IE6 e IE7 */
   *position: relative; /* hack para o IE6 e IE7 */
}
 
#cell {
   vertical-align: middle;
   display: table-cell;
   position: static;
   *top: 50%; /* hack para o IE6 e IE7 */
   *position: absolute; /* hack para o IE6 e IE7 */
}
 
#conteudo {
   top: -50%;
   width: 500px;
   margin: auto;
   position: relative;
   border:#F00 dotted 1px;
   padding:10px;
   font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

Para altura fixa basta colocar o elemento dentro da tag body ou dentro de um elemento com position:relative, lembrando que neste caso será centralizado dentro deste elemento pai.

Já o HTML para altura indefinda, seria algo na estrutura div#table > div#cell > div#conteudo > conteúdo…

Caso encontrem algum bug, não funcione em algum navegador, queiram criticar ou elogiar sintam-se livres para comentarem, espero ter ajudado.

Solução para altura indefinida encontrada no site do Rogério Lino
Exemplo

Este site não foi muito difícil, mas um pouco trabalhoso, não fiz apenas o layout do site, mas a logo marca também, trabalhoso por que o clientes pediu bastante alterações, tinha feito duas propostas no início e acabo q o cliente pediu para juntar as duas propostas em uma só, sem problemas… isso é muito fácil.

Quando comecei a desenhara logo marca,  logo pensei nas cores azul e rosa como eu já disse no post que mostei o desenvolvimento da marca. No desenvolvimento do layout quis passar uma boa sensação a pessoa que o navegasse. Tomara que tenha conseguido.

Criação: TúlioÁvalos

Programação: Charliston Maffei

Existem algumas pseudo-classes bem conhecidas, como :hover, :active, :visited e :focus para os estados de um elemento.

Existem as pseudo-classes estruturais que servem para selecionarmos um elemento da estrutura do código. Existem várias, por exemplo:

:first-child – seleciona o primeiro filho de um outro elemento.
:last-child – seleciona o último filho de um elemento.
:root – representa um elemento que é a raiz do documento. No HTML 4, é sempre a tag HTML.
:nth-child() – permite que selecionemos qualquer elemento no meio de um grupo de elementos. Por exemplo, você pode selecionar linhas de uma tabela. Assim, podemos fazer uma tabela zebrada, sem a ajuda de javascript. Há variações dessa pseudo-classe para podermos pegar os elementos de baixo para cima (:nth-last-child) e assim por diante. Testei aqui e isso não funcionou no meu FF3 (mac).
:lang() – seleciona elementos que tem o atributo lang com um valor específico. Veja um exemplo.

Veja mais detalhes e exemplos

• {clear: both;}
• clearfix

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}
 
.clearfix {
   display: inline-block;
}
 
html[xmlns] .clearfix {
   display: block;
}
 
* html .clearfix {
   height: 1%;
}

Demonstração