Como alternar background com jquery

como alternar background com jquery
Neste artigo, um exemplo da utilização desta técnica para mudar o sentido da seta quando clicamos em um elemento e abrimos um bloco de conteúdo. Confira Como alternar background com jquery!

Script: Alternar background com jquery

O que fizemos aqui foi criar uma função para ser chamada quando clicamos em um objeto o qual adicionará uma classe ccs para mostrar a seta para cima ou para baixo. Depois de clicar no objeto, então vai abrir o bloco de conteúdo:

 

Como alinhar conteúdo, coluna esquerda e direita com css

alinhar conteudo-coluna esquerda e direita-passo2-concluidoNeste artigo vou mostrar um truque que aprendi para alinhar conteúdo, coluna esquerda e direita da página. No script o conteúdo vem em primeiro, depois a coluna esquerda e depois a direita. Fiz isso para facilitar o compartilhamento do conteúdo nas redes sociais e o trabalho com alguns programas afiliados como o Google Adsense, por exemplo. No qual interpretam a página assim como aparecem no script e não como na posição visual dos elementos.

Por que no script coloquei o conteúdo em primeiro?

Bem, quando compartilhamos uma página no Facebook ou noutra rede social, o sistema da rede interpreta a página compartilhada assim como ela vem no script. Por isso, prefiro deixar no script o conteúdo da página em primeiro lugar e depois as respectivas colunas, com isso o conteúdo das colunas não vão interferir no conteúdo compartilhado. O mesmo acontece com programas afiliados como o Google Adsense, por exemplo. Mas como fazer para deixar o conteúdo da página centralizada e as colunas na esquerda e na direita? Veja o truque que aprendi no tutorial abaixo:

Tutorial: Como alinhar conteúdo, coluna esquerda e direita com css

Vamos então criar os nossos conteúdos para depois alinharmos com o css.

Na ordem do script os elementos estão assim:

alinhar conteudo-coluna esquerda e direita-passo1

Agora vamos partir para o csss. Fiz o css na própria página, mas o ideal é fazer em um arquivo separado e linka-lo na pagina (exe: <link rel="stylesheet" type="text/css" href="estilo.css">

).

Resultado depois de aplicado o css:

alinhar conteudo-coluna esquerda e direita-passo2-concluido

Entendendo o código

Bem, o que fiz foi bem simples:

  1. Primeiro criei os elementos (conteúdo e as colunas).
  2. Depois, no css, fiz com que o conteúdo flutuasse à esquerda. As colunas vão então tentar ficar à direita do conteúdo;
  3. Depois, fiz a coluna direita flutuar à direita, o que vai determinar a sua posição;
  4. Agora o segredo está na coluna esquerda. Para fazer ela ir para a sua posição correta, utilizei o “position:absolute”. Isso faz com que ela fique na sua posição absoluta, ou seja, no início do elemento onde ela está contida, ignorando a posição dos outros elementos.
  5. Daí agora é só afastar o conteúdo à esquerda para que ele não fique atrás da coluna esquerda. Para isso é só utilizar “margin-left: xxx”, onde o xxx e a largura em pixels da coluna esquerda + uns 10px de espaçamento.
  6. Pronto, feito isso tudo ficou em seus devidos lugares!

Se você ficou alguma dúvida ou você tem algumas outras soluções para esse tipo de trabalho deixe seu comentário abaixo.

Se gostou, clique em curtir e compartilhe!

Como vincular um arquivo css na página html [Iniciantes]

Trabalhar com css, o ideal é criar um arquivo separado (exemplo: estilo.css) e depois vinculá-lo na página html. Isso é feito porque os navegadores criarão um cache deste arquivo e ele não será carregado toda hora em que o usuário visitar a página, fazendo com que o carregamento fique bem mais rápido.

Para vincular o arquivo css na pagina basta inserir a tag <link> na página html entre <head> e </head> assim:

<head>

    <link rel=”stylesheet” type=”text/css” href=”estilo.css”>

</head>

Onde href=”” é o lugar onde você vai colocar o endereço onde está o seu arquivo csss.

Qual quer dúvida ou sugestão deixe nos comentários logo abaixo..