Como fazer painéis suspensos com "divs" sobrepostas usando o CSS

Escrito por jim campbell | Traduzido por vinícius albuquerque
  • Compartilhar
  • Tweetar
  • Compartilhar
  • E-mail

O CSS permite sobrepor "divs", de modo que se crie uma imagem de duas separadas. Isso significa que é possível cortar imagens em arquivos menores para reduzir o carregamento no servidor, o que faz com que as páginas carreguem mais rápido no navegador do usuário. As classes do CSS fornecem uma maneira de criar menus, direções visuais e cabeçalhos de site com suas imagens.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Clique com o botão direito no arquivo HTML que contém as "divs" que você quer editar. Clique em "Abrir com" e clique no editor de HTML que desejar usar.

  2. 2

    Crie as classes do CSS. Neste exemplo, duas "divs" sobrepostas serão usadas e cada "div" contém uma imagem. O código a seguir define as propriedades de sobreposição da "div":

    <script type="text/css"> div.imagemesquerda{float:left;} div.imagemdireita{float:right;} div.imagemesquerda_largura{width:200px;} div.imagemdireita_largura{width:300px;} div.sobreposta{position:relative;left:20px} </script>

  3. 3

    Configure as "divs" que se sobreporão. O código HTML a seguir cria duas tags "<div>" que serão usadas como painéis sobrepostos:

    <div class="imagemesquerda imagemesquerda_largura sobreposta"><img src="primeiraimagem.gif" ></div> <div class="imagemdireita imagemdireita_largura"><img src="segundaimagem.gif" ></div>

    Substitua no código o nome das imagens pelo das suas próprias imagens de painel.

  4. 4

    Salve o arquivo e abra a página HTML no seu navegador. Analise o resultado. Se desejar mover a imagem para a esquerda ou para a direita, será necessário editar as configurações da classe no CSS. Geralmente, é necessário testar algumas vezes antes de descobrir as configurações ideais em pixeis para as suas "divs".

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível