Mostrando postagens com marcador div. Mostrar todas as postagens
Mostrando postagens com marcador div. Mostrar todas as postagens

12 de abr. de 2010

Barra de rolagem em tag DIV

Olá Pessoal!

Estamos aqui mais uma vez para mostrar como colocar barra de rolagem em DIV(como utilizamos aqui no blog com os blocos de textos).

Primeiramente o que deve ser feito é criar o HTML necessário com uma DIV e um texto curto

<div id="rolagem">
<p>Web como um Todo! te <b>ensina</b> a colocar barra de <strong>rolagem ! em tag DIV</strong> uau que demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto demais esse texto </p>
</div>

Legal! Agora vamos ver a parte do CSS.(Lembre-se separar conteúdo de layout sempre)

#rolagem {
height:150px;
width:250px;
background-color:#999999;
overflow:auto;
}


Pronto aqui está o resultado final!
às 23:07:00 0 comentários
Marcadores: , , , , , , ,

10 de abr. de 2010

Centralizar Página ou Div

Olá Pessoal,

Hoje vou mostrar aqui uma técnica para centralizar a página no meio da tela. Uma técnica muito comum é ativar a propriedade align="center" da tag div, porém não recomendo pois fica mais pra uma P.O.G, então vamos fazer isso com CSS, separando layout de conteúdo ;)

Vamos pensar na estrutura do site

Bom pelo que pode ser visto na imagem acima, teremos uma div principal que preencherá toda a tela e uma div conteúdo.

Vejamos como o HTML fica neste caso

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Como Um Todo!</title>
</head>

<body>
<div id="principal">
<div id="conteudo">
Conteúdo aqui!
</div>
</div>
</body>
</html>


Show! Já temos o conteúdo(HTML), agora é hora de definir o layout(CSS).

#principal{
width: 100%;
}

#conteudo{
width:500px;
margin:0 auto;
border: 1px solid #000000;
}


Repare que definimos estilos para as duas DIVs, na div PRINCIPAL definimos a largura em 100%, ou seja, a largura de toda tela será preenchida. No div CONTEUDO foi definido a largura para width:500px; (apenas para exemplo, você pode definir a largura que desejar), uma borda border: 1px solid #000000; (para melhor visualizar o efeito) e o grande responsável pelo alinhamento do div na tela a propriedade margin: 0 auto;
às 20:31:00 0 comentários
Marcadores: , , , , , , , , ,