BOMBOLOM.COM

(webdev) Horizontal Scrolling

Este é um post de José Lopes.

Quando tem uma área num ficheiro HTML com informação (tables, imagens, etc) em que pretende definir uma altura e largura específica pode se levantar a questão das barras de scroll.

Encontra muita informação sobre como as definir automaticamente, obtendo uma barra horizontal e outra vertical, e como definir somente a barra de scroll vertical, mas no entanto, pode ser difícil de encontrar como tornar somente visível a barra de scroll horizontal.

Este post mostra como fazer isso.

Basta criar no seu CSS uma instância com o seguinte código:

(1) #container {
(2) width: 700px;
(3) overflow:auto;
(4) overflow-x:scroll;
(5) overflow-y:hidden;
    }

Explicando o CSS:
(1) Nome da instância.
(2) Define a largura da àrea onde queremos a barra de scroll horizontal.
(3) Para funcionar com browsers mais antigos.
(4) Força a barra de scroll horizontal.
(5) Esconde a barra de scroll vertical.

É de facto simples!

Para implementar isto um ficheiro HTML basta escrever:

<div id="container">
O_SEU_CONTEÚDO_AQUI
</div>

O conteúdo pode conter outras classes de CSS e todo o tipo de informação.

Para ver um exemplo prático clique aqui.
Este exemplo tem tabelas e imagens dentro da zona com a barra de scroll horizontal.

21.01.2008 | Ler mais | Comentários | Tags ,

Voltar à Página principal | Made with PyBlosxom