Caixa de Texto com Barra de Rolagem


Vocês já devem ter visto em diversos blogs, principalmente nos que publicam códigos, uma caixinha onde o código fica dentro dela e na qual aparece uma barra de rolagem (scroll).
Esse efeito, em HTML, se chama "textarea".
A textarea é muito útil, já que economiza espaço dentro do post.

Caixinha Normal

<div style="height: 100px; overflow: scroll; width: 300px;">Conteúdo Aqui</div>

"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"

Explicando:
• 300px = Largura da caixa com a barrinha de rolagem vertical.
• 100px = Altura da caixa com a barrinha de rolagem vertical.

Caixinha com Fundo Colorido

<div style="background-color: #f39999; height: 100px; margin: 5px; overflow: auto; padding: 2px; text-align: left; width: 300px;"> Conteúdo Aqui</div>

"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.

Explicando:
• #f39999 = Cor do Backgroud
• 300px = Largura da caixa com a barrinha de rolagem vertical.
• 100px = Altura da caixa com a barrinha de rolagem vertical.
• left = Como o texto ficará. Pode colocar "right", "center", "normal" ou "justify".

Todos esses valores podem ser alterados para deixar a caixa de rolagem do jeito que seu blog precisa

Um comentário: