Elementos HTML e posicionamento

Construsite Brasil
Criação de sites
PARTE II
Desenvolvimento na prática

Construsite Brasil
Criação de sites
PRINCIPAIS Níveis de elementos HTML
(table, block, list-item, inline, inline-block)

Construsite Brasil
Criação de sites
Elementos invisíveis
(base, link, meta, script, style, title)
NÃO SÃO ELEMENTOS DE CONTEÚDO REAL PARA O USUÁRIO, SÃO ESPECIFICAÇÕES
E ORIENTAÇÕES PARA OS NAVEGADORES E MECANISMOS DE BUSCA ORGÂNICA.

Construsite Brasil
Criação de sites
Elementos a nível de bloco
{títulos (h1, h2, h3...), p, div, section, article, header, footer}
ELEMENTOS QUE CARREGAM CONTEÚDO REAL EM BLOCO.

Construsite Brasil
Criação de sites
Elementos em linha
(a, b, br, img, input, label, span, textarea, tt)
ELEMENTOS QUE CARREGAM CONTEÚDO SEGUIDOS, EM LINHA.
Lorem ipsum dolor sit amet consectetuer adipiscing ipsum dolor sit amet
Não permite estilos de
bloco, como margin.

Construsite Brasil
Criação de sites
Elementos de tabela
(table, inclui tr, td e tudo mais)
Endentamento
Tempo longo para
renderização.
Um elemento é
dependente do outro
para se posicionar.
ELEMENTOS ENDENTADOS E QUE CAUSAM “DEPENDÊNCIA“
Lorem ipsum dolor Lorem ipsum dolorLorem ipsum dolor sit amet,
consectetuer adipiscing
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat.
Problema!
Mesmo se você definir a altura do elemento
da tabela ele será adaptado de acordo com o
tamanho do conteúdo.
yoooop (travado)

Construsite Brasil
Criação de sites
Elementos de lista
(ul, li)
ELEMENTOS DE ORDEM, LISTAGEM
Lorem ipsum dolor sit amet
consectetuer adipiscing elit
Sed diam nonummy nibh
Euismod tincidunt ut laoreet
Dolore magna aliquam erat volutpat
Ut wisi enim ad minim veniam
Quis nostrud exerci tation
Ullamcorper suscipit lobortis
Nisl ut aliquip ex ea commodo consequat
Duis autem vel eum iriure
Olor in hendrerit in

Construsite Brasil
Criação de sites
USO DE ELEMENTOS FLUTUANTES
(FLOATS)
Sinônimos: boiar, sobrenadar e vogar.

Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.
float: right
float: left
margin
Observação:
Maior tempo de renderização se
comparado com position, pois o texto
depende do bloco para se posicionar.

Construsite Brasil
Criação de sites
lisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.
float: right
float: left
Os elementos definidos com a propriedade float passam a “boiar“ em relação aos outros elementos.
Imagine um naufrágio, onde os textos são os lixos que flutuam ao lado das boias, mas não
sobrepõem uns aos outros sobre a água (mesma camada).

Construsite Brasil
Criação de sites
USO DE ELEMENTOS posicionados
(position)

Construsite Brasil
Criação de sites
lisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac cumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
position: absolute;
top:0;
left:0;
position: absolute;
bottom:0;
right:0;
Os elementos com a propriedade position de valor absolute é “tirado da camada
natural“ e posicionado.
Observação:
Menor tempo de renderização se
comparado com float, pois o texto não
depende do bloco para se posicionar.
Porém seria impossível criar o efeito
anterior.

Construsite Brasil
Criação de sites
Libertando elementos flutuantes/flutuados
(floats)

Construsite Brasil
Criação de sites
<div id=”blocoGeral”>
<div id=”blocoVerde”></div>
<div id=”blocoTexto”>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat [...]
</div>
</div>
#blocoVerde {
width:200px;
height:400px;
background: #A3CC52;
float: left;
}
#blocoTexto {
clear:both;
}

Construsite Brasil
Criação de sites
lisi.
float: left
clear: both

Construsite Brasil
Criação de sites
<div class=”bloco verde fl”></div>
<div class=”bloco azul fr”></div>
</div>
#blocoGeral { background: #333 }
.bloco {
width:200px;
height:400px;
}
.verde { background: #A3CC52; }
.azul { background: #3B9CD7; }
.fl { float: left;}
.fr { float: right;}

Construsite Brasil
Criação de sites
lisi.
float: left; float: right;
Problema!
O blocoGeral não aparece.

Construsite Brasil
Criação de sites
</div>
#blocoGeral {
background: #333;
display: table;
}
.bloco {
width:200px;
height:400px;
}
Solução 1
Definir a propriedade display com o valor table.
display:table;

Construsite Brasil
Criação de sites
lisi.
Problema!
O blocoGeral está se comportando como tabela, a renderização é dependente.

Construsite Brasil
Criação de sites
</div>
#blocoGeral {
background: #333;
display: table;
width: 100%;
}
.bloco {
width:200px;
height:400px;
}
Solução 1
Definir a propriedade width com o valor 100% por exemplo.
width:100%;

Construsite Brasil
Criação de sites
Problema Tabela!
Mesmo se você definir a altura do elemento a
nível de tabela ele será adaptado de acordo com o
tamanho do conteúdo que está endentado.
Isso causa mais dependência entre elementos.

Construsite Brasil
Criação de sites
</div>
#blocoGeral {
background: #333;
display: table;
width: 100%;
height:400px;
}
.bloco {
width:200px;
height:400px;
}
.verde {
height:600px;
}
Exemplo:
Definimos a propriedade height com o valor 400px e mudamos a
propriedade height da class .verde para 600px.
height:400px = #blocoGeral
height:600px = .verde

Construsite Brasil
Criação de sites
lisi.
Problema!
O blocoGeral está se comportando como tabela, a renderização é dependente.
Problema Tabela!
Mesmo se você definir a altura do elemento
da tabela ele será adaptado de acordo com o
tamanho do conteúdo.
Problema Navegador!
A renderização de elementos a nível de
tabela variam e causam mais problemas em
diferentes navegadores.
Solução?
Esquecer tabela para casos como este.
Elemento a nível de tabela é para tabelas e
algumas exceções.

Construsite Brasil
Criação de sites
<div class=”cb”></div>
</div>
#blocoGeral { background: #333; }
.bloco {
width:200px;
height:400px;
}
.cb { clear:both; }
.fl { float: left;}
.fr { float: right;}
Solução 2
Adicionar qualquer elemento a nível de bloco, definir
a propriedade clear com o valor both.
clear:both;
Libertando de verdade.

Construsite Brasil
Criação de sites
lisi.
O blocoGeral está se comportando como elemento a nível de bloco, a
renderização é menos dependente.
Solução Simples!
Você pode reutilizar a classe criada para
blocos sucessores no layout, reaproveitar é
sempre a melhor opção.

Construsite Brasil
Criação de sites
Prova de fogo!
Mesmo que você defina a altura do elemento a nível de
bloco, ele será mantido de acordo com a definição das css,
sem dependência dos elementos flutuantes, sendo assim os
elementos flutuantes vão transbordar o seu elemento pai.

Construsite Brasil
Criação de sites
Exemplo:
Definimos a propriedade height com o valor 400px e mudamos a
propriedade height da class .verde para 600px.
height:400px = #blocoGeral
height:600px = .verde
<div class=”cb”></div>
</div>
#blocoGeral {
background: #333;
height: 400px;
}
.bloco {
width:200px;
height:400px;
}
.verde {
height: 600px;
}

Construsite Brasil
Criação de sites
lisi.

Construsite Brasil
Criação de sites
Manter o nível natural dos
elementos é a melhor opção!
Exemplo: Quanto definimos uma propriedade display com o valor table
e esse elemento originalmente é um elemento a nível de bloco (display:
block; ex.: div) o navegador tem de processar ele de forma diferente
do padrão, levando mais tempo para a renderização do layout.

Construsite Brasil
Criação de sites
DICAS ÚTEIS QUE VOCÊ NÃO APRENDE NA ESCOLA

Construsite Brasil
Criação de sites
Porque utilizamos * para fazer um reset do html nas CSS?
*SELECIONA TODOS OS ELEMENTOS DESCENDENTES.
Atenção!
O grau de importância das
css selecionadas com * é
maior.
Exemplo:
<div class=”bloco verde”>Bloco01
<div class=”subBloco”></div>
</div>
<div class=”bloco azul”> Bloco02</div>
</div>
#blocoGeral {background: #333;}
.bloco {
width:200px;
height:400px;
}
.subBloco { background: #C40303; }

Construsite Brasil
Criação de sites
lisi.
Bloco01
Bloco02
subBloco

Construsite Brasil
Criação de sites
#blocoGeral * {background: #333;}
.bloco {
width:200px;
height:400px;
}
Se definirmos o #blocoGeral seguido pelo seletor * ele aplica a
formatação a todos os elementos descendentes.
#blocoGeral *

Construsite Brasil
Criação de sites
SELECIONANDO ELEMENTOS FILHOS COM >
Exemplo:
<div class=”bloco verde”>Bloco01
<div class=”subBloco”></div>
</div>
<div class=”bloco azul”> Bloco02</div>
</div>
#blocoGeral {background: #333;}
.bloco {
width:200px;
height:400px;
}

Construsite Brasil
Criação de sites
#blocoGeral > div {background: #333;}
.bloco {
width:200px;
height:400px;
}
Se definirmos o #blocoGeral seguido pelo seletor > para os elementos
div ele aplica a formatação a todos os div filhos.
#blocoGeral > div

Construsite Brasil
Criação de sites
SELECIONANDO ELEMENTOS COM +
Exemplo:
<div>Bloco01</div>
<div>Bloco02</div>
<div>Bloco03</div>
<div>Bloco04</div>
div {
width:200px;
height:200px;
background: #333;
}
Conseguimos selecionar elemento determinado e seus adjacentes.

Construsite Brasil
Criação de sites
Exemplo:
<div>Bloco01</div>
<div>Bloco02</div>
<div>Bloco03</div>
<div>Bloco04</div>
div {
width:200px;
height:200px;
background: #333;
}
div+div { background: #C40303; }

Construsite Brasil
Criação de sites
Exemplo:
<div>Bloco01</div>
<div>Bloco02</div>
<div>Bloco03</div>
<div>Bloco04</div>
div {
width:200px;
height:200px;
background: #333;
}
div+div+div { background: #C40303; }

Construsite Brasil
Criação de sites
SELETORES DE ATRIBUTOS
Conseguimos selecionar os elemento de acordo com seus atributos.
Exemplo:
input[type=”text”] { propriedade:valor; }
a[href^=”http”] { propriedade:valor; }
a[href$=”.html”] { propriedade:valor; }
seleciona todos os inputs de texto.
seleciona todos os elementos a que começam com o valor http.
seleciona todos os elementos a que terminam com o valor .html.

Construsite Brasil
Criação de sites
PROPRIEDADES PROPRIETÁRIAS
Conseguimos definir propriedades para um browser específico.
As propriedades proprietárias passaram a existir porque cada grupo de desenvolvedores
cria novas funcionalidades para as css mas só podem aplicar ao seu motor e não em todos.
Por exemplo:
A equipe de desenvolvedores da Apple (Webkit) criaram a funcionalidade de transição entre
estados de formatação para os elementos, a propriedade -webkit-transtition.
A equipe apresenta a solução para o orgão responsável pelo padrão de desenvolvimento web
(w3c) esses funcionalidades aos poucos vão sendo desenvolvidas e implementadas para os
motores de outros browsers como firefox (gecko), ie ou ópera.
Quando o processo de desenvolvimento chega ao término e funciona perfeitamente em todos
os browsers ele passa a ser aceito sem as propriedades proprietárias, sendo padronizada
pelo w3c.
Exemplo:
-moz
-o
-webkit

Construsite Brasil
Criação de sites
PROPRIEDADES PROPRIETÁRIAS
Conseguimos definir propriedades para browser específico.
Outro exemplo:
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
Exemplo:
-moz
-o
-webkit
Já está sendo implementado como padrão e reconhecido pelos navega-
dores com os motores gecko e webkit sem a necessidade da utilização de
propriedades proprietárias.
Cuidado ao utilizar geradores de
código automáico, talvez sejam
desnecessários.

Construsite Brasil
Criação de sites
CSS VALIDO É SEMPRE IMPORTANTE
CSS Validation Service
W3C
http://jigsaw.w3.org/css-validator/

Construsite Brasil
Criação de sites
Créditos
Construsite Brasil
Criação de sites
www.construsitebrasil.com
Marcos César
Desenvolvedor front-end e Designer
Material elaborado por:

Construsite Brasil
Criação de sites
Referêcias
6 estratégias para melhorar a organização do seu CSS/ Algumas estratégias simples podem ser utilizadas para deixar o seu CSS mais organizado, consistente e de fácil
manutenção. Tabeless. [acesso em 26 de novembro de 2012]. Disponível em: http://tableless.com.br/6-estrategias-para-melhorar-a-organizacao-do-seu-css-2/
Christopher Schmitt. Livro: CSS Cookbook/Soluções rápidas para problemas comuns com CSS. Novatec Editora Ltda. 2010.
Eric A. Meyer, CSS: The Definitive Guide. O’Reilly Media; Third Edition edition (November 14, 2006).
Diego Eis Elcio Ferreira. Livro: HTML5 e CSS3 com farinha e pimenta.
W3C, CSS Validation Service. Disponível em: http://jigsaw.w3.org/css-validator/acess
Bernard De Luna - Sexy web projects specialist | Web design speaker and teacher. Disponível em: http://bernarddeluna.com/
Zeno Rocha | HTML5, CSS3 e JavaScript. Disponível em: http://zenorocha.com/
CSS3 Generator. Disponível em: http://css3generator.com/
WebPlatform Docs. Disponível em: http://docs.webplatform.org

Elementos HTML e posicionamento

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (19)

Elementos HTML e posicionamento