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

Como centrar DIVs

Discussão em 'Web Development' iniciada por peter alien, 25 de Novembro de 2007. (Respostas: 12; Visualizações: 5505)

  1. peter alien

    peter alien Power Member

    Alguém me pode dizer como é que coloco dois DIVs lado a lado.

    No caso do meu código fiz isso para os DIVs "conteudo" e "fundo" ("fundo" é o background onde os botões vão acentar, e "conteudo" é o DIV onde irá aparecer o conteudo de cada opção do menu), o problema é que usei o float, e quando tento diminuir a janela do browser esses divs começam a descer, ou sejam já não ficam lado a lado.

    Alguem que me dê uma solução para isso, estou a usar o IE6. Obrigadão :)

    Fica aqui o código:

    Código:
     
    <style type=text/css>
    body {
    background-image: url(Imagens/BGGradiente.png);
    background-repeat: repeat-x;
    background-position: center;
    background-color: #000000;
    }
    #header {
    width: 950px;
        height: 169px;
        background-image: url(Imagens/Header.jpg);
    }
    #fotos {
    width: 950px;
    height: 79px;
    background-image: url(Imagens/Fotos.jpg);
    }    
    #fundo {
    width: 236px;
        height: 393px;
        margin-left: 8px;
        float:left;
        background-image: url(Imagens/Fundo.jpg);
    }     
    #conteudo {
    width: 714px;
        height: 393px;
        float:left;
        background-image: url(Imagens/Conteudo.jpg);
    }     
    #footer {
    width: 950px;
        height: 47px;
        background-image: url(Imagens/Footer.jpg);
    }     
    </style>
    </head>
    <body>
    <center>
    <div id="header"></div>    
    <div id="fotos"></div>    
    <div id="fundo"></div>
    <div id="conteudo"></div>    
    <div id="footer"></div>    
    </center>
    </body>
    </html>
    
     
    Última edição pelo moderador: 26 de Fevereiro de 2009
  2. BMCouto

    BMCouto Power Member

    Basicamente IE 6 para CSS sucks, mas estás a definir sempre o width o que normalmente é um dos motivos para esse problema, se queres centrar mete:
    margin-left: auto;
    margin-right: auto;
    Depois é sempre boa politica teres uma classe container que como indica o nome contem tudo, assim mais facilmente controlas a posiçao de tudo, para por exemplo se quiseres centrar, ou seja o que for.
    Outra coisa é teres atenção ao uso do float: queres mesmo todas aquelas div's com float: left? Podes ter uma só com float left e a outra não. Tenta definir sempre as posições também, pelo menos left e top relativo à div em que está.
    Vê também o parametro "position", não sei o que queres fazer, mas provavelmente umas serão de posição absoluta e outras relativa... enfim basicamente dá uma olhada aqui e tenta perceber as coisas primeiro:
    http://www.w3schools.com/css/
    Qualquer dúvida apita, mas tenta por um rascunho de como queres as div's dispostas na página se não não sei o que queres...
     
  3. peter alien

    peter alien Power Member

    Já consegui :):):)


    Código:
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html charset=iso-8859-1">
    <style type=text/css>
    body {
    background-image: url(Imagens/BGGradiente.png);
    background-repeat: repeat-x;
    background-position: center;
    background-color: #000000;
    }
    #layout {
    width: 950px;
                height: 688px;
                margin: 0 auto;
    }
    #header {
    width: 950px;
                height: 169px;
                background-image: url(Imagens/Header.jpg);
    }
    #fotos {
    width: 950px;
             height: 79px;
             background-image: url(Imagens/Fotos.jpg);
    }    
    #fundo {
    float: left;
    width: 236px;
             height: 393px;
             background-image: url(Imagens/Fundo.jpg);
    }     
    #conteudo {
    float:left;
    width: 714px;
             height: 393px;
                 background-image: url(Imagens/Conteudo.jpg);
    }     
    #footer {
    width: 950px;
             height: 47px;
                background-image: url(Imagens/Footer.jpg);
    }     
    </style>
    </head>
    <body>
    <div id="layout">
    <div id="header"></div>    
    <div id="fotos"></div>    
    <div id="fundo">
    <img src="Imagens/Botao1.gif">
    </div>
    <div id="conteudo"></div>    
    <div id="footer"></div>    
    </div>
    </body>
    </html>
    
     
    Última edição pelo moderador: 26 de Fevereiro de 2009
  4. hYpe

    hYpe [email protected] Member

    A melhor maneira de centrar uma div (no ecran, p.e.) é:

    #container { position: absolute; left: 50%; width: 950px; margin-left: -475px; border: 0; }

    Sendo que neste caso a página tem 950 de largura total.
    Se for por exemplo 500, tem q ser width: 500px ; margin-left: -250px !

    Cumps
     
  5. nothing

    nothing Power Member

    pois, agora a moda a nível de centrar com css's é margens negativas. Verticalmente também funciona.
     
  6. BMCouto

    BMCouto Power Member

    Isto não é moda, és estupidez (desculpem mas é lol), alias nunca precisei de fazer isto...aliás isso nem é validado lol
     
  7. hYpe

    hYpe [email protected] Member

    Div's que levam o site todo.

    Se é estupidez, por favor ilumina-nos com a tua sabedoria.
     
  8. K0mA

    K0mA Power Member

    Centrar um div na horizontal é assim :


    #divcentrado {
    margin: 0 auto;
    }
     
    Última edição: 5 de Janeiro de 2009
  9. BMCouto

    BMCouto Power Member

    Exacto ou isso ou margin-left: auto; margin-right: auto; ambos os modos funcionam e são validados... por isso quem ilumina não sou eu como tu dizes mas sim o W3C que não "ensina" nem valida a usar margens negativas...
     
  10. ninja_corp

    ninja_corp Power Member

    margin: 0 auto 0 auto;
     
  11. Sa[n]dman

    Sa[n]dman Power Member

    Estranhamente nenhum dos margin funca :S tentei:
    "margin: 0 auto 0 auto;"
    "margin: 0 auto;"
    "margin-left: auto; margin-right: auto;"

    e nada. Com o left e o margin-left negativo consegui nos browsers todos menos o IE :S
    Algumas sugestões?
     
  12. K0mA

    K0mA Power Member

    Foste desenterrar isto!!!
    Este assunto já foi discutido aqui.
    A minha resposta está aqui.
     
  13. Sa[n]dman

    Sa[n]dman Power Member

    Só fui desenterrar isto porque ao fazer uma pesquisa no fórum foi das primeiras respostas que me deu.

    Cumps
     

Partilhar esta Página