Publicado por: Paulo Fernandes | 2/set/2008

Google Chrome – O Navegador do Google

Opa!

Galera aqui vai uma postagem bem rápida para dizer que o novo navegador está disponível para download.

Agora é a vez do google entrar no mundo dos navegadores.

Google Chrome

Segue link para download Google Chrome.

Até a próxima galera

Abraço

Publicado por: Paulo Fernandes | 25/ago/2008

Validando DOCTYPE STRICT usando target na TAG A

Olá galera

Estou dando uma passada rápida por aqui apenas para mostrar como podemos validar um documento usando o DOCTYPE STRICT e colocando a na TAG A o atributo target.

Se você tentar validar um documento neste formato aqui!

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Validando DOCTYPE STRICT usando target na TAG A – by aprendacss.wordpress.com</title>
</head>
<body>
<a href=”https://aprendacss.wordpress.com” target=”blank”>AprendaCSS</a> – 2008
</body>
</html>

Aparecerá esta mensagem para você.

Porém se adicionar está clausúla “[ <!ATTLIST a target CDATA #IMPLIED> ]” no final do seu DOCTYPE, dessa forma aqui:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” [ <!ATTLIST a target CDATA #IMPLIED> ]>

Pronto o seu problema está resolvido. O código final fica assim:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” [ <!ATTLIST a target CDATA #IMPLIED> ]>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Validando DOCTYPE STRICT usando target na TAG A – by aprendacss.wordpress.com</title>
</head>
<body>
<p>
<a href=”https://aprendacss.wordpress.com” target=”blank”>AprendaCSS</a> – 2008
</p>
</body>
</html>

Apenas para lembrar que o DOCTYPE Transitional aceita normalmente este atributo na TAG A. Este artigo é só para informar que existem formas de validar o target usando o DOCTYPE STRICT.

Referência: http://krijnhoetmer.nl/stuff/html/strict-doctype-target/

Bom galera é isso e até mais.

Publicado por: Paulo Fernandes | 12/ago/2008

Z-Index

Olá galera.

Como prometido, hoje explicarei o poder da propriedade z-index.

Geralmente ouvimos as pessoas falar sobre eixo X e eixo Y, que seriam respectivamente as linhas Horizontais e Verticais. O Z-index é o que define a Profundidade, seria o eixo Z.

Imagine em um edificio. Se fossemos definir o eixo X, Y e Z, teriamos:

  • X=> Quantidade de metros da fachada;
  • Z=> Quantidade de metros da porta ao fundo;
  • Y=> Quantidade de apartamentos, altura;

Bom, se nossa área fosse construção, teriamos entendido, mas como é programação, talvez tenha ficado um pouco vaga essa idéia. Mas se pararmos para pensar um pouco e pegarmos o artigo anterior onde faço referência ao Position Absolute, talvez fique mais claro. Vamos analizar o segundo print daquele artigo, o que temos está abaixo, tanto o código quanto o print.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Z-index by aprendacss.wordpress.com</title>
<style type=”text/css”>

#posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
position: absolute;
}

#posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
position: absolute;
}

#posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
position: absolute;
}

</style>
</head>
<body>
<div id=”posiciona1″></div>
<div id=”posiciona2″></div>
<div id=”posiciona3″></div>
</body>
</html>

Position Absolute, um elemento sobre o outro

Notamos que os elementos estão sobre-postos, mas porque só aparece o azul, que no caso é o último.

Aparece só o azul, porque a ordem natural do empilhamento(z-index), é a seguinte, o primeiro elemento do código recebe o z-index=1[ no caso a div com ID posiciona1 ], e o próximo elemento recebe z-index=2[ no caso a div com ID posiciona2 ] e assim por diante, esta é a ordem natural do empilhamento, e por esse motivo que aparece somente o azul sobre os outros. Abaixo definirei as posições dos elementos para que eles se sobreponham, porém na ordem natural.

#posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
position: absolute;
top:0;
}

#posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
position: absolute;
top:25px;
}

#posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
position: absolute;
top:50px;
}

Empilhamento Natural

Empilhamento Natural

Alterando o posicionamentoAlterando o posicionamento

Como podem observar apenas adicionei a propriedade top, você pode adicionar a outras propriedades como left, right e bottom.

Agora irei alterar a propriedade z-index para deixar o segundo elemento [ o box verde ] na frente dos outros e aproveito para finalizar o artigo colocando todo o código do exemplo HTML+CSS.

Até o próximo pessoal.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Z-index by aprendacss.wordpress.com</title>
<style type=”text/css”>

#posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
position: absolute;
top:40px;

}

#posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
position: absolute;
top:65px;
z-index:4;
}

#posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
position: absolute;
top:100px;
}

