Jump to content
Fórum Script Brasil
  • 0

(Resolvido) Desenvolvendo um layout liquido.


vini_loock
 Share

Question

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

Edited by vini_loock
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 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 to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Forum Statistics

    • Total Topics
      149.6k
    • Total Posts
      646.2k
×
×
  • Create New...