Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Desenvolvendo um layout liquido.


vini_loock

Pergunta

Olá!

Eu to tendo um probleminha com um layout que não fica de jeito nenhum como eu quero.

O problema ta na parte do topo, como é layout liquido eu não posso definir position: absolute, e também nem é viavel nesse caso.

O resultado esperado é +/- isso:

|-----------|----------------------------------------------------|

| LOGO | PUBLICIDADE |

| |_____________________________________|

|________|___MENU___|___BUSCA___|___MENU______|

Eu tentei de varias formas, a que eu tinha certeza de que ia funcionar, adivinha... a mesma coisa, eu até consegui fazer um bem próximo do que eu quero, mas ele não funcionou bem no IE, mas também não adiantou nada, pois usei position: absolute;

O teste mais apresentavel é esse:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sem t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
    
    *{margin: 0px; padding: 0px;}
    
    #global{float: center;}
    
        #topo{float: center;}
        
            #topo #logo{float: left; width: 200px;}
            
            #topo #resto{float: center; margin: 0 0 0 200px;}
            
                #resto #cima{float: center;}
                    #resto #publicidade{float: right; width: 700px; height: 70px; border: 1px solid black;}
                
                #resto #menu{float: center;}
                
                    #resto #menu #m-left{float: left;}
                        #resto #menu #m-left li{display: inline;}
                        
                    #resto #menu #m-center{float: left;}
                    
                    #resto #menu #m-right{float: right;}
                        #resto #menu #m-right li{display: inline;}
    
</style>
</head>
<body>

<div id="global">
    <div id="topo">
        <div id="logo"><a href="#"><img src="" width="180" height="90" border="0"></a></div>
        <div id="resto">
            <div id="cima">
                <div id="publicidade"></div>
            </div>
            <div id="menu">
                <div id="m-left">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Anuncie</a></li>
                        <li><a href="#">Cadastrar</a></li>
                        <li><a href="#">Login</a></li>
                    </ul>
                </div>
                <div id="m-center">
                    <form><input type="text"><input type="submit"></form>
                </div>
                <div id="m-right">
                    <ul>
                        <li><a href="#">Quem somos</a></li>
                        <li><a href="#">Fale conosco</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

Como miha tentativa de 'explicação' em texto ficou completamente desalinhada, fiz uma imagen demostrando, ficou até melhor que o texto xD

http://img687.imageshack.us/img687/46/45734795.png

Só lembrando... não vai ser com width definido!

Conto com a ajuda de vocês!

Vlw

Editado por vini_loock
Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0

kkkk.

Sabia que isso ia acontecer.

Mas... problema resolvido.

ficou assim:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sem t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
    *{margin: 0px; padding: 0px;}
    #global{float: center;}
        #topo{float: center;}
            #topo #logo{float: left; width: 200px;}
            #topo #resto{float: center; margin: 0 0 0 200px;}
                #resto #cima{float: center; background-color: #ff0000; height: 100px;}
                #resto #menu{float: center; background-color: #0000ff; height: 50px;}
                #m-left{float: left;}
                    li{display: inline;}
                a{color: #fff;}
                #m-center{float: left;}
                #m-right{float: left;}
</style>
</head>
<body>
<div id="global">
    <div id="topo">
        <div id="logo"><a href="#"><img src="" width="180" height="90" border="0"></a></div>
        <div id="resto">
            <div id="cima">
                <div id="publicidade"></div>
            </div>
            <div id="menu">
                <div id="m-left">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Anuncie</a></li>
                        <li><a href="#">Cadastrar</a></li>
                        <li><a href="#">Login</a></li>
                    </ul>
                </div>
                <div id="m-center">
                    <form><input type="text"><input type="submit"></form>
                </div>
                <div id="m-right">
                    <ul>
                        <li><a href="#">Quem somos</a></li>
                        <li><a href="#">Fale conosco</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Vlw

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...