Como fazer imagens flutuarem em uma página da internet

Escrito por chad buleen | Traduzido por wanderson david
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer imagens flutuarem em uma página da internet
Aprenda a fazer imagens flutuarem em sua página da internet (3d http image by Mauro Saivezzo from Fotolia.com)

As pessoas, normalmente, fazem as imagens flutuarem em uma página da internet, quando querem que elas sejam notadas, principalmente, em anúncios. Apesar de não ser difícil, é necessário um conhecimento básico de desenvolvimento de rede e codificação. Pode-se fazer uma foto flutuar, tanto com o HTML como com o CSS.

Nível de dificuldade:
Moderadamente desafiante

Outras pessoas estão lendo

Instruções

    Flutuar com o CSS

  1. 1

    Para que a imagem flutue para a esquerda, use o código seguinte: img.floatLeft { float: left; margin: 4px; }

  2. 2

    Ajuste as configurações no código. Por exemplo, se você não deseja uma margem de 4 pixels, mude este número para um número diferente de margem que você desejar.

  3. 3

    Para fazer uma imagem flutuar para a direita, use o código seguinte: img.floatRight { float: right; margin: 4px; }

    Novamente, a margem pode ser alterada como, no passo 2.

    Flutuar com código HTML

  1. 1

    Para flutuar uma imagem à esquerda da página com o HTML, digite o código seguinte, dentro do seu editor de texto: <body> <img src="suafoto.jpg" class="floatLeft"> <p>Este é o texto por onde a imagem flutuará</p>

  2. 2

    Mude o nome do arquivo da imagem, bem como o texto no código HTML. Se a imagem estiver salva no servidor, você pode precisar incluir o caminho cheio da imagem na aba <img src=>. Um exemplo de caminho seria "/imagens/Minhas imagens/Imagensdainternet/suafoto.jpg".

  3. 3

    Para fazer uma imagem flutuar no lado direito da página inclua o seguinte código: <body> <img src="suafoto.jpg" class="floatRight"> <p>Este é o texto por onde a imagem flutuará</p> Você pode notar que a única mudança do código é em "class=" de "floatLeft" para "floatRight".

Dicas & Advertências

  • O código CSS oferece mais flexibilidade. O código em HTML não permite que o usuário mude o tamanho da margem.
  • Lembre-se de testar sua página da internet em "pré-visualização", antes de publicá-la, principalmente, quando você estiver fazendo experiências em diferentes tamanhos de pixel com o código CSS.

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