Vou mostrar como colocar barra de rolagem no post. Para que seu texto ocupe menos "tamanho" na página?...
Estou me referindo a essa div "caixa ou quadro com barra de rolagem".
Se visitar outro post meu, você verá que esse é diferente, e, é a diferença que estou postando.
Tem gente que gosta dessas janelas com barra de rolagem(scrollbar), e, quando bem feita acaba ficando bonita, talvez eu consiga...
O mais ideal é usar uma imagem de fundo do tamanho da área com a barra de rolagem, ou pouco maior, para não demorar muito para carregar, e, se puder usar as mesmas em outros locais no post e no blog, de modo que quando o visitante vai para outra página, essa irá carregar mais rápido uma vez que a imagem já está em seu computador.
No Mozilla, a propriedade opacity permite dar um grau transparecia a tudo que está nessa div.
No Internet Explorer possivelmente a cor da barra de rolagem obedeça o css usado no meu blog.
Mas, colocar todos seus post com barra de rolagem pode não ser legal, por que nem todos gostam, ainda mais se a área com a barra de rolagem for pequena, e a pessoa tem que rolar muito o mouse, dessa forma não consegue se concentrar na leitura, etc...
Esse é o código html+css para esse quadro com a barra de rolagem, com a imagem(background:) e ele deve ser posto na parte Editar Html quando for postar ou pra quem constrói páginas de site entre as <body> </body>.
Não copie a partir daqui,
Entender alguns códigos Css:
background: fundo da área:
red cor de fundo caso a imagem não apareça, ou for curta, é bom sempre usar uma cor diferente da fonte.
url(http://foitestado.com/imagens/elefantes-crepusculo-africa.JPG) Indica a imagem de fundo.
no-repeat left top; no-repeat é para a imagem não repetir, e, top e left são os alinhamentos da imagem, que, top= topo e left=esquerdo.
Para a imagem repetir se tiver espaço é só trocar por repeat-y , repeat-x ou apenas retirar o no-repeat.
color: #ffffff; O modo mais rápido para cor da fonte branca.
color: #000000; Fonte preta(para fundo claro).
height: 450px; Altura da "caixa de rolagem"
width: 450px; Não usei, mas é a largura, caso queiram deixar mais estreito.
opacity: 0.6; - Torna meio opaco, transparente no Mozilla firefox,Chrome, Opera.
opacity: 0.3; - Muito opaco
opacity: 0.9; - Quase normal.
filter: alpha(opacity=60); - Torna meio opaco no IE7,
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; - Torna meio opaco no IE8
filter: alpha(opacity=30); - Torna muito opaco no IE7,
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; - Torna muito opaco no IE8
Estou me referindo a essa div "caixa ou quadro com barra de rolagem".
Se visitar outro post meu, você verá que esse é diferente, e, é a diferença que estou postando.
Tem gente que gosta dessas janelas com barra de rolagem(scrollbar), e, quando bem feita acaba ficando bonita, talvez eu consiga...
O mais ideal é usar uma imagem de fundo do tamanho da área com a barra de rolagem, ou pouco maior, para não demorar muito para carregar, e, se puder usar as mesmas em outros locais no post e no blog, de modo que quando o visitante vai para outra página, essa irá carregar mais rápido uma vez que a imagem já está em seu computador.
No Mozilla, a propriedade opacity permite dar um grau transparecia a tudo que está nessa div.
No Internet Explorer possivelmente a cor da barra de rolagem obedeça o css usado no meu blog.
Mas, colocar todos seus post com barra de rolagem pode não ser legal, por que nem todos gostam, ainda mais se a área com a barra de rolagem for pequena, e a pessoa tem que rolar muito o mouse, dessa forma não consegue se concentrar na leitura, etc...
Esse é o código html+css para esse quadro com a barra de rolagem, com a imagem(background:) e ele deve ser posto na parte Editar Html quando for postar ou pra quem constrói páginas de site entre as <body> </body>.
<div style="padding: 3px;
background: red url(http://foitestado.com/imagens/elefantes-crepusculo-africa.JPG)
no-repeat left top;
overflow: auto; color: #ffffff;
position: relative;
height: 450px;opacity: 0.6;filter: alpha(opacity=60);-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)';">
SEU TEXTO AQUI, imagens, etc
</div>
Não copie a partir daqui,
Entender alguns códigos Css:
background: fundo da área:
red cor de fundo caso a imagem não apareça, ou for curta, é bom sempre usar uma cor diferente da fonte.
url(http://foitestado.com/imagens/elefantes-crepusculo-africa.JPG) Indica a imagem de fundo.
no-repeat left top; no-repeat é para a imagem não repetir, e, top e left são os alinhamentos da imagem, que, top= topo e left=esquerdo.
Para a imagem repetir se tiver espaço é só trocar por repeat-y , repeat-x ou apenas retirar o no-repeat.
overflow: auto; Vai fazer a barra de rolagem aparecer, quando o que estiver <DIV>dentro das divs, ou, quadro<DIV> ultrapassar as medidas largura ou altura.
color: #ffffff; O modo mais rápido para cor da fonte branca.
color: #000000; Fonte preta(para fundo claro).
height: 450px; Altura da "caixa de rolagem"
width: 450px; Não usei, mas é a largura, caso queiram deixar mais estreito.
opacity: 0.6; - Torna meio opaco, transparente no Mozilla firefox,Chrome, Opera.
opacity: 0.3; - Muito opaco
opacity: 0.9; - Quase normal.
filter: alpha(opacity=60); - Torna meio opaco no IE7,
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; - Torna meio opaco no IE8
filter: alpha(opacity=30); - Torna muito opaco no IE7,
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; - Torna muito opaco no IE8
<div style="padding: 3px;
background: red url(http://foitestado.com/imagens/elefantes-crepusculo-africa.JPG)
repeat bottom center;
overflow: auto; color: #CCFF66;
position: relative;
height: 380px; opacity: 0.4;">
Alinhamento da imagem bottom=embaixo e right=direito e outras...
</div>
<div style="padding: 23px;
background: red url(http://foitestado.com/imagens/elefantes-crepusculo-africa.JPG)
repeat center;
overflow: auto; color: #ffffff;
position: relative;
height: 650px; opacity: 0.9;filter: alpha(opacity=90);-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';">
Aqui vocês só estão vendo a barra de rolagem por que eu coloquei varias linhas em branco.
Só pra mostrar a imagem alinhada center.
Fiz outras mudanças também, tentem ver a diferença entre essa div e os outros quadros com scroll </div>
Atualização: Fominomato perguntou como faz para a imagem de fundo ficar parada dentro da DIV com barra de rolagem, porém, no Internet Explorer, e você só verá diferença entre essas DIVs se usar o Internet Explorer, e, se puder use também o Mozilla.
Pensei em usar um Fixed, como se faz para usar background parada, mas, a imagem fica posicionada em relação a página, causando um problema se a página tem grande altura, resolvi usar background em uma DIV por fora da DIV com rolagem, ou seja, como esse código abaixo, tem uma DIV com a altura de 450(height: 450px;) e a imagem de fundo, dentro dessa DIV tem outra DIV com fundo transparente background:transparent; e altura de 410 px mais 40 do padding(abaixo o paddinig é 20, mas ele vale para cima e baixo, isso duplica o valor, o que torna essa DIV do centro com altura de 410+20+20=450px) Finalmente as duas DIVs tem mesma altura.
<div style="background: red url(http://foitestado.com/imagens/elefantes-crepusculo-africa.JPG) repeat center center; color: #ffffff; position: relative; height: 450px; opacity: 0.7;">
<div style="background:transparent; padding:20px; overflow: auto; position: relative; height: 410px;">
TEXTO AQUI ALTURA REAL DESSA DIV 455px
</div></div>
Se observar só existe overflow: auto; na DIV do meio, isso deixa ela com barra de rolagem
Este foitestado é um tremendo blog, parabéns bons tutoriais bem explicados, aprendi muito sobre: mudar a cor de fundo da pagina do meu blog - mudando em "BODY". OBRIGADO.
ResponderExcluirMuito legal
ResponderExcluircara tem um problema no IE (como sempre o IE) é que o seguinte:
ResponderExcluir- background fica rolando junto ao texto no fundo, tem como fazer alguma mutreta para travar o texto?
Com CSS você pode colocar em qualquer div uma barra de rolagem automática. Quando há muito texto, a barra aparece automaticamente. Exemp: .content{overflow: auto;}. Espero ter ajudado!
ExcluirFominomato
ResponderExcluirAdicionei uma DIV nesse post, observe a ultima div, acho que é uma forma de burlar esse problema, não conheço nem uma maneira usando apenas Css, mas inserindo outra div pode resolver, apenas deve ter um certo cuidado coma as medidas como altura, margin e padding.
Muito bom!! principalmente para quem quer deixar o blog com um visual profissional!
ResponderExcluirMuito bom, porém gostaria de saber como fazer p/ mudar a cor da barra de rolagem no firefox...
ResponderExcluirvendo seus exemplos, a barra ficou azul, como q vc fez???
Vlw!!!
Diego
ResponderExcluirNão tem como mudar a cor da barra de relagem no mozilla, o que acontece é que tem a função opacity: que deixa a div semi transparente, e, como você pode ver a cor de fundo da div externa é azul, por isso a barra fica um pouco azulada, o problema do opaco(transparente) é que todos os elementos internos ficam também opacos e não tem como mudar isso, não com Css, fica um pouco ruim de ler.
Entendi, obrigado pela resposta xD
ResponderExcluirAlguém poderia me ajudar? Primeiro quero agradecer pelo tutorial,me ajudou muito. Porém esta caixa com scroll e fundo não pega no orkut quando se edita o about em html. Haveria um modo de me ajudarem?
ResponderExcluirSutcliff Poe
ResponderExcluirVocê tem certeza que o Orkut aceita Html, eu não entendo nada de orkut, mas as vezes que visitei esse site não encontrei nem uma opção para mexer com Html, geralmente as redes sociais não permitem essas coisas, elas são mais para coisas do tipo troca de mensagens, ideias e coisas do tipo, talvez eles não acham interessante permitir ações que fujam dessa linha.
Otima materia, estava com problemas em minha home, com e a materia caiu como uma luva, PARABENS.
ResponderExcluirs.sales
Cara achei legal mais pra mim consegui com html bota rolagem na div eu tive que olha no código fonte do site, mais valew ajudo muito mais muito mesmo sério ADM valew.
ResponderExcluireu so quero a barra para mover um texto no meu blog
ResponderExcluirGostaria de saber como faço para a caixa ficar lado à lado e não uma abaixo da outra.
ResponderExcluirVou dar uma dica, pesquise css float:left, no caso, geralmente aplicado à 'div', detalhe, você terá que ajustar as larguras de cada uma das div's, usar display:inline em cada uma delas e, de preferência, elas devem ter a mesma altura também, ou pode dar problema.
ExcluirEstou com pouco tempo para dar mais detalhes, o que mencionei acima, é o mais importante para um bom começo.
Como coloca essa caixa lado à lado?
ResponderExcluir