Primeiramente, vamos criar uma box no PAINT.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Com isso feito, vamos repartir (FATIAR) nossa Box em 3:
Header_box:[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Bg_box[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem](1 pixel de altura)
Footer_box[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Com as imagens salvas, vamos começar nossa edição no HTML.
Abra um novo documento com a seguinte introdução:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Box by Radielzinho.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
Agora vamos dar as propriedades para nossa box de jeito que possamos editar em CSS.
<head>
<title>Box by Radielzinho.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<div id="box">
<div id="top"></div>
<div id="meio"></div>
<div id="ftr"></div>
</div>
[/i]
Agora já temos tudo para começar a editar o CSS.
Primeiro criaremos um arquivo .css com nome de estilo (estilo.css) vazia. Após faremos uma ligação do nosso CSS com nosso HTML dentro do HEAD:
<head>
<title>Box by Radielzinho.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel=stylesheet href="estilo.css" type="text/css">
</head>
Agora vamos ao CSS.
Vamos começar declarando nosso top, meio e ftr (footer)
#top {background: url(images/top.png) no-repeat; height: 28px; width:218px;}
#meio {background: url(images/meio.png); width:218px;}
#ftr {background: url(images/footer.png) no-repeat; height: 7px; width:218px;}
Explicando seletores:
background - define o fundo [url ou cor(#FFF)] - dentro deste seletor temos o no-repeat que impede que a imagem repita várias vezes ao longo da página.
height - define a altura.
width - define a largura.
Bem agora vamos agregar um texto na div "meio" e editar o texto com CSS:
<div id="meio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus nunc vitae massa bibendum elementum.</div>
Texto gerado por Lorem Ipsum.
Vamos agora criar uma div class para editarmos o texto e o padding.
<div id="meio"><div class="texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus nunc vitae massa bibendum elementum.</div></div>
Agora no nosso CSS vamos começar a editar o texto.
#top {background: url(images/top.png) no-repeat; height: 28px; width:218px;}
#meio {background: url(images/meio.png); width:218px;}
#ftr {background: url(images/footer.png) no-repeat; height: 7px; width:218px;}
.texto {padding: 2px 8px; font: 12px Verdana; color: #FFF;}
Explicando novos seletores:
padding - determina o numero de pontos em que algo/algum texto dentro de algum objeto. ( 0 0 0 0, cima direita abaixo esquerda.)
font - com este seletor vazio selecionamos o tamanho e a font ao mesmo tempo, podemos selecionar as duas da seguinte forma: font-family (escolhe fonte) font-size (escolhe tamanho).
Agora vamos por um título na nossa box.
<div id="top"><div class="titulo">Titulo da box</div></div>
Agora dentro do CSS vamos chamar a class que criamos (.):
.titulo {text-align: center; padding: 5px; font: 13px Arial; font-weight: bold;}
Explicando seletores:
text-align - Escolhe o ponto do texto dentro da página, no centro (center), direita (right) ou esquerda (left).
Bem, acho que é isso, lembrando que você pode usar imagens na box, ou fontes editadas no titulo.
OBS.: Mudar width se for fazer uma box diferente.
OBS2.: O height tem que ser do tamanho que você cortou. O "meio" não deve ter height, ou então o espaço da sua box é LIMITADO.
Código completo:
box.html
<head>
<title>Box by Radielzinho.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel=stylesheet href="estilo.css" type="text/css">
</head>
<div id="box">
<div id="top"><div class="titulo">Titulo da box</div></div>
<div id="meio"><div class="texto">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Integer id lorem risus, nec viverra sapien.</div></div>
<div id="ftr"></div>
</div>
estilo.css
#top {background: url(images/top.png) no-repeat; height: 28px; width:218px;}
#meio {background: url(images/meio.png); width:218px;}
#ftr {background: url(images/footer.png) no-repeat; height: 7px; width:218px;}
.texto {padding: 2px 8px; font: 12px Verdana; color: #FFF;}
.titulo {text-align: center; padding: 5px; font: 13px Arial; font-weight: bold;}
Posts
Assunto: Criando Box Espansivel 
Qui Jan 13, 2011 4:08 am