Curso de CSS – Overflow ( Aula 11)

hoje será a última aula do  curso com vídeos aulas sobre CSS, o objetivo dessas aulas eram ensinar o básico e ter uma noção de com usar códigos CSS em uma página HTML. Todos os vídeos são de autoria do Professor Fernando N. Conzzolino que está disponível no site Becck.com totalmente gratuito, por isso que utilizarei para complementar as aulas.

Índice: Css básico

• Curso de CSS – Introdução ( Aula 1)
• Curso de CSS – Div e Span ( Aula 2)
• Curso de CSS – Classes e Id ( Aula 3)
• Curso de CSS – Background ( Aula 4)
• Curso de CSS – Font/color ( Aula 5)
• Curso de CSS – Border ( Aula 6)
• Curso de CSS – Padding e Margin ( Aula 7)
• Curso de CSS – Text/Width/Height/List_height( Aula
• Curso de CSS – Float e Clear ( Aula 9)
• Curso de CSS – Posicionamentos ( Aula 10)
• Curso de CSS – Overflow ( Aula 11)

• Assinem nosso Feed e me siga no Twitter para sempre ficar atualizado, faça o download da vídeo aula clicando no ícone de download .Não perca tempo e participem!

Overflow

Bem a propriedade Overflow define como um elemento se comparta quando o mesmo ultrapassa as medidas de altura (Height) e as medidas de largura (Width), basicamente esta propriedade cria barras de rolagem para navegar e visualizar corretamente o conteúdo completo.

Overflow: auto

O valor auto na propriedade overflow significa que se o conteúdo ultrapassar a largura e altura da div, cria-se barras de rolagem automaticamente, mas se não ultrapassar não cria barra de rolagem.

Neste exemplo criei uma div com 400px de largura e 100px de altura:

<style type="text/css">
--
#exemplo {
 height: 100px;
 width: 400px;
 border: 1px solid #F00;
 overflow:auto;
}
-->
style>

<div id="exemplo">

ontrary to popular belief, Lorem Ipsum

is not simply random text. It has roots

in a piece of classical Latin literature

from 45 BC, making it over 2000 years old.

Richard McClintock, a Latin professor at

Hampden-Sydney College in Virginia, looked

up one of the more obscure Latin words,

consectetur, from a Lorem Ipsum passage,

and going through the cites of the word

in classical literature, discovered the

undoubtable source. Lorem Ipsum comes from sections

1.10.32 and 1.10.33 of “de Finibus Bonorum et Malorum”

(The Extremes of Good and Evil) by

Cicero, written in 45 BC

. This book is a treatise on the theory of

ethics, very popular during the Renaissance.

The first line of Lorem Ipsum, “Lorem ipsum

dolor sit amet..”, comes from a line in section

1.10.32.

div>

Como o texto é maior do que a altura da div, criou uma barra de rolagem na vertical, mas o texto fosse maior que a largura da div também apareceria uma barra de rolagem na horizontal.

Overflow: scroll

O valor scroll na propriedade overflow, sempre cria barra de rolagem mesmo se o conteúdo da div não ultrapassar à altura e a largura.

Neste exemplo coloquei um texto bem pequeno em uma div com 100 de altura e 400 de largura:

<style type="text/css">
--
#exemplo {
 height: 100px;
 width: 400px;
 border: 1px solid #F00;
 overflow:scroll;
}
-->
style>

<div id="exemplo">

ontrary to popular belief,

Lorem Ipsum is not simply

random text. It has roots in

a piece of classical Latin

literature from 45 BC,

it over 2000 years old. Richard

McClintock,

  div>

Mesmo o texto não ultrapassando as medidas máximas da div, criou-se barras de rolagem na vertical e na horizontal.

Overflow: hidden

O valor hidden na propriedade overflow, oculta todo o conteúdo que ultrapassar as medidas máximas de uma div e não mostra barra de rolagem.

<style type="text/css">
--
#exemplo {
 height: 100px;
 width: 400px;
 border: 1px solid #F00;
 overflow:hidden;
}
-->
style>

<div id="hidden">

ontrary to popular belief,

Lorem Ipsum is not simply random

text. It has roots in a piece of

classical Latin literature from 45 BC,

making it over 2000 years old. Richard

McClintock, a Latin professor at Hampden

-Sydney College in Virginia, looked up one

of the more obscure Latin words, consectetur,

from a Lorem Ipsum passage,

and going through the cites of the word

in classical literature, discovered the

undoubtable source. Lorem Ipsum comes from

sections 1.10.32 and 1.10.33 of “de Finibus

Bonorum et Malorum” (The Extreme

s of Good and Evil) by Cicero, written in

45 BC. This book is a treatise on the theory

of ethics, very popular during the Renaissance.

The first line of Lorem Ipsum, “Lorem ipsum dolor

sit amet..”, comes from

a line in section 1.10.32

.div>

Percebe-se que não criou nenhum tipo de barra de rolagem e que o texto que ultrapassou a medida da div também não aparece.

Overflow: visible

Visible é o valor padrão, ele não faz nada, se declarar o valor visible na propriedade overflow o conteúdo que ultrapassar as medidas máximas da div aparecerá fora da div.

<style type="text/css">
--
#exemplo {
 height: 100px;
 width: 400px;
 border: 1px solid #F00;
 overflow:visible;
}
-->
style>

<div id="exemplo">

ontrary to popular belief, Lorem Ipsum

is not simply random text. It has roots

in a piece of classical Latin literature

from 45 BC, making it over 2000 years old.

Richard McClintock, a Latin professor at

Hampden-Sydney College in Virginia, looked

up one of the more obscure Latin words,

consectetur, from a Lorem Ipsum passage,

and going through the cites of the wod

in classical literature, discovered the

undoubtable source. Lorem Ipsum comes from

sections 1.10.32 and 1.10.33 of “de Finibus

Bonorum et Malorum” (The Extreme

s of Good and Evil) by Cicero, written in

45 BC. This book is a treatise on the theory

of ethics, very popular during the Renaissance

. The first line of Lorem Ipsum, “Lorem ipsum dolor

sit amet..”, comes from a line in section 1.10.32.

div>

Percebe-se que todo o conteúdo que ultrapassar as medidas da div ira aparecer fora dela: