Scroll Top

Aprenda tudo que você precisa para criar o seu negócio na internet.  São 30 vídeos aulas totalmente gratuitas. Basta se cadastrar em um de nossos formulário.

Tutoriais

Box flutuante

box flutuante

Box flutuante é um elemento que pode ser ‘flutuado’ à esquerda ou à direita com uso da propriedade float. Isto significa que o box flutuante  e seu conteúdo são deslocados para a direita ou para a esquerda do documento (ou do bloco container) (ver postagem sobre Box model). A figura a seguir ilustra o princípio de float:

Crie um site com muito mais facilidade.

 

 

 

 

 

 

box flutuante

Se desejamos que um texto seja posicionado em volta ou do lado de uma figura, basta flutuarmos a imagem usando o código abaixo:

<div id=”picture”>
<img src=”bandeiradobrasil.jpg” alt=”Bandeira do Brasil”>
</div>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,
xxxxxxxxxxxxxxxxxxxxxxxxx…</p>

 

Para conseguir o efeito proposto, basta definir uma largura para o box que o contém e declarar para ele float: left, para criarmos este box flutuante vamos precisar de um editor de texto, eu recomendo o Notepad+ + e você deve salvar os arquivos dentro da mesma pasta, que for indicar pelo seu servidor local.

Digite o código abaixo no editor de código e depois salve o arquivo como estilo.css dentro da pasta indicada pelo seu servidor local.

Obs. Salve a imagem que você usará neste exemplo dentro da mesma pasta em que você salvar os arquivos.

#picture{ /* id de estilo css no código HTML */
float: left; /* comando float flutuante */
width: 300px; /* largura da caixa da imagem*/
height: 200px; /* altura da caixa da imagem*/
border: 1px solid black; /* borda em volta da imagem */
}

h2{    /* estilo para o parágrafo h2 */
text-align: left; /* alinhar testo encostado à margem esquerda */
margin-top: 10px; /* alinhar texto a 10 pixel da margem superior */
margin-right: 100px; /* alinha o texto 100 pixel da margem direita */

 

Agora vamos para o código do box flutuante em HTML.

Este código deve ser salvo como index.html dentro da pasta indicada pelo seu servidor local:

Os textos em verde são apenas comentários, não surtem efeitos na renderização do código.

<html>
<head>
<title>Meu Primeiro Estudo de CSS</title> /* título da página */
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/> /* link para chamar o arquivo estilo.css salvo logo acima*/
<style type=”text/css”>
</head>
<body>
<div id=”picture”> /* id usada no arquivo estilo.css para realizar o float*/
<img src=”coloque aqui o link da sua imagem” alt=”Criar Negócios Online”></img> /* link da imagem usada para o float */

/* a imagem acima deve ser salva em uma pasta como o nome de imagem, dentro da mesma pasta usada para os arquivos estilo.css e index.html */
</div>  /* texto fictício para o float */
<h2>textotextotextotextotextotextotextotextotextotextotextotextotexto,
textotextotextotextotextotextotextotextotextotextotextotextotexto,
textotextotyextotextotextotextotexotextotextotextotextotextotexto,
textotextotextotextotextotextotextotextotextotextotextotextotexto,
textotextotextotextotextotextotextotextotextotextotextotextotexto,
textotextotyextotextotextotextotexotextotextotextotextotextotexto,
textotextotextotextotextotextotextotextotextotextotextotextotexto,
textotextotextotextotextotextotextotextotextotextotextotextotexto,
textotextotyextotextotextotextotexotextotextotextotextotextotexto,
textotextotextotextotextotextotextotextotextotextextotextotexto…</h2>
</body>
</html>

 

Agora visualize box flutuante do código acima clicando o botão abaixo, você pode abrir o código em seu navegador e resultado deve ser semelhante:

 

visualizar

 

 

Box flutuante em  colunas:

O box flutuante ou Floats tambem podem ser usados para criar colunas em um documento. Para criar as colunas estruturamos as colunas no código HTML usando uma <div> como mostrado a seguir:

Digite o código abaixo em seu editor e salve como index.html, os textos de verde são apenas comentários:

<html>
<head>
<title>Meu Primeiro Estudo de CSS</title> /* título da página */
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/> /* link para chamar o arquivo estilo.css */
</head>
<body>
<div id=”column1″> /* id coluna 1 */
<h3>textotextotextotextotextotextotextotextotexto…</h3> /* texto simbólico coluna 1 */
</div>
<div id=”column2″> /* id coluna 2 */
<h3>textotextotextotextotextotextotextotextotexto…</h3> /* texto simbólico coluna 2 */
</div>
<div id=”column3″> /* id coluna 3 */
<h3>textotextotextotextotextotextotextotextotexto…</h3> /* texto simbólico coluna 3 */
</div>
</body>
</html>

A seguir definimos a largura de cada coluna, como por exemplo 33%, e declaramos float: left (junto da margem esquerda); para cada uma das colunas:

Digite o código abaixo e salve como arquivo estilo.css na mesma pasta indicada pelo seu servidor local.

#column1 {  /* id coluna 1 */
float:left;  /* float flutuante a esquerda */
width: 33%; /* distancia da margem */
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}

