Altura e largura
Através dos atributos width (largura) e height (altura), podemos definir a largura e a altura dos elementos (imagem, texto, etc.).
Uma aplicação bastante interessante é a aplicação de bordas. Ao se colocar uma borda em um elemento, pode-se definir a altura e largura dessa borda.
Os valores mais usados são: px e %
Vamos a um exemplo com a aplicação de bordas em um texto e em uma imagem.
Pode-se então, construir layouts diferentes para um determinado site, sem a necessidade de usar por exemplo, tabelas.
Vamos como exemplo construir um layout bem simples: Arquivo CSS – salve-o como layout.css
p {font: normal 10pt arial; color:#0000ff; text-align:justify; padding:5px; height:100px; width: 200px; border: 3px double #ff0000; background: #ffff00;} }
Arquivo HTML – salve-o como exemplo49.html <html>
<head>
<title>Layouts</title>
<link rel="stylesheet" type="text/css" href="layout1.css"> </head>
<body>
<p>Este é um teste simples para verificação
das técnicas de construção de layouts. Trata-se de um processo bastante interessante em CSS.</p>
</body> </html>
Figura 49 – exemplo 49
O detalhe interessante dessa aplicação é que podemos construir layouts com textos e imagens para propagandas, banners, etc.
Estes poderão ser colocados em pontos estratégicos de uma página.
Posicionamento
Podemos posicionar elementos de duas formas: posicionamento relativo e posicionamento absoluto
São usados sempre dois valores para o posicionamento: • top e left: parte superior e lado esquerdo
• top e right: parte superior e lado direito • bottom e right: parte inferior e lado direito • bottom e left: parte inferior e lado esquerdo
A diferença básica entre o posicionamento relativo e absoluto, é que o absoluto não cria espaços após o elemento enquanto que com o relativo ocorrerá espaços entre os elementos após ser posicionado.
Vamos aproveitar o exemplo anterior e criar dois posicionamentos distintos para o nosso layout.
Arquivo CSS – salve-o como layout1.css h1{ position:absolute; top:5px; left:5px; } h2 { position:absolute; top:80px; left:80px; }
p {font: normal 10pt arial; color:#0000ff; text-align:justify; padding:5px; height:100px; width: 200px; border: 3px double #ff0000; background: #ffff00;} }
“h1 e h2” definem posicionamentos diferentes. Arquivo HTML – salve-o como exemplo50.html <html>
<head>
<title>Layouts</title>
<link rel="stylesheet" type="text/css" href="layout1.css"> </head>
<h1><p>Este é um teste simples para verificação
das técnicas de construção de layouts. Trata-se de um processo bastante interessante em CSS.</p></h1>
<h2><p>Este é um teste simples para verificação
das técnicas de construção de layouts. Trata-se de um processo bastante interessante em CSS.</p></h2>
</body> </html>
Figura 50 – exemplo 50
Veja na figura 51 (exemplo 51) a disposição dos layouts quando o posicionamento absoluto é substituído pelo relative.
Arquivo CSS – salve-o como layout2.css h1{ position:relative; top:5px; left:5px; } h2 { position:relative; top:80px; left:80px; }
padding:5px; height:100px; width: 200px; border: 3px double #ff0000; background: #ffff00;} }
Figura 51 – exemplo 51 – posicionamento relativo O arquivo HTML é mostrado abaixo – salve-o como exemplo51.html <html>
<head>
<title>Layouts</title>
<link rel="stylesheet" type="text/css" href="layout2.css"> </head>
<body>
<h1><p>Este é um teste simples para verificação
das técnicas de construção de layouts. Trata-se de um processo bastante interessante em CSS.</p></h1>
das técnicas de construção de layouts. Trata-se de um processo bastante interessante em CSS.</p></h2>
</body> </html>
CAMADAS (LAYERS)
O uso de camadas ou layers permite sobrepor um ou mais elementos, ou seja, sobrepor imagem sobre imagem, texto sobre imagem, etc.
Desta forma, cada elemento ocupa uma camada e deve receber um número. Os números menores representam as camadas inferiores e os maiores as camadas
superiores.
Normalmente identifica-se cada camada por z-index. Tomemos como exemplo a sobreposição de 4 imagens:
Figura 52 – orquidea.jpg Figura 53 – oriental.jpg
Figura 54 – pordosol.jpg Figura 55 – engenho.jpg
A primeira coisa a fazer é atribuir em HTML uma ID para cada elemento, neste caso, para cada imagem.
Costuma-se normalmente denominar a sobreposição de elementos como “empilhamento”.
Arquivo CSS – salve-o como layer.css #layer1 { position:absolute; left:10px; top:10px; z-index:1;} #layer2 { position:absolute; left:50px; top:50px; z-index:2;} #layer3 { position:absolute; left:100px; top:100px; z-index:3;} #layer4 { position:absolute; left:150px; top:150px; z-index:4;}
Arquivo HTML – salve-o como exemplo52.html <html>
<head>
<title>Exemplo de Camadas</title>
<link rel="stylesheet" type="text/css" href="layer.css"> </head>
<body>
<img id="layer1" src="pordosol.jpg"> <img id="layer2" src="orquidea.jpg"> <img id="layer3" src="oriental.jpg"> <img id="layer4" src="engenho.jpg"> </body>
</html>
A figura a seguir mostra o aspecto das regras CSS aplicadas no exemplo 52, onde temos o empilhamento ou sobreposição de imagens.
Observe que o posicionamento das imagens inicia-se no z-index-1 (pordosol.jpg) que é determinado pelas coordenadas: left 10px e top 10px.
Figura 56 – exemplo 52 – sobreposição de imagens
Vamos sobrepor agora, um texto na camada 4. Para isso teremos que criar outro arquivo CSS, acrescentando mais um layer.
Arquivo CSS – salve-o como layer1.css #layer1 { position:absolute; left:10px; top:10px; z-index:1;} #layer2 { position:absolute; left:50px; top:50px; z-index:2;} #layer3 { position:absolute; left:100px; top:100px; z-index:3;} #layer4 { position:absolute; left:150px; top:150px;
z-index:4;} p {
position:absolute;
font: oblique 700 25pt arial; color:#ffff00; left:210px;
top:260px; z-index:5;}
A figura abaixo mostra o efeito do acréscimo do quinto layer, para o posicionamento do texto.
Figura 57 – exemplo 53 – posicionamento do texto Veja o arquivo HTML para o exemplo53.html
<html> <head>
<title>Exemplo de Camadas</title>
<link rel="stylesheet" type="text/css" href="layer1.css"> </head>
<body>
<img id="layer1" src="pordosol.jpg"> <img id="layer2" src="orquidea.jpg"> <img id="layer3" src="oriental.jpg"> <img id="layer4" src="engenho.jpg"> <p>Engenho</p>
</body> </html>