1. #1
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633

    Padrão Montar uma página com CSS V

    Para terminar, vamos criar um rodapé da página e uma borda que encaixe a página. Ofereceremos também umas conclusões do exercício.
    Por Miguel Angel Alvarez - Tradução de JML



    Apontaremos os últimos retoques no desenho da página com CSS para finalizar a seqüência de construção com CSS. Pode-se ver a primeira parte do artigo.

    Rodapé da página

    Não havíamos previsto este elemento na imagem original, criada previamente, mas decidimos colocá-lo porque o necessitamos, para que a parte onde está o corpo e a lateral, apareça o fundo de cor branca. No Explorer aparece o fundo branco sem nenhum, mas em Mozilla e outros navegadores, ao estar as duas camadas do corpo e da lateral "flutuando" à esquerda e à direita, não entende que deva manter o fundo branco definido no container.

    Não sabemos se isto pode ser entendido bem, mas o melhor é fazer uma proba e ver o que definimos até o momento na tela de Firefox ou Mozilla. Veremos que o fundo branco não continua até embaixo.

    <div id="pie">
    Probas de construção CSS © 2005 CriarWeb.com
    </div>

    Esta camada tem o seguinte estilo definido:

    #pie{
    clear : both;
    color : #cccccc;
    text-align : right;
    margin : 10px 10px 0px 10px;
    padding-bottom:10px;
    }

    Com "clear:both" indicamos que a camada deve se mostrar sem elementos flutuando à esquerda e à direita, de modo que a posição da camada será imediatamente abaixo da camada corpo e lateral.

    Logo, define-se uma cor para o texto, um alinhamento de texto, umas margens e uma margem interna pela parte debaixo de 10 pixel.


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  2. #2
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633
    A borda externa

    O desenho original incluía uma borda de 2 pixel rodeando toda a camada principal. Podemos fazer a prova de incluir uma borda na camada container. Para isso, há que acrescentar no estilo para a camada container o atributo border, da seguinte forma:

    #container{
    text-align: left;
    border: 2px solid #cccccc;
    width: 700px;
    margin: auto;
    background-color : #ffffff;
    }

    Em Mozilla e em navegadores similares, está tudo correto. Mas em Internet Explorer a coisa tem seu problema. Isto é devido ao espaço das bordas que no Explorer toma-se o que tenha sido atribuído à própria camada, e em Mozilla e outros navegadores, toma-se como espaço adicional, a parte do que tenha sido atribuído à camada em si.

    Nós resolvemos este problema tirando a borda na camada container e criando uma nova camada, na qual situaremos o container. Chamamos de borda a essa nova camada e é a que vai ter o estilo de borda definida.

    <div id="borda">
    <div id="container">
    .... conteúdo de toda a página
    </div>
    </div>

    Para conseguir a borda foi definido o seguinte estilo para camada borda:

    #borde{
    border: 2px solid #cccccc;
    text-align: left;
    width: 700px;
    margin: auto;
    }

    Primeiro, definimos uma borda de 2 pixel. Logo, centralizamos à esquerda para contrabalançar o centrado ao centro que tem o body e que havíamos posto para que Explorer centralizasse a camada do conteúdo. Também, se inclui uma largura de 700 pixel e uma margem "auto" para que Mozilla e os outros navegadores centralizem a camada.


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

Tags para este Tópico

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •  

Conectar

Conectar