kadunew.com/blog

Posicionamento relativo:

Ao declararmos position:relative sozinha não causa nenhum efeito no posicionamento. Se usarmos ela em conjunto com as propriedades top, right, bottom e left, movimenta o bloco de sua posição inicial para uma posição conforme declarado nas propriedades citadas.
O bloco sai de sua posição original e o espaço que ela ocupava é preservado.
Veja o exemplo:
CSS

div#dois {
	background: #009900;
	position: relative;
	left: 60px;
	top: 35px;
	}

Continuar lendo…

Um documento (X)HTML para seguir em conformidade com os padrões Web, tem uma marcação mínima que deve ser seguida. Essa estrutura é dividida em três partes. Sempre que for começar um novo documento deve ter essa marcação.

As três partes da estrutura são:

• Definição do tipo de documento (DOCTYPE ou DTD)
• Seção head
• Seção body

Continuar lendo…

O efeito de destacar linhas de uma tabela consiste em alterar a formatação da linha que recebe o foco. Destacando ela das demais. Dessa forma o visitante do site consegue se localizar mais fácil na tabela, sem ter que passar o dedo na tela para ler as informações de uma linha da tabela.
Nesse primeiro exemplo vamos criar um script que destaque a linha que recebe o foco do mouse.
Para criar esse efeito vamos utilizar o método hover (sobre, fora). Esse método executa duas funções, a primeira quando o mouse passa sobre o seletor e a outra quando o mouse sai de cima do seletor.
Continuar lendo…

Segundo as recomendações da W3C esses elementos estão em desuso, ou como a WC3 gosta de chamar “Deprecated”. Por isso devemos evitar seu uso.
O principio das Web Standards preconiza a separação da apresentação e marcação. Esses elementos são de apresentação por isso estão desatualizadas, em desuso, obsoletas…
Veja a tabela abaixo os elementos em desuso e sua descrição.
Continuar lendo…

Para um bom entendimento da renderização dos elementos HTML é necessário o entendimento de elementos níveis de bloco, inline e os invisíveis. Conhecendo bem esses conceitos, evitamos o uso inadequado de elementos HTML e marcação adicional.

Elementos níveis de bloco

Elementos nível de bloco ocupam toda largura disponível na página e criam uma linha invisível antes e depois de si próprio. Elementos nível de bloco sempre começam em nova linha. Um elemento que venha antes ou depois de um elemento nível de bloco é renderizado acima ou abaixo do elemento nível de bloco, nunca ao lado.
Elementos nível de bloco podem conter elementos inline e outros elementos nível de bloco.
Exemplos de tags nível de bloco:

address, blockquote, center, dir, div, dl, dt, dd, frameset, fieldset, form,
h1, h2, h3, h4, h5, h6, hr, menu, noframes, noscript, ol, ul, li, p, pre, table,
tbody, thead, tfoot, tr, td, th

Continuar lendo…

Pesquisando na net sobre otimização de sites, encontrei um site muito útil. Ele mostra seu site, sem CSS (folhas de estilo em cascata)… O resultado mostra tags importantes como H1, H2 etc.
Uma boa dica para ver se sua marcação está adequada.
Basta digitar o endereço do seu site.
Link: http://www.rmt.com.br/raiox/

Em particular esse título se refere ao Internet Explorer 6 que ainda tem uma grande participação no mercado dos navegadores. O grande problema desse navegador é a falta de segurança e a má renderização das páginas.
Desenvolvedores estão cansados de bugs e utilização de hackes para esse navegador.
Por isso temos várias campanhas na Internet para remover definitivamente esse software do mercado.
Recebi uma nova campanha, que tem como objetivo eliminar esses navegadores mais antigos, campanha com iniciativa do imasters. Como achei essa campanha muito interessante resolvi divulgar aqui no blog.
Veja o e-mail completo:
Continuar lendo

O efeito sanfona é muito utilizado para estruturar conteúdos em vários tópicos. O usuário visualiza apenas o tópico que foi clicado.
Na realização desse efeito vamos utilizar a biblioteca jQuery e um plugin chamado de accordion.

Como instalar o plugin Accordion

Primeiro devemos baixar o plugin no link http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
Continuar lendo…

Para quem usa o navegador Opera deve saber que uma das últimas inovações foi a Speed Dial. Agora ela está presente também no FIrefox. Com ela você pode escolher vários sites e reuni-los em uma página do seu firefox. Para acessar, basta dar um clique na miniatura. Simples não ?!
Além do mais a Speed Dial vem com várias opções para você personalizar a extensão de acordo com seu gosto.

• Escolher o tamanho das miniaturas
• Criar grupos
• Definir a Speed Dial como sua página inicial
• Exportar / Importar suas configurações

Speed Dial

Chamamos de efeito zebra o ato de alternarmos as cores de plano de fundo das linhas de uma tabela. A estilização consiste em estilizar as linhas pares de uma cor e as impares de outra cor. A principal vantagem além de alterar o visual da tabela, é facilitar a compreensão e a leitura da mesma.
Conseguimos esse efeito facilmente com as folhas de estilos em cascata (CSS). Para isso basta atribuir uma classe nas linhas pares (ou impares) e estilizar a classe conforme sua necessidade. Uma grande desvantagem é fazer isso em tabelas grandes.
Continuar lendo…