Overflow na barra de rolagem com CSS
Autor: Felipe Alencar
Vamos aprender nesse tutorial a fazer uma área overflow usando CSS. Essa técnica é muito utilizada para apresentar contratos, informações técnicas, sem ocupar muito espaço na tela de deixar o usuário livre para escolher se deseja ler ou não o conteúdo.
A técnica do overflow é bem parecida com um iframe, apesar de não ser um e ainda ter muitas vantagens, como por exemplo, um código limpo e leve.
Veja o exemplo:
Overflow da Alvoweb:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
Os códigos utilizados na folha de estilo CSS:
div #overflow {
backgroung-color:#ffffff;
width: 450px;
height: 125px;
Overflow: scroll;
}Na sua página HTML você insere:
<div id="overflow">
Conteúdo aqui
</div>
Felipe Alencar
www.next4.com.br
Equipe AlvoWeb
Categoria: Tableless e CSS
6 respostas ↓
1 rodrigo corrêa e castro // Out 30, 2008 at 2:15 pm
Corrigindo o fonte HTML no lugar dos dois pontos coloque o sinal de igual e as aspas
2 Rodrigo // Out 30, 2008 at 2:27 pm
Valeu Rodrigo.
O código foi atualizado.
Abraços.
3 Robson // Fev 6, 2009 at 5:04 pm
vlw…vc num e macaco gordo mais quebro um galhão..vlw
4 gadarf // Mi 3, 2009 at 10:22 am
Bem melhor q o iframe em muitas situações.
5 admin // Mi 5, 2009 at 6:34 pm
com toda Certeza. E você não fica com problema de indexação no Google e outros buscadores.
6 Mauricio // Nov 6, 2009 at 10:41 am
As vezes não aparecem as barras de rolagem no IE 7
Faça um comentário