</style>
</head>
<body>
<div id=”posiciona1″></div>
<div id=”posiciona2″></div>
<div id=”posiciona3″></div>
</body>
</html>

Alterando a ordem de empilhamento dos Objetos

Alterando a Ordem de Empilhamento dos Objetos

Publicado por: Paulo Fernandes | 8/jul/2008

Position Absolute

Olá galera!

Hoje explicarei um pouco sobre o poder do position absolute. Com esta propriedade do CSS, você consegue colocar o elemento em qualquer lugar da tela, basta apenas configurar opcionalmente as propriedades top, left, right, bottom.

Apenas uma observação sobre o position absolute, top, left, right e bottom.

  • Position Absolute coloca o elemento fixo na página, cuidado com o seu uso.
  • As propriedades top, left, right e bottom, sempre devem ser usadas com o position.

Bom chega de conversa e vamos ao código descobrir do que ele é capaz!

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Position Absolute by aprendacss.wordpress.com</title>
<style type=”text/css”>

#posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
}

#posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
}

#posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
}

</style>
</head>
<body>
<div id=”posiciona1″></div>
<div id=”posiciona2″></div>
<div id=”posiciona3″></div>
</body>
</html>

Olha como deve ter ficado:

Sem position absolute

Agora se definirmos position: absolute neles, vamos ver o que acontece?

#posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
position: absolute;
}

#posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
position: absolute;
}

#posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
position: absolute;
}

Position Absolute Definido

Nossa só está aparecendo o último. Porque será?

Isso acontece devido a ordem de empilhamento do elementos, no próximo artigo, falarei sobre o empilhamento e a propriedade z-index. Mas agora vamos voltar ao position absolute. Lembra que acima alertei sobre o uso do position absolute, agora vocês viram o que acontece.

Vamos definir a propriedade top para as divs, posiciona2 e posiciona3, definiremos valores diferentes para notar o que acontecerá com o elemento, e para aproveitar tempo, definiremos a propriedade left para a div posiciona1.

#posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
position: absolute;
left: 150px;
}

#posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
position: absolute;
top: 0;
}

#posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
position: absolute;
top: 90px;
}

Posicionado Absolutamente com top e left Definidos

Pronto pessoal! Neste artigo apresentei o poder do position: absolute e das propriedades top e left;

No próximo artigo falarei sobre a propriedade z-index, e utilizarei o mesmo exemplo de código para ficar bem claro poder dessa combinação.

Até o próximo.

Publicado por: Paulo Fernandes | 28/jun/2008

Centralizar Layout na Horizontal e na Vertical

Olá a Todos.

Bom galera neste artigo ensinarei a centralizar um layout na vertical e na horizontal independente da resolução, para isso precisamos saber exatamente duas coisas.

  1. Tamanho do layout na Vertical [ height ];
  2. Tamanho do layout na Horizontal [ width ];

Explicarei o conceito depois coloco o código e se achar necessário coloco mais algum comentário no final do artigo. Bem vamos aos conceitos.

Para alinhar na horizontal já expliquei, veja este artigo Centralizando na Horizontal, mas para este alinhamento aqui muda um pouco o conceito. Nossa como eu enrolei, colocarei os passos para eu não me perder!

  1. Definir uma largura e uma altura [ width / height ];
  2. Posicionar o elemento absolutamente [ position ];
  3. Definir onde o elemento deve ficar em relação ao topo e a esquerda [ top / left ];
  4. Definir as margens do topo e da esquerda [ margin-top / margin-left ];

Bom agora que definimos o que fazer, vamos ao código xHTML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Centralizando Layout na Vertical e na Horizontal by aprendacss.wordpress.com</title>
<style type=”text/css”>

#tudo {
width: 500px;
height: 500px;
background-color: #00F;
}

</style>
</head>
<body>
<div id=”tudo”>

</div>
</body>
</html>

Layout no Canto Esquerdo

Pronto desta forma já criei a div#tudo porém ela está posicionada na esquerda, agora vamos incrementar o código aos poucos, para ver o que acontece! Primeiro incremento, posicionar absolutamente, nada acontecerá, então vamos colocar mais alguns elementos, e seguindo nossa orderm agora vem os posicionamentos referente a topo (top) e esquerda (left).

#tudo {
width: 500px;
height: 500px;
position: absolute;
top:50%;
left:50%;
background-color: #00F;
}

Layout Com Top e Left Definidos

Nossa o que aconteceu aqui!? :/

Calma vamos entender. position: absolute; “coloca” o elemento onde mandarmos e para onde nós mandamos ele? Cuidado com a resposta. 😉 Bem nós mandamos ele ficar à 50% do topo e à 50% da esquerda, e é exatamente a onde ele está tente redimensionar a janela e verá para onde ele irá. [ ele não pode mudar muita coisa não, tem que ficar a 50% do topo e da esquerda de acordo com o tamanho da janela que você deixou ]

