Técnicas e processos - HTML / CSS - aula 7
•Download as PPT, PDF•
0 likes•294 views
Curso design - Anhanguera Unidade Brigadeiro
Recommended
Recommended
More Related Content
Featured
Featured (20)
Técnicas e processos - HTML / CSS - aula 7
- 1. Técnicas e processos de produção Profº Ritielle Souza Aula 07
- 2. CAMADAS RELATIVAS Quando utilizamos a camada relativa, ela está presa na página, não tem z-index e nem posicionamento absolute O posicionamento das camadas relativas se faz por encaixe.
- 3. CAMADAS RELATIVAS Se quiser uma camada ao lado da outra tem que ser colocado através da folha de estilo float:left; na camada anterior. Para quebrar a sequência de encaixe, colocar na camada que não será encaixada a opção: clear:left;
- 4. CAMADAS RELATIVAS #fundo{ margin-left:auto; margin-right:auto; width:740px; height:440px; background-color:yellow; margin-top:auto; } Para trabalhar com camadas relativas precisamos de um fundo, um “container” onde armazenar suas camadas relativas. Camada 01 Camada 02 Container ou fundo
- 5. CAMADAS RELATIVAS #camada1{ position:relative; width:150px; height:200px; background-color:red; text-align:center; color:#ffffff; border:3px solid yellow; float:left; }
- 6. CAMADAS RELATIVAS #camada2{ position:relative; width:150px; height:200px; background-color:yellow; text-align:center; color:#666666; border:3px solid red; float:left; }
- 7. CAMADAS RELATIVAS #camada3{ position:relative; width:150px; height:200px; background-color:orange; text-align:center; color:#ffffff; border:3px solid blue; clear:left; }
- 8. CAMADAS RELATIVAS <html> <head> <title>Camadas Relativas</title> <link rel="stylesheet" href="relativas1.css" type="text/css"> </head> <body> <center><div id="fundo"></center> <div id="camada1"> Teste de camadas relativas</div>
- 9. TABLELESS <div id="camada2"> Teste de camadas relativas</div> <div id="camada3"> Teste de camadas relativas</div> </div> </body> </htm>
- 10. TABLELESS Camada com clear:left; Se tivesse com float:left estaria aqui.