locked
Ajudinha com CSS RRS feed

  • Pergunta

  • Bom dia pessoal,estou iniciando um pequeno aplicativo web e pensei em um layout, mas infelizmente não estou conseguindo passar a idéia para o css, então resolvi pedir ajuda aos mais intimos com o css.

    A idéia é a seguinte:
    Um site para resolução de 1024x768 e que fique centralizado (somente na horizontal) em resoluções maiores.
    o site tem 4 áreas:
    - logo 980x60 (centralizado e alinhado ao topo)
    - menu 980x24 (centralizado e alinhado abaixo do logo)
    - fundo da tela (que é tudo que sobrar)
    - janela que vai ter tamanho variado e tem que ficar centralizado (horizontal e vertical) dentro do "fundo da tela"

    Espero que eu tenha sido claro na explicação.


    -----------------------------------------------
    | LOGO                                        |
    |                                             | 
    ----------------------------------------------- 
    | MENU                                        | 
    ----------------------------------------------- 
    |                                             | 
    |              FUNDO DA TELA                  | 
    |      ---------------------------------      | 
    |      |                               |      | 
    |      |                               |      | 
    |      |     JANELA                    |      | 
    |      |                               |      | 
    |      |                               |      | 
    |      |                               |      | 
    |      ---------------------------------      | 
    |                                             | 
    |                                             | 
    ----------------------------------------------- 

    quarta-feira, 25 de março de 2009 11:14

Todas as Respostas

  • Bom, vamos lá...

    Na div que contem todas essas outras div dentro delas, no caso, uma div_principal do site, vc coloca o seguinte atributo:

    .div_principal{
           margin: 0 auto;
    }


    Isso irá centralizar a página. Só que no IE não vai, então tem que usar um hack na body pro IE:

    body{
       text-align:center; /* hack para o IE */
    }


    Ai surge um outro problema: todos os texto do seu site ficaram centralizado. Então damos um "remédio" para o hack do IE.

    .div_principal{
       margin: 0 auto;
       text-align:left; /* "remédio" para o hack do IE */
    }


    Pronto! Página centralizada!
    • Sugerido como Resposta Xakkal86 sábado, 4 de abril de 2009 20:54
    sábado, 4 de abril de 2009 20:54
  • Talvez esta ferramenta te ajude na tarefa

    Abraços,
    sábado, 25 de julho de 2009 17:03
  • Olá amigo caso seja util marque como respondida.


    <html>
              <title>Meu site</title>
              <head>
              <style type="text/css">
                                       *{
    margin:0;   
    padding:0;
    }
    #img{
    background-color:orange;
    margin:0;
    }

    form{
        margin:30px 20px;

       
    }

    #menu ul{list-style:nome}

    #menu ul li{display:inline;}
    #menu ul li a{
    font:13px verdana, arial tahoma, sans-sirif;
    color:#000;
    background-color:#d9d9d9;
    text-decoration:none;
    float:left;
    margin-left:1px;
    padding:5px 10px;
    }
    #menu{
    background:#002e66;
    display:table;
    width:100%;
    }
    #menu ul li a:hover{
    background-color:#002e66;
    color:white;

    }
    #janela{
    margin:40px 90px;
    background-color:orange;
    width:800px;
    height:600px;
    text-align:center;


    }
              </style>
            
              </head>
    <body>
               <div id="img">
                      <img src="crome.jpg" title="minha img"/>
                      </div>
                      <div id="menu">
                      <ul>
                         <li><a href="#">home</a></li>
                         <li><a href="#">Sobre</a></li>
                         <li><a href="#">Agenda</a></li>
                         <li><a href="#">Fotos</a></li>
                         <li><a href="#">Contato</a></li>
                         <li><a href="#">Download</a></li>
         </div>
                      <div id="janela">
                                      <h1>Minha Janela</h1>
                      </div>
                          
                </div>
    </body>
    </html>






    Legend Of Zelda N64,Gc,wii
    • Sugerido como Resposta Juliano Sales sábado, 27 de fevereiro de 2010 20:30
    sábado, 27 de fevereiro de 2010 20:04
  • Também sugiro o Grid960, um framework CSS que torna as coisas mais fáceis (eu acho).
    Coragem não é ausência de medo e sim o controle dele. Cursando Tecnologia em Análise e Desenvolvimento de Sistemas - Unopar
    quinta-feira, 14 de outubro de 2010 13:55