Bom agora que ele está a 50% do topo e da esquerda, vamos alinhá-lo utilizando as margens.

#tudo {
width: 500px;
height: 500px;
position: absolute;
top:50%;
left:50%;
margin-top: -250px;
margin-left: -250px;
background-color: #00F;
}

Layout Centralizado na Vertical e na Horizontal

Nossa ele ficou bem no meio, que legal! Vamos entender o porque de definir margem negativa!

Quando definimos uma margem queremos que ela exatamente tenha um espaço de um lugar, se definirmos um valor negativo, ela fará justamente o contrário, ela se aproximará mais do local.

Ok! Entendi, mas porque -250px? Bem se você está se perguntando isso, responderei para você, mas farei você pensar junto comigo. Está disposto a isso? Então vamos lá!

Defini o tamanho do meu layout sendo um quadrado de 500px de largura por 500px de altura, isso é óbvio pois é um quadrado e quadrado tem que ter os lados iguais, mas vamos continuar com o artigo, após isso defini que ele deveria ficar há 50% do topo e 50% da esquerda, mesmo que você não tenha prestado muita atenção, deve ter notado que o tamanho do quadrado está em pixel e o posicionamento em porcentagem. Bom já que a margem negativa aproxima ao invés de afastar se eu defini-la com pixels, eu estou aproximando ela do topo e da esquerda, por isso que ela fica bem no meio.

Ah! Agora eu entendi! Pelo menos eu acho!? Como eu faria se fosse um layout com 700px de largura por 400px de altura ?

Simples, essa margin-left deve ser o valor do width: dividido por 2, e a margin-top deve ser o valor do height dividido por 2. LEMBRANDO QUE SEMPRE NEGATIVOS.

Para ver o resultado acima, altera o código da div#tudo para esse:

#tudo {
width: 700px;
height: 400px;
position: absolute;
top:50%;
left:50%;
margin-top: -200px;
margin-left: -350px;
background-color: #F00;
}

Layout Centralizado na Vertical com Novo Tamanho

Bom é isso ai pessoal!

Se ainda tiverem dúvidas, não se acanhem, podem postar a vontade.

Até o próximo.

Publicado por: Paulo Fernandes | 25/jun/2008

Centralizando Layout na Horizontal

Olá Galera.

Neste artigo ensinarei a centralizar um layout na horizontal. Agora há única coisa a dizer é que a div que englobar o layout deve explicitamente ter um tamanho definido [ width ]. Bom agora vamos ao código xHTML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Centralizando Layout na Horizontal by aprendacss.wordpress.com</title>
<style type=”text/css”>

#tudo {
height: 500px;
width: 500px;
background-color: #00F;
}

</style>
</head>
<body>
<div id=”tudo”>

</div>
</body>
</html>

Layout no Canto

Agora se adicionarmos as propriedades as propriedades margin: 0 auto. A div#tudo estará centralizada, porém somente nos navegadores FF, Opera, Safari. Para centralizar no IE precisamos alinhar a tag body ao centro, usando: text-align: center; e depois para voltar ao normal alinhar a div#tudo à esquerda, usando: text-align: left;. O código CSS ficará da seguinte forma.

#tudo {
width: 500px;
height: 500px;
margin: 0 auto;
text-align: left;
background-color: #00F;
}

Layout no Centro

Pronto! O layout está centralizado. Lembre-se que caso deseje pode usar as técnicas CSS Reset Layout de Duas Colunas.

Até o próximo.

Publicado por: Paulo Fernandes | 24/jun/2008

CSS Reset

Olá a todos.

Hoje falarei sobre um seletor muito legal, este seletor é o * [ asterisco ]

Muitos sabem que em informática, quando desejamos informar que algo pode ter muitas coisas informamos pelo * [ asterisco ]. Em CSS não é tão diferente assim. Quando utilizamos o * estamos nos referindo a qualquer seletor, seja um ID, uma Classe, uma Tag, qualquer coisa.

Vantagens:

Você consegue definir a mesma configuração para todos os elementos da página, como por exemplo cor, dessa forma, você não mais precisa se preocupar com as cores dos outros elementos, você já sabe que todas serão definidas usando a herança do *. Caso deseja mudar a cor da fonte, fica muito tranquilo, pois basta alterar somente no elemento que você deseja.

Desvantagens:

Quando definimos por exemplo margens, todos os elementos pegam as margens, eles perdem as margens que são definidas por DEFAULT ao elemento. Veja o Exemplo abaixo com se sem CSS. As listas tem um espaçamentos de margem e padding. Este espaçamento é definido pelo estilo do navegador, e caso você utilize o CSS Reset, você substitui essas propriedades.

