Montar uma página com CSS IV

helldanger1 · Mai 19, 2009

Criamos a lateral da página, onde se mostram várias caixas com um buscador e acesso a outras informações.
Por Miguel Angel Alvarez - Tradução de JML

Nos passos anteriores deste manual vimos como criar o cabeçalho e o corpo da página. Agora vamos ver como fazer a lateral direita da página.

A camada lateral

Na lateral direita situamos uma nova camada, que oferece acesso a serviços e outras informações.

<div id="lateral">
... conteudo lateral...
</div>

O conteúdo que vamos situar dentro desta camada será visto por partes, pois têm bastantes detalhes para serem destacados tranqüilamente. Os estilos são os seguintes:

#lateral{
width: 200px;
background-color: #EBF2FE;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #cccccc;
float:right;
}

Define-se uma largura, uma cor de fundo e bordas de cor cinza claro na parte lateral esquerda e abaixo, os outros dois lados não terão borda por estar em contato com a borda de outros elementos.

Ademais, com o atributo float:right, indicamos que esta lateral deve "flutuar" para a direita. Assim, o corpo flutua à esquerda e a lateral à direita, com o qual conseguimos uma disposição em 2 colunas.

helldanger1 · Mai 19, 2009

Veremos a seguir os elementos que vamos colocar dentro da camada lateral, numa espécie de caixas independentes. Embora antes de ver essas caixas uma a uma, vale a pena conhecer em linhas gerais como serão criadas. Cada caixa terá este código HTML, composto por um título e um conteúdo da caixa:

<h2 class="titlat">Titulo da caixa</h2>
<div id="idunico" class="corpolateral">
Conteudo da caixa
</div>

O título o incluímos com uma etiqueta <h2> e a parte da caixa com o conteúdo, se define com um div. Cada um desses elementos tem uma classe, que se aplicará aos mesmos elementos em cada uma das caixas, de modo que todos os elementos da lateral compartilhem um mesmo estilo.

.titlat{
background-color:#68729E;
color:#ffffff;
font-size:8pt;
text-transform : uppercase;
padding: 7px 3px 7px 8px;
font-weight : normal;
letter-spacing : 2px;
margin: 0px 0px 8px 0px;
}

.corpolateral{
padding: 5px 4px 13px 10px;
}

O cabeçalho de nível 2 utiliza a classe "titlat", que define uma cor de fundo, a cor do texto, um tamanho de letra, uma mudança das letras do título à maiúsculas, umas margens internas, peso de letra normal (não negrito, como costumam ser os cabeçalhos por padrão), um espaçamento de letras de 2 pixels e uma margem. Os títulos levam associado uma quebra de linha dupla em cima e abaixo, que desejamos evitar e para isso definimos uma margem de 0 pixels, menos na parte debaixo, que terá 8 pixels.

As caixas laterais também têm um estilo, que se aplica a todos os corpos das caixas que existem na lateral. Esse estilo simplesmente define umas margens internas.

helldanger1 · Mai 19, 2009

Caixa de buscar

Um dos elementos que vamos colocar dentro da lateral é uma caixa de busca, com um formulário para realizar buscas internas, dentro do site, e em toda web.

Essa caixa de busca se coloca em um formulário. Colocamos diversos identificadores aos elementos que estão dentro do formulário, para poder aplicar estilos a cada componente separadamente. Embora alguns destes seletores nem sequer chegamos a utilizar, podem ser bem-vindos se quisermos fazer no futuro modificações da folha de estilos para atualizar o desenho do web.

<h2 class="titlat">Buscar</h2>
<div id="fbuscar" class="corpolateral">
<form>
<div id="campotexto"><input type="text" name="criterio"></div>
<div id="botonbuscar"><input type=image src="images/go.gif" width="25" height="15"></div>
<div class="radio"><input type="radio" name="op" value="1"> Na Web do inverno</div>
<div class="radio"><input type="radio" name="op" value="2"> Em toda a Web</div>
</form>
</div>

Os elementos que definimos na folha de estilos para este pequeno formulário são os seguintes:

INPUT {
font-size : 8pt;
}

Com isso definimos que os campos de texto têm um tamanho de letra de 8 pontos.

#fbuscar form{
margin-bottom : 0px;
margin-top : 0px;
}

O formulário, que está situado dentro da camada fbuscar, não deve ter margens, nem em cima e nem embaixo.

#campotexto{
float: left;
}

A camada "campotexto", onde está o campo de texto, definimos que deve "flutuar" à esquerda.

#campotexto input{
width:100px;
}

O input que há dentro da camada campotexto deve ter 100 pixels de largura.

#botonbuscar {
padding-top : 3px;
padding-left: 106px;
}

A camada onde está o botão de submit, que neste caso é uma imagem de submit (<input type="imagem">), tem uma margem interna de 3 pixels para cima, e de 106 para o lado esquerdo. Os 106 pixels de largura saem dos 100 que ocupa o campo de texto que está à equerda, mais 6 pixels adicionais, que é a verdadeira margem que haverá entre o campo de texto e a imagem de submit.

#botaobuscar input{
border : 0px none;
}

Com esta última definição estamos indicando que a imagem de submit (o <input type="image"> que está dentro da camada botaobuscar) não tenha borda.

.radio{
clear:both;
}

Esta classe, que afeta as camadas onde estão os botões de radio, define que não deve haver elementos "flutuando" nem à esquerda, e nem à direita dos botões de radio.

helldanger1 · Mai 19, 2009

A caixa de registro

Na seguinte caixa da lateral aparece um pequeno texto convidando o visitante a registrar-se.

<div id="registro" class="corpolateral">
<a href="#">Registra-se conosco</a> e obtenha muitas vantagens.
</div>

Esta camada não tem nenhum estilo específico, simplesmente se comporta herdando os estilos de outras camadas e com os que se definiram nas classes que se utilizam.

A caixa de outras informações

Situaremos uma última caixa dentro da lateral, que contem links a outras informações. Dentro da caixa colocaremos vários links dentro de uma lista.

<h2 class="titlat">Outras informações</h2>
<div id="otras" class="corpolateral">
<ul>
<li><a href="#">Quem somos</a>
<li><a href="#">Nossa missão</a>
<li><a href="#">Agenda de eventos</a>
</ul>
</div>

Para personalizar o estilo da lista de links utilizam-se os seguintes estilos.

#otras ul{
margin : 5px 10px 0px 0px;
padding: 0px 0px 0px 4px;
list-style: none;
}

Por um lado temos o estilo definido para toda a lista de elementos. Neste caso se eliminam as margens que este tipo de listas têm implícitas. Coloca-se também uma margem interna 4 pixels à esquerda e zero no resto das posições. Com "list-style:none" indica-se que não se deseja nenhuma bolinha à esquerda dos elementos, visto que vamos coloca-la a seguir manualmente como fundo dos <li>.

#otras li{
padding-left: 14px;
background: transparent url("images/bullet.gif") 0 2px no-repeat;
margin-bottom: 10px;
}

Por outro lado, para cada um dos elementos da lista, define-se um espaço de 14 pixels à esquerda. Esses 14 pixels servem para fazer espaço, para que caibam umas pequenas margens que vamos colocar de fundo nas listas, que vão fazer às vezes de bolinha. Também, define-se um fundo dos <li> que é a imagem com a bolinha personalizada, de acordo com nosso desenho. Também, define-se uma margem na parte inferior.

Montar uma página com CSS IV

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP