Linha de comando.com - Tecnologia, Informação, Dicas e muito mais. » CSS

JavaScript-CSS: Eventos onBlur e onFocus

Tiago — Mon, 18 Apr 2011 14:20:17 +0000

Este post foi criado em resposta a um email que recebemos.

Como alterar as cores do texto digitado conforme o evento?

O código abaixo é complemento do seguinte post.

<input value="digite aqui" type="text"
 onblur="if(this.value == '') {this.value = 'digite aqui';this.style.color='#000000'}" 
 onfocus="if(this.value == 'digite aqui') {this.value = '';this.style.color='#FF0000'}" 
/>

Explicando:

- Quando o campo receber o foco a cor muda para #FF0000 (vermelho).
- Se o campo estiver em branco, quando perder o foco, aparece novamente o texto e a cor volta a ficar #000000 (preto).

CSS: Configurando cellspacing e cellpadding da tag table

Tiago — Fri, 08 Apr 2011 14:59:12 +0000

Respondendo a perguntas:

Como setar o valor dos atributos cellspacing e cellpadding via CSS.

Segue resposta:

table {
   border-collapse: collapse; 
}
table td,
table th {
   padding: 0;
}

Explicando:

border-collapse: collapse; equivale ao cellspacing
padding: 0; equivale ao cellspadding

CSS: Cursor (incompatibilidade)

Tiago — Tue, 22 Feb 2011 12:24:46 +0000

Internet Explorer, como você complica a vida dos desenvolvedores. É só acompanhar a W3C que vocês vão ser muito bem aceito.

Desculpa pelo desabafo… rs

Campanha atualize o seu browser.

Para algumas versões do Internet Explorer, o valor do cursor igual a pointer não são interpretados, tem que usar cursor igual a hand.

Tendo que pensar nisso na hora de desenvolver um website, acrescente um Conditional Comment em seu código para resolver este problema.

>
>
   .element { cursor: pointer; }
>

Vantagens:
- não utilização de hacks
- permite colocar as instruções em um arquivo separado ~~específico~~
- fácil de dar manutenção
- css válido

Mais exemplos:

Aplicando em um arquivo separado:
Detalhe: O “conditional comment” deve ser escrito, sempre, após os links para os arquivos CSS.

<html>
<head>
   <link rel="stylesheet" href="style.css" type="text/css" media="all" />
   
</head>
<body>
       
</body>
</html>

CSS: Abreviando propriedades (Shorthand)

Tiago — Thu, 23 Dec 2010 20:39:06 +0000

Algumas propriedades CSS podem ser combinadas em propriedades abreviadas.

Estas abreviações foram criadas para tornar mais fácil a escrita e interpretação dos códigos CSS.

Algumas propriedades que permitem abreviação:

background, border, margin, padding, font entre outros.

Exemplos:

p { padding: 4px }

Abreviação para: padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 4px;

p { padding: 2px 5px }
define os valores para: (top/bottom) (left/right)

p { padding: 2px 5px 3px }
define os valores para: (top) (left/right) (bottom)

p { padding: 2px 5px 3px 4px}
define os valores para: (top) (right) (bottom) (left)

obs: A ordem das propriedades seguem o sentido horário (top/right/bottom/left).

Mais exemplos:

–> background
div
{
background-color: yellow;
background-image: url(01.jpg);
background-repeat: no-repeat;
background-position: bottom left ;
}

div
{
background: yellow url(01.jpg) no-repeat bottom left;
}

–> border
p
{
border-top-style:groove;
border-right-style:dotted;
border-bottom-style:dashed;
border-left-style:double;
}

p
{
border-style:groove dotted dashed double
}

–> border
p {
font-style: normal;
font-weight: bold;
font-size: 12px;
font-family: Arial;
}

p
{
font: normal bold 12px Arial
}

CSS: Ordenando corretamente pseudo-class :link

Tiago — Mon, 20 Dec 2010 11:51:58 +0000

Segue a lista de pseudo-class para links:

a:link {}
a:visited {}
a:focus {}
a:hover {}
a:active {}

Segundo especialistas, todos esses pseudo-class devem ser utilizados em seus arquivos css. E ainda completam, que existe uma sequência ideal para inclusão desses pseudos.

:visited deve ser escrito depois de :link
a:link {}
a:visited {}

:focus deve vir antes de :hover e :active deve sempre vir por último.
a:focus {}
a:hover {}
a:active {}

Fica aí a dica e até a próxima.

CSS: Estendendo o topo (top) e rodapé (bottom) do seu site (Completo)

Tiago — Mon, 22 Nov 2010 15:42:41 +0000

No código abaixo, você aprenderá como estender o topo e o rodapé do seu site, através de css.

Incluí também uma div para conteúdos.

