Muitas das propriedades de posicionamento já foram faladas, mas ainda assim vou dar uma resumida em algumas, e incluir duas, também muito importantes, que são a position e a z-index.
Vou começar revisando as que já foram faladas.
Width: determina a largura de um objeto.
Height: determina a altura de um objeto. Uma derivada dela é a propriedade min-height, que especifica o tamanho mínimo que um objeto deve ter, mas alguns browsers não a respeitam corretamente.
Top, Bottom, Right, Left: Representam, respectivamente, a parte superior, inferior, direita e esquerda de um objeto.
Position: essa propriedade também é muito importante e provoca alguns equívocos. Ela pode receber três valores, que são o fixed, absolute e relative. Vou tentar ser bem claro, mas principalmente os valores absolute e relative são um pouco confusos. Bem, vamos lá!
Position: fixed - esse valor mantém um elemento fixo nas coordenadas definidas e, mesmo que a página seja rolada para baixo ou para cima, o elemento permanecerá imóvel na página. É bastante útil quando se quer “grudar” um logotipo ou uma barra de anúncios. A definição das coordenadas deve ser feita utilizando os elementos Top, Bottom, Right e Left, da seguinte forma:
#barraAnunciantes {
width: 180px;
height: 300px;
border: 2px solid black;
position: fixed;
top: 30px;
right: 30px;
}
Percebam que o valor fixed foi definido para a propriedade Position, e logo abaixo defini sua posição, em pixels, em relação ao início da página, além da distância de sua borda direita.
Position: absolute - o ponto de partida para se entender como esse tipo de posicionamento funciona é saber que, dessa forma, o elemento é removido completamente do fluxo da página, ou seja, os outros elementos deixam de perceber que ele está lá. Na verdade o posicionamento fixo também faz isso, mas esse fato é menos importante lá. Aqui isso é de fundamental importância para a compreensão e utilização do valor absolute. Entendendo e aceitando isso fica fácil perceber que, se o elemento está independente de todos os outros, o único ponto de referência que o navegador pode usar para posicioná-lo é a coordenada 0,0 da página, conforme figura abaixo:
Vejamos isso tudo na prática, com o seguinte exemplo de código:
#bannerSuperior
{
height:200px;
width:100%;
border:1px solid black;
}
#corpo
{
height:400px;
border:1px solid black;
width:100%;
}
#rodape
{
height::50px;
border:1px solid black;
width:100%;
}
#molduraVideo
{
position:absolute;
top:50px;
left:180px;
height:300px;Width:300px;
background-color:#6FC;
}
E no HTML:
<html>
<body>
<div id="bannerSuperior">Banner superior </div>
<br />
<div id="Corpo">Corpo da página
<div id="molduraVideo">
Moldura para vídeo
</div>
</div>
<br />
<div id="rodape">Rodapé </div>
</body>
</html>
Vejam como ela será exibida:
Notem que a div molduraVideo foi exibida com 50 pixels de distância do topo da página e com 180 pixels de espaço para o canto esquerdo, mas sempre tomando como referência o ponto 0,0 da página, ignorando completamente os outros elementos dela. Não foi por acaso que, na montagem do HTML, eu o coloquei dentro da div corpo, para demonstrar essa independência.
Position:relative - esse tipo de posicionamento é mais raro de ser encontrado, até porque ele pode ser simulado usando a propriedade padding, obtendo-se, de forma mais simples, um resultado visual muito parecido. Ainda assim é possível desenvolver montagens muito interessantes, criando efeitos de elementos que extrapolam os limites da página através do valor relative. Bem, ao contrário dos posicionamentos fixo e absoluto, no modo relativo o elemento não deixa de fazer parte do fluxo da página, ou seja, os outros elementos podem vê-lo.
Seu funcionamento é basicamente o seguinte: no momento no navegador montar a página para exibição ele “arrasta” o elemento para a direção definida. Imaginem uma pequena imagem de 40 x 40 pixels. Então para ela criamos o seguinte código:
#imagem
{
position: relative;
left:20px;
}
Com esse código a imagem será exibida a 20 pixels de onde ela realmente está. É como se para o navegador ela passasse a ter 60 pixels de comprimento. Para que fique claro vou aproveitar o código usado na propriedade com valor absolute, apenas alterando este valor para relative, deixando o código dessa forma:
#bannerSuperior
{
height:200px;
width:100%;
border:1px solid black;
}
#corpo
{
height:400px;
border:1px solid black;
width:100%;
}
#rodape
{
height::50px;
border:1px solid black;
width:100%;
}
#molduraVideo
{
position:relative;
top:50px;
left:180px;
height:300px;Width:300px;
background-color:#6FC;
}
Teremos, então, a seguinte página:
Percebam que apenas alterando o valor de absolute para relative nossa moldura já se posicionou bem abaixo de onde estava originalmente. Isso aconteceu porque no posicionamento absolute o ponto de referência é o 0,0 da página, e, como citei, nesse modo ele não faz parte do fluxo de página, portanto não há outra referência possível. No modo relative ele faz parte do fluxo, então a referência deixa de ser a coordenada 0,0 da página e passa a ser o elemento onde o objeto está contido.
Bem, com esse exemplo pode parecer que nossa moldura foi posicionada com 50 pixels de espaço do topo do elemento corpo e com 180 pixels do limite esquerdo desse mesmo elemento, mas na verdade isso não aconteceu. O que de fato está sendo criado pelo navegador é um enxerto do elemento, em 50 pixels para baixo (top:50px) e em 180 pixels para a direita (left:180px), aumentando o seu tamanho original. Ou seja, o espaço que o elemento está ocupando é ilustrado abaixo:
Position:static - Temos também o posicionamento com valor static, mas não vou falar muito dele, pois, na verdade, ele é o posicionamento padrão, ou seja, ele faz parte do fluxo de itens da página, sendo especificado ou não. Abaixo vou utilizar o mesmo exemplo anterior, mas com o valor static, vejam:
Vale ressaltar que eu NÃO removi os valores de top e left. O código CSS continua assim:
#molduraVideo
{
position:static;
top:50px;
left:180px;
height:300px;Width:300px;
background-color:#6FC;
}
O que acontece é que, como eu disse, quando se define o valor da propriedade para static, o fluxo obedecido é o de inserção no código HTML, desprezando-se qualquer outra definição.
Z-Index: essa propriedade é bastante interessante e não dava para não falar dela. Vocês devem ter percebido que é possível sobrepor um elemento em outro. Para isso basta que se defina a mesma posição para eles, mas, se isso acontecer, qual será exibido em primeiro plano? Bem, para resolver isso é que existe o Z-index. Vou criar um exemplo que mostra claramente como isso funciona.
Código CSS:
#bloco1{
background-color: red;
top:0px;
left:0px;
width: 70px;
height: 70px;
position: absolute;
z-index:1;
}
#bloco2{
top:10px;
left:10px;
background-color: blue;
width: 70px
height: 70px;
position: absolute;
z-index:2;
}
#bloco3{
top:20px;
left:20px;
background-color:green;
width: 70px;
height: 70px;
position: absolute;
z-index:3;
}
Código HTML:
<html>
<body>
<div id="bloco1"> </div>
<div id="bloco2"> </div>
<div id="bloco3"> </div>
</body>
</html>
A página exibida é:
Reparem que existe a sobreposição dos elementos, já que no código CSS eu apenas defini um deslocamento de 10 pixels para baixo e para a direita para o azul e o verde. Notem também, no código CSS, que o z-index do vermelho é 1, do azul é 2 e do verde 3. Quanto maior o valor dessa propriedade, mais prioridade na exibição o elemento terá. Vou colocar o maior valor para o elemento azul, deixando-o com z-index:4. Vejam como a página será exibida:
Vejam que agora o elemento azul está em primeiro plano. Se colocarmos um valor de z-index maior para o vermelho, ele será exibido à frente, e os dois outros elementos abaixo dele. Esse é o papel do z-index!
HARDWARE
Entendendo o seu computador
O que há dentro do meu computador?
Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.
-
Gabinetes
-
Placas-Mãe
-
Processadores
-
Memória
-
Fontes
-
Drives Ópticos
-
Discos Rígidos
-
SSD
-
Placas de Som
-
Placas de Vídeo
Você Sabia?
Playstation
O Playstation só nasceu porque uma parceria entre Sony e Nintendo, para desenvolver uma unidade de CD para o Super Nintendo, fracassou. Clique aqui e saiba mais.
Nintendo Wii
Nos primeiros oito dias após o lançamento do console Nintendo Wii foram vendidas 600 mil unidades. Isso equivale a quase um por segundo e estes incríveis números são referentes às vendas apenas nos EUA!
Mario em Donkey Kong
O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.
Máquina de Pascal
A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.
Tetris
Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.
Tomb Raider - O Filme
Considerando todas as adaptações de jogos de videogame para o cinema, a mais bem sucedida foi Lara Croft: Tomb Raider, lançado em 2001 e que faturou 274 milhões de dólares. Ele foi dirigido por Simon West e estrelado pela bela Angelina Jolie.
Ábaco
O ábaco é o dispositivo de cálculo mais antigo construído e conhecido pelo homem. Suas formas mais primitivas datam de 400 a.C. e eles foram encontrados na China e na Babilônia. Para saber mais sobre a história dos computadores, clique aqui.
Galaxy Game
As primeiras máquinas de fliperama do mundo a utilizarem moedas, chamadas de Galaxy Game, custavam mais de 20 mil dólares para serem produzidas. Saiba mais sobre elas aqui.
PC com barulho?
Excesso de barulho dentro do seu gabinete, principalmente logo que você o liga, pode ser sintoma de problemas nas ventoinhas, que podem precisar ser limpas ou trocadas. Entre em contato com um técnico de sua confiança e verifique isso o quanto antes.
Inteligência artificial
O primeiro jogo a fazer uso de uma Inteligência Artificial foi o Mouse in the Maze, criado em 1955, na União Soviética. Você pode saber mais sobre ele clicando aqui.
River Raid
O épico jogo River Raid, do Atari, foi desenhado e boa parte de sua programação foi feita por uma mulher: Carol Shaw, uma excelente programadora e funcionária da Activision em 1982. Saiba mais sobre a história deste incrível jogo, aqui.
Mega Man
A primeira versão do clássico Mega Man, para Nintendo 8 bits, tem seu recorde de pontos estabelecido em 03/11/2006, por David Archey, que cravou 2.396.700 pontos, terminando o jogo.
Space Invaders
O título Space Invaders, lançado em 1980, fez tanto sucesso em todo o mundo que as pessoas compravam o console Atari apenas para poderem jogá-lo em casa. Saiba mais sobre este incrível título clicando aqui.
Final Fantasy
O famoso título Final Fantasy, da Square Enix, tem este nome exatamente porque se tratava da última esperança da empresa, que estava à beira da falência quando o lançou. Clique aqui e conheça detalhes dessa história.
ENIAC
O ENIAC, primeiro computador valvulado do mundo, possuía 17.000 válvulas, 500.000 pontos de solda, 30 toneladas de peso e ocupava uma área de 180 metros quadrados. Clique aqui e conheça mais sobre a história dos computadores.
Mario e seu bigode
O personagem Mario só possui bigode porque quando ele foi criado, em 1981, a resolução de tela dos equipamentos disponíveis não permitia que fosse desenhada uma boca, então os desenvolvedores fizeram o grande bigode para contornar essa limitação tecnológica.