vini_loock Postado Julho 7, 2010 Denunciar Share Postado Julho 7, 2010 (editado) 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í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 xDhttp://img687.imageshack.us/img687/46/45734795.pngSó lembrando... não vai ser com width definido!Conto com a ajuda de vocês!Vlw Editado Julho 7, 2010 por vini_loock Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Thelon Postado Julho 7, 2010 Denunciar Share Postado Julho 7, 2010 sinceramente?Não entendi NADA!Upa ele ai em algum lugar Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 vini_loock Postado Julho 7, 2010 Autor Denunciar Share Postado 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í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 Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Thelon Postado Julho 7, 2010 Denunciar Share Postado Julho 7, 2010 continuo sem sabermas belezavlw pela resposta Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
vini_loock
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:
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_loockLink para o comentário
Compartilhar em outros sites
3 respostass a esta questão
Posts Recomendados
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.