(Resolvido) Desenvolvendo um layout liquido.

vini_loock · Julho 7, 2010

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 |

| |_____________________________________|

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 Julho 7, 2010 por vini_loock

Thelon · Julho 7, 2010

sinceramente?

Não entendi NADA!

Upa ele ai em algum lugar

vini_loock · Julho 7, 2010

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

Thelon · Julho 7, 2010

continuo sem saber

mas beleza

vlw pela resposta

Entrar

(Resolvido) Desenvolvendo um layout liquido.

Pergunta

vini_loock

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

Thelon

Link para o comentário

Compartilhar em outros sites

vini_loock

Link para o comentário

Compartilhar em outros sites

Thelon

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades