48
CSS  Folha de Estilo em Cascata Unidade 6  P osicionamento e Layout Curso: Auxiliar de W eb Design Carga horária: 30h/a Professor Regis Pires Magalhães [email protected] http://sites.google.com/site/ifpiregis

CSS 06 Posicionamento Layout

Embed Size (px)

Citation preview

  • 5/20/2018 CSS 06 Posicionamento Layout

    1/48

    CSS Folha de Estilo em CascataUnidade 6 Posicionamento e Layout

    Curso: Auxiliar de Web DesignCarga horria: 30h/a

    Professor Regis Pires Magalhes

    [email protected]

    http://sites.google.com/site/ifpiregis

  • 5/20/2018 CSS 06 Posicionamento Layout

    2/48

    A disciplina

    Unidades

    1. Fundamentos de CSS

    2. Textos, Fontes e Espaamentos3. Cores e background

    4. Listas, Menus e Links

    5. Tabelas e Formulrios

    6. Posicionamento e Layout

  • 5/20/2018 CSS 06 Posicionamento Layout

    3/48

    Crditos

    Grande parte desta apresentao baseou-se nasvdeo-aulas de CSS da Universidade XTI.

    O livro Use a Cabea! HTML com CSS eXHTML tambm serviu de embasamento paraa construo desta apresentao: FREEMAN Eric & FREEMAN Elisabeth. Use a

    Cabea! HTML com CSS e XHTML. Alta Books, 1Edio, 2006.

  • 5/20/2018 CSS 06 Posicionamento Layout

    4/48

    Fluxos Fluxo

    Forma como so dispostos na pgina os elementos embloco ou inline.

    Fluxo Normal

    Elementos em bloco Fluem de cima para baixo, com uma quebra de linha entre os

    elementos.

    Por padro, cada elemento em bloco ocupa a largura inteira dajanela do navegador.

    Elementos em linha Fluem dentro do elemento de bloco do topo esqueda at o

    fundo direita da pgina.

    Se mais de uma linha for necessria, o navegador cria umanova linha e expande o elemento em bloco verticalmente para

    conter os elementos inline.

  • 5/20/2018 CSS 06 Posicionamento Layout

    5/48

    Fluxos

    Fluxo Float

    Elementos saem do fluxo normal e podem serdispostos esquerda ou direita.

    Elementos em linha respeitam os limites de umelemento float e fluem ao redor dele.

    Posicionamento absoluto

    Os elementos assim definidos saem do fluxonormal e so posicionados de acordo com osvalores definidos.

  • 5/20/2018 CSS 06 Posicionamento Layout

    6/48

    Dica

    Colocar uma borda ao redor dos elementos facilita aobservao de como funciona o posicionamento.

  • 5/20/2018 CSS 06 Posicionamento Layout

    7/48

    position - propriedades

    static (padro) Posiciona o elemento no fluxo normal da pgina e no permite ajustes

    externos.

    absolute

    Posiciona o elemento em qualquer local da pgina.

    Posio relativa s laterais da pgina ou ao primeiro elemento posicionado(no static) no qual esteja contido.

    O espao original do elemento liberado para ocupao dos demais elementos.

    fixed

    Posiciona o elemento relativo janela do navegador e no move quando ocorre

    rolagem da pgina. relative

    O elemento colocado em sua posio normal na pgina e, depois, deslocadode acordo com os valores definidos, deixando vazio o espao onde ele ficaria.

    Esse espao passa a ser ocupado pelos demais elementos.

    inherit

    Valor da posio herdado do elemento pai.

  • 5/20/2018 CSS 06 Posicionamento Layout

    8/48

    position

    As propriedades top, left,bottom e right so usadas paraposicionar elementos nas posies absolute, fixed erelative.

    tope left so mais usadas.

  • 5/20/2018 CSS 06 Posicionamento Layout

    9/48

    position

    absolute

    Corre com os elementos da pgina em caso derolagem de tela.

  • 5/20/2018 CSS 06 Posicionamento Layout

    10/48

    position

    fixed

    Semelhante ao absolute.

    A diferena que ele fica fixo, mesmo em caso derolagem de tela.

  • 5/20/2018 CSS 06 Posicionamento Layout

    11/48

    position

    fixed

  • 5/20/2018 CSS 06 Posicionamento Layout

    12/48

    position

    fixed

  • 5/20/2018 CSS 06 Posicionamento Layout

    13/48

    z-index Elementos posicionados (absolute, relative ou

    fixed) podem ser colocados em camadassobrepostas umas sobre as outras atravs dapropriedade z-index.

    Permite definir a ordem de posicionamento doselementos em uma pilha.

    Assim possvel definir que um elemento fique nafrente ou atrs de outro.

    O elemento que usa z-index no pode estar usandoo posicionamento padro (static).

    Quando maior o valor, mas frente o elementofica (mais prximo da tela).

  • 5/20/2018 CSS 06 Posicionamento Layout

    14/48

    z-index

    Valores possveis:

    auto(padro)

    Valor igual ao dos elementos pais.

    valor

    Ordem do elemento na pilha.

    Nmeros negativos so permitidos.

    inherit

    z-index herdado do elemento pai.

  • 5/20/2018 CSS 06 Posicionamento Layout

    15/48

    z-index

    Exemplo:

    img {

    position:absolute;left:0px;

    top:0px;

    z-index:-1;

    }

  • 5/20/2018 CSS 06 Posicionamento Layout

    16/48

    float

    Faz com que os elementos flutuem na pgina de acordocom determinada poltica

    O mesmo design pode ser obtido usando elementosposicionados de forma absoluta ou float.

    Posicionamento float uma soluo flexvel para layoutsmulti-colunas e permite que elementos limpem elementosao seu lado.

    Funciona para o elemento onde for declarada.

    Box retirado da sua posio normal do fluxo dodocumento.

    O elemento seguinte ocupa a vaga onde estava oelemento que est usando float.

  • 5/20/2018 CSS 06 Posicionamento Layout

    17/48

    float

    Um elemento float normalmente deve ter uma largura(width) especfica declarada com um valor diferente deauto.

    Valores possveis: left

    O elemento flutua para a esquerda.

    right

    O elemento flutua para a direita

    none(padro)

    O elemento no flutua e ser exibido de acordo com o fluxonormal do navegador.

    inherit

    O valor deve ser herdado do elemento pai.

  • 5/20/2018 CSS 06 Posicionamento Layout

    18/48

    float

    Exemplo:

    p {

    float: left;

    }

    Flutuar para a esquerda.Deixa elementos um ao lado do outro.

  • 5/20/2018 CSS 06 Posicionamento Layout

    19/48

    float

    Exemplo:

    img {

    float: right;

    }

    Flutuar a imagem para a direita dentro do elementoonde ela est inserida.

  • 5/20/2018 CSS 06 Posicionamento Layout

    20/48

    float

    Exemplo:

    span.destaque {

    width: 40%;

    float: right;

    background-color: #888;

    border: 1px solid black;}

  • 5/20/2018 CSS 06 Posicionamento Layout

    21/48

    clear

    Especifica que nenhum elemento float possaficar esquerda ou direita (ou ambos) de umelemento em bloco.

    O elemento com essa propriedade ser movidopara baixo at se livrar do elemento em bloco aoseu lado.

  • 5/20/2018 CSS 06 Posicionamento Layout

    22/48

    clear

    Valores possveis: left No permite elementos float do lado esquerdo.

    right

    No permite elementos float do lado direito. both

    No permite elementos float em nenhum lado(esquerdo ou direito).

    none(padro) permite elementos float em ambos os lados

    (esquerdo e direito)

    inherit

    Valor herdado do elemento pai.

  • 5/20/2018 CSS 06 Posicionamento Layout

    23/48

    Layout

    Dividir a pgina em reas usando o elemento divdo HTML.

    Cada rea deve ter um nome bem representativoe no vinculado a informaes sobre o estilo ouposicionamento a ser aplicado.

    O estilo e o posicionamento podem ser

    modificados e o nome dado pode perder o sentidooriginal.

    Exemplos de bons nomes:

    geral, container, menu, conteudo, destaque, rodape,footer, blogs, topo, centro, center, etc.

  • 5/20/2018 CSS 06 Posicionamento Layout

    24/48

    Layout

    Estruturar as reas que esperamos no nossolayout.

  • 5/20/2018 CSS 06 Posicionamento Layout

    25/48

    Classificao dos layouts Nmero de colunas

    Largura da pgina

    Fixa A largura fixa e no se expande ou se encolhe de acordo com

    a janela do navegador.

    Melhor controle do design.

    Lquida O contedo da pgina se expande para se ajustar pagina de

    acordo com as dimenses da janela do navegador. Elstica

    A largura fixa, mas as margens se expandem ou se encolhemde acordo com a janela do navegador.

    Normalmente posiciona o contedo no centro da pgina.

  • 5/20/2018 CSS 06 Posicionamento Layout

    26/48

    Layout de largura fixa

    #container {

    border: 1 px solid black;

    width: 500px;}

  • 5/20/2018 CSS 06 Posicionamento Layout

    27/48

    Layout de largura lquida

    #container {

    border: 1 px solid black;

    width: 80%;min-width: 300px;

    }

  • 5/20/2018 CSS 06 Posicionamento Layout

    28/48

    Layout de largura lquida

    * {

    font-size: 14px;

    }

    #container {

    border: 1 px solid black;

    width: 40em;

    }

  • 5/20/2018 CSS 06 Posicionamento Layout

    29/48

    Centralizao do layout

    #container {border: 1 px solid black;

    width: 80%;

    margin: 0 auto;}

    #container {

    border: 1 px solid black;width: 500px;

    margin: 0 auto;

    }

  • 5/20/2018 CSS 06 Posicionamento Layout

    30/48

    Exerccio

  • 5/20/2018 CSS 06 Posicionamento Layout

    31/48

    Exerccio

  • 5/20/2018 CSS 06 Posicionamento Layout

    32/48

    Construo de layouts

    Construa cada passo por etapas bem definidas eao concluir, teste em diferentes navegadores.

    Desenvolva para os navegadores modernos edepois adapte para os antigos.

    Na fase de desenvolvimento e testes coloque afolha de estilos na seo HEAD da pgina.

    Valide seu cdigo HTML e CSS.

  • 5/20/2018 CSS 06 Posicionamento Layout

    33/48

    Construo de layouts

  • 5/20/2018 CSS 06 Posicionamento Layout

    34/48

    Construo de layouts

    Passos:

    1. Escolher os containers de layout

  • 5/20/2018 CSS 06 Posicionamento Layout

    35/48

    Construo de layouts

    Passos:

    2. Nomear os containers

  • 5/20/2018 CSS 06 Posicionamento Layout

    36/48

    Construo de layoutsPassos:

    3. Criar a marcao

    Page title

  • 5/20/2018 CSS 06 Posicionamento Layout

    37/48

    Construo de layoutsPassos:

    4. Inserir contedo

    5. Posicionar os containers

    body {

    margin: 0;padding: 0;

    background: #ddd;

    }

    #container {

    margin: 1em auto;

    width: 650px;

    background: #fff;

    }

    #header {background: #CF3;}

    #mainnav {background: #9F3; }

    #menu {

    float: right;

    width: 165px;

    background: #6F9;

    }

    #contents {

    float: left;

    width: 440px;

    background: #9FC;

    margin: 0 0 0 20px;

    }

    #footer {

    clear: both;

    background: #FF9;}

  • 5/20/2018 CSS 06 Posicionamento Layout

    38/48

    Construo de layouts

  • 5/20/2018 CSS 06 Posicionamento Layout

    39/48

    Construo de layoutsPassos:

    6. Folha de estilo para impresso

  • 5/20/2018 CSS 06 Posicionamento Layout

    40/48

    Construo de layouts

    body {

    margin: 0;

    padding: 0;

    font: 100% arial, hevetica, sans-serif;

    color: #000;

    background-color: #fff;

    }

    a {color: #000;

    text-decoration: none;

    }

    #header { border-bottom: 1px solid #999; }

    #header h1 { color: #000; }

    #mainnav, #menu, .imagefloat, #skipmenu {

    display: none; }

    #menu ul {

    margin-left: 0;

    padding-left: 0;

    list-style-type: none;

    line-height: 165%;

    }

    #contents p { line-height: 165%; }

    .blogentry { border-bottom: 1px

    solid #999; }

    .blogentry ul {

    list-style-type: none;

    text-align: right;

    margin: 1em 0;

    padding: 0;font-size: 95%;

    }

    .blogentry li {

    display: inline;

    padding: 0 0 0 7px;

    }

    #footer {clear: both;

    color: #000;

    text-align: right;

    padding: 5px;

    font-size: 90%;

    border-top: 1px solid #999;

    margin-top: 2em;

    }

    6. Folha de estilo para impresso

  • 5/20/2018 CSS 06 Posicionamento Layout

    41/48

    Layout de 2 colunas

  • 5/20/2018 CSS 06 Posicionamento Layout

    42/48

    Layout de 2 colunas - HTML

  • 5/20/2018 CSS 06 Posicionamento Layout

    43/48

    Layout de 2 colunas - CSSdiv {

    border: 1px solid black;}

    #container {

    width: 600px;

    margin: 0 auto;

    }

    #header {

    height: 80px;

    background: #DDD;

    }

    #left {

    float: left;

    width: 130px;

    background: #666;

    }

    #content {

    float:right;width: 450px;

    }

    #footer {

    clear:both;

    background: #DDD;

    }

  • 5/20/2018 CSS 06 Posicionamento Layout

    44/48

    Layout de 3 colunas

  • 5/20/2018 CSS 06 Posicionamento Layout

    45/48

    Layout de 3 colunas - HTML

  • 5/20/2018 CSS 06 Posicionamento Layout

    46/48

    Layout de 3 colunas - CSSdiv {

    border: 1px solid black;}

    #container {

    width: 600px;

    margin: 0 auto;

    }

    #header {

    height: 80px;

    background: #DDD;

    }

    #left {

    float: left;

    width: 130px;

    background: #666;

    }

    #content {

    float:right;width: 450px;

    }

    #principal {

    float: left;

    width: 340px;

    }

    #right {

    float: right;

    width: 100px;

    }

    #footer {

    clear:both;

    background: #DDD;

    }

  • 5/20/2018 CSS 06 Posicionamento Layout

    47/48

    Bordas arredondadas e sombra

    com CSS3

  • 5/20/2018 CSS 06 Posicionamento Layout

    48/48

    Bordas arredondadas e sombra com

    CSS3#container {

    border: 2px solid;

    width: 200px;padding: 10px;

    border-radius: 10px;

    box-shadow: 10px 10px 5px #888;

    }