1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Layout c/ CSS

Discussão em 'Programação' iniciada por Neojag, 16 de Novembro de 2005. (Respostas: 2; Visualizações: 1026)

  1. Neojag

    Neojag Power Member

    Estou com um pequeno problema.
    Preciso de fazer um layout com 3 linhas: uma horizontal com 418px de altura (fixos), centrada verticalmente, e uma acima e abaixo ocupando o espaço restante (com alturas iguais). Preciso que seja um layout líquido, que se adapte ao tamanho da janela do browser tendo um mínimo de 418px de altura.
    Sendo uma coisa facílima de fazer com tabelas, não estou a conseguir fazer isto com css. Tenho 4 divs (content, que tem tudo, e depois top, middle, e bottom). Consegui definir as margens direitas, os comprimentos também, e a altura do div do meio, mas não consigo centrar o middle verticalmente nem fazer com o que outros dois ocupem o restante espaço.

    Os estilos são

    Código:
    body {
        margin: 0;
        padding: 0;
        background:#161616;
    	color: white;
    }
    
    #content {
    	background: #2e2e2e;
    	width: 100%;
    	height: 100%;
    	vertical-align: middle;
    	
    }
    
    #top {
    	background: red;
    	margin-bottom: 1px;
    }
    
    #splash {
    	background: green;
    	height: 418px;
    	width: 100%;
    }
    
    #bottom {
    	background: blue;
    	margin-top: 1px;
    
    E o que tenho fica assim:

    [​IMG]

    Pretendo obter isto:

    [​IMG]

    As cores são puramente representativas :P
    Uma ajudinha para o conservador das tabelas que se está a actualizar! :D
    Obrigado
     
    Última edição: 16 de Novembro de 2005
  2. dElpH!

    dElpH! 1st Folding then Sex

    Nao podes por um no top e no bottom
    tipo
    height : 15%;
    em cada ?

    []'s
     
  3. Neojag

    Neojag Power Member

    Nope, preciso de um layout que se adapte ao tamanho da janela do browser (em que o div do meio fique sempre centrado).
    Posso usar uma tabela que contenha os divs todos e utilizar o valign de html. Já tentei e funciona, mas dá cabo do meu objectivo :P Por outro lado, isto parece funcionar:

    http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
     
    Última edição: 17 de Novembro de 2005

Partilhar esta Página