O float pode ser declarado left (esquerda), right (direita) ou none (nenhuma das posições).

Ao abrir os arquivo index em seu navegador, o box flutuante deve mostrar um resultado igual ao que será mostrado ao clicar no botão de visualizar logo abaixo:

 

visualizar

 

 

A propriedade clear no box flutuante.

A propriedade clear é usada para controlar o comportamento dos elementos do box flutuante que se seguem aos elementos floats no documento.

Por padrão, o elemento subsequente a um float, ocupa o espaço livre ao lado do elemento flutuado. Veja no exemplo acima que o texto deslocou-se automaticamente para o lado da imagem.

A propriedade clear pode assumir os valores left, right, both ou none. A regra geral é: se clear, for por exemplo definido o both para um box, a margem superior deste box será posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele no código <div id=”picture”>

Digite o código abaixo e salve no arquivo index.html:

<html>
<head>
<title>Meu Primeiro Estudo de CSS</title> /* título da página*/
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/> /* link para chamar o arquivo estilo.css*/
</head>
<body>
<div id=”picture”> /* id da imagem */
<img src=”coloque aqui o link da sua imagem” alt=”Criar Negócios Online”> /* link da imagem */
</div>
<h2 class=”floatstop”>textotextotextotextotextotextotextotextotextotexto…</h2> /* comando floatstop e texto fictício*/
</body>
</html>

Para evitar que o texto se posicione no espaço livre à frente da imagem,  basta adicionar a seguinte regra CSS no arquivo estilo.css salvo na mesma pasta:

#picture{  /* id da imagem */
float: left;
width: 300px;
height: 200px;
border: 1px solid black;
}

.floatstop{  /* classe do floarstop que coloca o texto abaixo da imagem e encostado na mesma */
clear: both;
}

h2{ /* estilo do texto */ 
text-align: left;
margin-top: 10px;
margin-right: 100px;

 

Agora visualize com o botão abaixo e confira com o resultado que você teve ao abrir o arquivo em seu navegador:

visualizar

 

Eu sei que é um pouco difícil esta parte da CSS, caso você tenha entendido ou não, deixe o seu comentário para podermos avaliar o nosso trabalho ou se preciso melhorar a forma que estamos trabalhando.

 

voltar

avançar

Está Gostando do Artigo?

Se inscreva em nossa lista e receba 30 vídeos aulas grátis, ensinando como criar o seu negócio na internet a partir do zero.

| Website

Sou blogueiro por que gosto de ler e escrever. Criei este blog para te ajudar a criar o seu negócio na internet e ter um novo estilo de vida.

  • Nice blog right here! Also your site a lot up fast! What web host are you the usage of? Can I get your associate hyperlink on your host? I want my website loaded up as fast as yours lol

    Traduzido com Google Tradutor

    Bom blog aqui! Também o seu site muito rápido! O host é o uso de? Posso pegar seu link associado em seu host? Eu quero o meu site carregado tão rápido quanto seu lol

  • paul

    ola

    to querendo fazer um box caixa flutuante, nao sei se é o nome correto.

    semelhante site waz.com.br

    onde ao passar mouse aparece descrição do produto.

    sabe como fazer, ajudar ??

    grato

    • Obrigado pela visita.
      Eu não sei como fazer, mas vou pesquisar e criar um tutorial ensinando, é muito interessante. Mas pelo que pude perceber, deve ser algum plugin, parece que o site foi desenvolvido no WordPress.
      Desculpe por não poder ajudar.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
error: Este conteúdo está protegido ! Se precisar de alguma coisa envie mensagem pelo formulário de contato.