Vamos ao código que é o que interessa, até facilitará o entendimento, primeiramente, farei o código xHTML e depois o CSS.

xHTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>CSS Reset by aprendacss.wordpress.com</title>
<style type=”text/css”>

</style>
</head>
<body>
<ul>
<li>Lista 1</li>
<li>Lista 2</li>
<li>Lista 3</li>
<li>Lista 4</li>
</ul>
</body>
</html>

CSS


* {
margin: 0;
padding: 0;
color: #00F;
}


Sem CSS Reset

Sem Usar o CSS Reset

Usando o CSS Reset

Utilizando a Técnica do CSS Reset

Pronto! Notaram a diferença em usar e não usar o CSS Reset.

Até o próximo artigo.

Publicado por: Paulo Fernandes | 23/jun/2008

Layout Duas Colunas

Olá.
Este é meu primeiro POST e gostaria de dizer que espero muito que este seja o primeiro de muitos. Também vou dizer que não sou muito de ficar escrevendo, gosto de ir na prática.

Se surgir alguma dúvida, postem que assim que possível, respondo.

Vamos ao artigo, que é o que interessa!

Construção do Layout

  1. Topo da página com o nome do site e uma imagem de logo a esquerda;
  2. O site terá uma barra lateral com links que ficará do lado esquerdo;
  3. O site terá uma área à direita onde ficaram o conteúdo dos links;
  4. O site terá um rodapé para informar os direitos autorais do site.

OBS: Não estou me preocupando com cores ou com imagens apenas em posicionamento dos elementos.

Agora que já definimos o que precisamos daremos inicio ao trabalho, e o nosso primeiro passo é a construção do código xHTML. Neste momento criaremos a estrutura do código e mais para frente farei aos poucos as edições nas partes corretas e no final do artigo o arquivo completo.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Layout de Duas Colunas by aprendacss.wordpress.com</title>
<style type=”text/css”></style>
</head>
<body>
<div id=”tudo”>
<div id=”topo”></div>
<div id=”menu”></div>
<div id=”conteudo”></div>
<div id=”rodape”></div>
</div>
</body>
</html>

Agora que já temos o arquivo básico vamos construir o CSS que o posicionará onde queremos, para identificação dos elementos utilizarei cores, conforme segue legenda abaixo:

  • Topo: Verde;
  • Menu: Azul;
  • Conteudo: Vermelho;
  • Rodapé: Amarelo;

O código do CSS deve ser inserido dentro da Tag style

#tudo {
width: 788px;
}
#topo {
height: 150px;
background-color: #006400;
}
#menu {
float: left;
width: 168px;
height: 400px;
background-color: #0000FF;
}
#conteudo {
float: right;
width: 600px;
height: 400px;
background-color: #FF0000;
}
#rodape {
height: 40px;
background-color: #FFFF00;
}

Pronto! Temos um layout de duas colunas.

Agora explicarei o que foi utilizado neste código para obter o efeito desejado.

Na div menu utilizei o float: left;. Utilizar a propriedade float significa remover o elemento do fluxo do documento e inseri-lo após o ultimo elemento sem flutuação. Float: left diz para remover o elemento do fluxo do documento e posiciona-lo a esquerda. Já na div conteudo utilizei o float: right;, ele faz a mesma coisa porém diz para o elemento se flutuar a direita.

Muito legal, mas se copiarem e colarem o código, notarão que o rodapé está em lugar errado. De fato para ele ficar no lugar dele precisamos acrescentar no rodapé a propriedade clear: both;. Esta propriedade diz para o elemento rodape, no caso, se posicionar após o último elemento flutuante, independente da flutuação ter sido do lado esquerdo(left) ou do lado direito(right). O rodapé irá se posicionar no fim do documento.

Tinha me esquecido de um detalhe! Vocês notaram que existem um espaço em branco entre o menu e o conteúdo? Bom este espaço é deixado devido ao modelo caixa ser diferente entre os navegadores. Mais para frente farei um POST sobre o modelo caixa.

Agora sim acabou, abaixo segue o código completo do código.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Layout de Duas Colunas by aprendacss.wordpress.com</title>
<style type=”text/css”>
#tudo {
width: 788px;
}
#topo {
height: 150px;
background-color: #006400;
}
#menu {
float: left;
width: 168px;
height: 400px;
background-color: #0000FF;
}
#conteudo {
float: right;
width: 600px;
height: 400px;
background-color: #FF0000;
}
#rodape {
clear: both;
height: 40px;

background-color: #FFFF00;
}
</style>
</head>
<body>
<div id=”tudo”>
<div id=”topo”></div>
<div id=”menu”></div>
<div id=”conteudo”></div>
<div id=”rodape”></div>
</div>
</body>
</html>

« Newer Posts

Categorias

%d blogueiros gostam disto: