Centro Universitrio do Maranho

Web Design
Posicionando Elementos

PROF. THIAGO DRUMMOND R. G. MOREIRA

Centro Universitrio do Maranho

Flutuando Elementos
Um elemento pode ser flutuado esquerda ou direita com uso da propriedade float. Isto significa que o box e seu contedo so deslocados para a direita ou para a esquerda do documento (ou do bloco container) float pode ser declarado left, right ou none.

Centro Universitrio do Maranho

Flutuando Elementos
A figura a seguir ilustra o princpio de float:

Centro Universitrio do Maranho

Flutuando Elementos
Se desejamos que um texto seja posicionado em volta de uma figura como mostrado abaixo, basta flutuarmos a imagem

Centro Universitrio do Maranho

Flutuando Elementos
O HTML:
<div class="picture">
<img src="bill.jpg" alt="Bill Gates">

</div> <p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>

Para conseguir o efeito mostrado, basta definir uma largura para o box que o contm e declarar para ele float: left;
div.picture { float:left; width: 100px; }
5

Centro Universitrio do Maranho

Flutuando Elementos
Outro exemplo: colunas Floats podem ser usados para construir colunas em um documento. Para criar as colunas estruturamos as colunas no cdigo HTML usando <div> CSS
div.coluna { float: left; width: 33%; }

Centro Universitrio do Maranho

Flutuando Elementos
HTML
<div class="coluna">

<p>Haec disserens qua de re agatur et in quo causa consistat non videt...</p>

</div> <div class="coluna">

<p>Haec disserens qua de re agatur et in quo causa consistat non videt...</p>

</div> <div class="coluna">

<p>Haec disserens qua de re agatur et in quo causa consistat non videt...</p>

</div>
7

Centro Universitrio do Maranho

Flutuando Elementos
A propriedade clear usada para controlar o comportamento dos elementos que se seguem aos elementos floats no documento. Por padro, o elemento subsequente a um float, ocupa o espao livre ao lado do elemento flutuado. No exemplo anterior, o texto deslocou-se automaticamente para o lado da foto de Bill Gates. A propriedade clear pode assumir os valores left, right, both ou none.
8

Centro Universitrio do Maranho

Flutuando Elementos
A regra geral : se clear, for por exemplo definido both para um box, a margem superior deste box ser posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele no cdigo.
<div id="picture"> <img src="bill.jpg" alt="Bill Gates"> </div> <h1>Bill Gates</h1> <p class="floatstop">causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>
9

Centro Universitrio do Maranho

Flutuando Elementos
Para evitar que o texto se posicione no espao livre deixado pela foto do Bill Gates basta adicionar a seguinte regra CSS:
.picture {
float:left; width: 100px; }

.floatstop {
clear:both; }

10

Centro Universitrio do Maranho

Posicionando Elementos
Com posicionamento CSS podemos colocar um elemento em uma posio exata na pgina. Combinado com floats, o posicionamento abre muitas possibilidades para criao de layouts precisos e avanados.
O princpio de posicionamento CSS Posicionamento absoluto Posicionamento relativo
11

Centro Universitrio do Maranho

O princpio de Posicionamento CSS
O princpio de posicionamento CSS estabelece que voc pode posicionar um elemento em qualquer lugar na tela usando um sistema de coordenadas.

12

Centro Universitrio do Maranho

O princpio de Posicionamento CSS
Vamos supor que queremos posicionar um cabealho. Usando o box model, o cabealho pode ser estilizado para ser apresentado como mostrado abaixo:

13

Centro Universitrio do Maranho

O princpio de Posicionamento CSS
Se quisermos o cabealho posicionado a 100px do topo do documento e a 200px esquerda, podemos usar o seguinte CSS:
h1 { position:absolute; top: 100px; left: 200px; }

14

Centro Universitrio do Maranho

O princpio de Posicionamento CSS
O resultado mostrado a seguir:

15

Centro Universitrio do Maranho

Posicionamento Absoluto
Um elemento posicionado absolutamente no cria nenhum espao no documento. Isto significa que no deixa nenhum espao vazio aps ser posicionado. Para posicionar um elemento de forma absoluta a propriedade position deve ser definida para absolute. Voc pode ento usar as propriedades left, right, top, e bottom para definir as coordenadas e 16 posicionar o elemento.

Centro Universitrio do Maranho

Posicionamento Absoluto
Para exemplificar o posicionamento absoluto, vamos colocar quatro boxes nos cantos da pgina:
.box1 { position:absolute; top: 50px; left: 50px; } .box2 { position:absolute; top: 50px; right: 50px; } .box3 { position:absolute; bottom: 50px; right: 50px; } .box4 { position:absolute; bottom: 50px; left: 50px; }

17

Centro Universitrio do Maranho

Posicionamento Absoluto
HTML
<div <div <div <div class="box1"> Box class="box2"> Box class="box3"> Box class="box4"> Box 1 2 3 4 </div> </div> </div> </div>

18

Centro Universitrio do Maranho

Posicionamento Relativo
Para posicionar um elemento de forma relativa a propriedade position deve ser definida para relative. A diferena entre os dois tipos de posicionamento a maneira como o posicionamento calculado. O posicionamento para posio relativa calculado com base na posio original do elemento no documento.
19

Centro Universitrio do Maranho

Posicionamento Relativo
Isto significa uma movimentao do elemento para a esquerda, para a direita, para cima ou para baixo. Assim fazendo, o elemento ocupa um espao aps ser posicionado. Como exemplo de posicionamento relativo vamos tentar posicionar trs imagens relativamente as suas posies originais na pgina. Notar como as imagens deixam um espao vazio nas suas posies originais no documento:
20

Centro Universitrio do Maranho

Posicionamento Relativo
CSS #dog1 { position:relative; left: 350px; bottom: 150px; } #dog2 { position:relative; left: 150px; bottom: 500px; } #dog3 { position:relative; left: 50px; bottom: 700px; } HTML <h1>The Tinder-Box</h1> <p>A soldier came along the high road: </p> <p>As he walked on, he met a very</p> <p>&quot;Thank you, old witch, out to </p> <div id="dog1"><img src="dog1.gif" /></div> <p>she replied; &quot;for you must </p> <p>&quot;This is not a bad story, ldsdfj</p> <div id="dog2"><img src="dog2.gif" /></div> <p>I do not ask for a single penny. Only</p> <p>&quot;You had better not look at me </p> <div id="dog3"><img src="dog3.gif" /></div> <p>Then he went into like wheels...</p>
21

Centro Universitrio do Maranho

Layers
CSS tambm permite trabalhar com o conceito de camadas. Isso permite posicionar os elementos de forma tridimensional - altura, largura e profundidade. Resumindo, camadas significam como os elementos se sobrepem uns aos outros. Para fazer isto definimos para cada elemento um nmero ndice (z-index). O comportamento que elementos com nmero ndice maior se sobrepem queles com menor nmero. 22

Centro Universitrio do Maranho

Layers
Vamos supor um royal flush no jogo de poker. As cartas podem ser apresentadas como se cada uma delas tivesse um z-index:

No caso mostrado, os nmeros esto em uma sequncia (de 1 a 5), contudo o mesmo resultado poderia ser obtido com uso de 5 diferentes nmeros. O que conta a ordem dos nmeros. 23

Centro Universitrio do Maranho

Layers
CSS para a ilustrao das cartas
#ten_of_diamonds { position: absolute; left: 100px; top: 100px; z-index: 1; } #jack_of_diamonds { position: absolute; left: 115px; top: 115px; z-index: 2; } #queen_of_diamonds { position: absolute; left: 130px; top: 130px; z-index: 3; } #king_of_diamonds { position: absolute; left: 145px; top: 145px; z-index: 4; } #ace_of_diamonds { position: absolute; left: 160px; top: 160px; z-index: 5; } 24