Modifique a ordem de posicionamento de elementos com CSS ‘z-index’.

Para tratar a ordem de posicionamento de um ou mais elementos que estejam se  sobrepondo em seu layout, uma das possibilidades é utilizar o z-indez no seu css.

Basta incluir a ordem em quem o elemento “x”irá ocupar: para a frente (1, 2, 3… depende do número de elementos a serem sobrepostos), no css do elemento que você quer posicionar:


#menu{

position:absolute;
z-index: 1;
}

Outras sintaxes aplicadas ao z-index:
auto: posiciona o elemento seguindo o padrão do elemento-pai.

number: diz a ordem de posicionamento do elemento. Números positivos e negativos.

inicial: volta a posição ao valor inicial.

inherit: herda a posição do elemento-pai.

=> z-index só irá funcionar em elementos que estiverem com posição definida: (position:absolute / position:relative / position:fixed).

aa_Page_0(3)

Como dar espaço entre letras e palavras com CSS

Para dar espaço entre palavras utilizando css, um meio simples é utilizar o seguinte código:

word-spacing: 5px /* pode variar o tamanho conforme necessidade */

Agora veja um exemplo na prática: sem o word-spacing, as palavras no meu menu ficam juntas. Com word-spacing eu consigo um espancamento ideal para que não fique bagunçado e amontoado, sem precisar encher meu HTML de códigos desnecessários.

OBS: a mesma condição se aplica para espaçamento entre letras, basta colocar:

letter-spacing:2px;

Canvas

Já ouviu falar em Canvas? Claro, como aqui é um blog de TI, me refiro a uma técnica de programação que, resumidamente, significa contruir imagens no cliente através de um código, que pode ser incorporado em diversas linguagens, inclusive em HTML 5.

Em vez de criar uma imagem no PS , Flash ou no Corel, hospedar e publicar no site, o Canvas nos permite construir a img desejada na hora em que o cliente carrega a página, sem demora e transtornos, como é o caso de muitos sites  que utilizam Flash e se tornam um pesadelo para carregar (sim, porque ainda hoje existem pessoas que acessam  internet discada no interior ou não possuem uma máquina potente e compatível com as tecnologias mais modernas. Believe me, it does exist!!).

Minha intenção aqui não passar um tutorial de Canvas (quem sabe em um próximo post?), mas dar uma noção da existência dessa técnica.

Um exemplo que posso passar é o site http://glimr.rubyforge.org/cake/canvas.html#ImageDataFill

Lá, você  pode ver o exemplo na parte de cima, abaixo há o código fonte onde você pode modificar e testar, e ao lado você pode experimentar vários efeitos , clicando no combobox Effect. Há muito o que pesquisar sobre  assunto pela internet, e mais para frente eu trago mais informações a repeito!

➡ Sabe onde Canvas é muito utilizado? No desenvolvimento de games!!

Função para mostrar/esconder elementos com Javascript.

Hoje vou mostrar uma funçãozinha simples, que pode vir a ser útil para o desenvolvimento WEB.
O que ela faz? Há um checkbox na página, que ao ser selecionado exibe elementos até então ocultos (no nosso caso,os que se encontram na div “experiencia”.

 JAVASCRIPT:
function exibe(id) {  
   if(document.getElementById(id).style.display==”none”) {  
        document.getElementById(id).style.display = “inline”;  
    }    
    else {  
        document.getElementById(id).style.display = “none”;  
    }     
}
No HTML: (mais…)

Validação de campos em branco com javascript

//validação de campos em branco com com javascript//

<script type=”text/javascript”>
function verificar(form){
with (form) {
if ( empresa.value ==””)
{
alert(“É necessário informar a empresa.”);
empresa.focus();
return false;

}
}
}
</script>

<body>
<form action=”#” method=”post” onsubmit=”return verificar(this)”>
<input type=”text” id=”empresa” />
.
.
.

</body>
//  empresa é o id do meu componente, onde o usuário deveria informar o nome da empresa em que trabalhou.
Eu posso criar essa obrigatoriedade no banco, mas não é o caso.

Link no onChange de um list/menu

➡ Problema: o redirecionamento dos links do list/menu não funciona de acordo com a opção selecionada!

➡ Solução: Um pequeno script em javascript pode resolver isso rapidinho!

➡ O select deve estar dentro de um form!

O Código javascript é este:

function go ()

{

box=document.forms[0].navigation;

destination=box.options[box.selectedIndex].value;

if (destination) location.href=destination;

}

e no HTML, fica assim:

<select name=”navigation” onChange=”go()”>

<option value=”#”>Texto</option>

</select>