>
>
>
body{ font-family:Arial }
.clear{ overflow:hidden;width:100% }
.center{
	text-align:left;
	margin:0px auto;
	position:relative;
	width:980px;
}
.fundoTopo{ background-color:#FF0000 }
.topo{ 
	background-color:#003399;
	height:143px;
	width:980px;
	color:#FFFFFF;
}
#logo{
	width:180px;
	height:141px;
	border:#00CCCC 1px dotted;
	float:left
}
.fundoRodape{ background-color:#3366FF }
.rodape{ 
	background-color:#003399;
	height:43px;
	width:980px;
	color:#FFFFFF;
	text-align:center
}
.fundoConteudo{ background-color:transparent }
.conteudo{ 
	background-color:#003399;
	height:500px;
	width:980px;
	color:#FFFFFF;
	text-align:center
}
#texto{text-align:right}
>
>
 
>
="fundoTopo clear">
   ="center">
      ="topo">
         ="logo">LOGO 180 x 143px>
         ="texto">BEM VINDO AO NOSSO SITE>
      >
   >
>
 
="fundoConteudo clear">
   ="center">
      ="conteudo">
		CONTEÚDO DO SITE
      >
   >
>
 
="fundoRodape clear">
   ="center">
      ="rodape">
         www.linhadecomando.com>
         Todos os direitos reservados.
      >
   >
>
>
>

Detalhe: como exemplo eu coloquei cores hexadecimais (#3366FF) para estender a div; pode ser trocado por imagens.

Até mais!

CSS: Estendendo o topo (top) e rodapé (bottom) do seu site

Tiago — Fri, 08 Oct 2010 17:47:27 +0000

Olá meus caros!

Este post foi criado para responder uma dúvida recebida como comentário aqui no linhadecomando.com.

A dúvida é de como fazer um site, usando toda a dimensão da tela ou seja se adaptar em qualquer monitor; o topo e o rodape fica usando toda a tela.

Vamos a resposta:

>
>
>
body{font-family:Arial}
.fundoTopo {
	background-color:#FF0000;
}
.clear {
	overflow:hidden;
	width:100%;
}
 
.center {
	text-align:left;
	margin:0px auto;
	position:relative;
	width:980px;
}
.topo{ 
	background-color:#003399;
	height:143px;
	width:980px;
	color:#FFFFFF;
}
#logo{
	width:180px;
	height:141px;
	border:#00CCCC 1px dotted;
	float:left
}
#texto{text-align:right}
>
>
 
>
="fundoTopo clear">
   ="center">
      ="topo">
         ="logo">LOGO 180 x 143px>
         ="texto">BEM VINDO AO NOSSO SITE>
      >
   >
>
>
>

Este recurso foi utilizado no desenvolvimento deste website: http://www.mineirinhamoveisrusticos.com.br/

Sistemas: Contar Cliques v1.0

Tiago — Wed, 12 May 2010 00:55:53 +0000

Olá pessoal!

Neste post, você terá acesso a mais um sistema desenvolvido por nós do linhadecomando.com.

É bem simples; a idéia é contar quantos cliques foram dados nos links do seu site.

Desenvolvido usando PHP, HTML, CSS, JQuery e o módulo $.ajax. Usa Mysql para armazenar os dados.

No arquivo disponibilizado para download você encontrará comentários que auxiliarão você no melhor entendimento e o arquivo para criação da base de dados e da tabela.

Alguns detalhes:
- 1º. criar a base de dados
- 2º. alterar as configurações do arquivo config.php, o qual contém as informações para conexão a base de dados.
- 3º. os dados cadastrados no campo “nome” da tabela são obtidos do atributo “name” da tag “a href”, através do jquery; este atributo é o x do sistema.

Espero que gostem!

Não deixem de opinar e qualquer melhoria no sistema nos informe.

Abraço a todos!

CSS: Deixar um div fixo e o outro rolar com a barra

Tiago — Fri, 12 Mar 2010 17:03:00 +0000

Para este post vamos aproveitar os códigos descritos aqui.

Agora vamos criar um outro div, supondo que este conterá todo o conteúdo do site e como vamos ter muito conteúdo, precisaremos utilizar a barra de rolagem.

Quando utilizamos a barra de rolagem, o menu na vertical não acompanha o conteúdo. Então com uma simples modificação isto se tornará possível.

Código:

<style media="screen" type="text/css">
#menu-vertical{
	position:fixed;
	z-index:999; 
	left:0; 
	top:0;
	overflow:hidden;
}
#principal{
	margin:0 auto;
	border:#000000 1px solid;
	width:790px;
	height:1200px
}
</style>
 
<div id="menu-vertical">
   <table cellpadding="0" cellspacing="0">
     <tr><td><a href="index.html">Página Inicial</a></td></tr>
     <tr><td><a href="quem-somos.html">Quem Somos</a></td></tr>
     <tr><td><a href="fotos.html">Fotos</a></td></tr>
     <tr><td><a href="contato.html">Fale Conosco</a></td></tr>
   </table>
</div>
 
<div id="principal"></div>

Explicando:

- A grande jogada está na linha 3, o valor de position mudou de absolute para fixed.
- Na linha 13 nós forçamos um valor alto para height, para ativar a barra de rolagem.

Exemplos de sites:

- Utilizando imagem
hhttp://cursos.brunoavila.com.br/