Rafael Metring 0 Denunciar post Postado Maio 8, 2007 Pessoal. Passei a noite inteira ( como podem ver são quase 5 da manhã ) me batendo tentando aprender css , pegando codigos de css dos sites, mas nada resolveu meu problema. Criei um site com aquela estrutura básica de cabecalho, tres colunas ( menu , conteudo , menu ) e rodapé. O problema que ocorre é o seguinte. O div conteudo está sem definição de largura, estou utilizando apenas as margens do tamanho dos divs MENU para que ele fique redimensionável. Ate ai ok, o problema é que não sei porque motivo, diminuindo mais que uns 70% da janela o div do meio para em baixo dos dois menus. Eu queria que ele fizesse igual quando eu montava com tabelas. Se o do meio der uma "engordadinha" empurra os demais para fora. Mas não consigo fazer isso. Peço encarecidamente a ajuda dos amigos do fórum para resolve este problema. Alterei todo meu layou e agora não tem volta. Segue Css e Htm da pagina. ***************************************************************************** <div id="Cabecalho">Cortei os codigos do cabecalho para não atrapalhar</div><div id="MenuSuperior">Aqui tem codigos de banco para montagem do menu , mas não interfere em nada, ja testei.</div><div id="container"> <div id="ColunaEsquerda">Aqui exibo meu menu lateral </div> <div id="ColunaDireita">Itens do menu da direita </div> /* o problema acontece aqui. Utilizei esta table com width 99% pois os codigos que vem dentro do ContentPlaceHolderse perdem se não tiverem uma tabela como base. Mas mesmo tirando a tabela e digitando um texto, quando apertar a tela ele joga isso para baixo dos dois divs. */ <div id="ColunaCentral"> <table id="TabelaConteudo" width="99%" border=1 > <tr> <td> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </td> </tr> </table> </div><div style="clear:both"/><div id="Rodape" runat="server"> <uc2:Rodape ID="Rodape1" runat="server" /></div></div> ***********************************CSS#Cabecalho { /*background-color:#6633FF*/} #ColunaEsquerda { float: left; padding: 5px 5px 5px 5px; width: 155px; /*background-color:#99CC66*/}#ColunaCentral { margin-left: 170px; margin-right: 170px; /*background-color:#006666;*/}#ColunaDireita { float: right; padding: 5px 5px 5px 5px; width: 155px;/* background-color:#0033CC*/ }#Rodape { padding-top: 10px; text-align: center; background-color:#666666; clear: both; position:relative;} Compartilhar este post Link para o post Compartilhar em outros sites
Kikitten 0 Denunciar post Postado Maio 8, 2007 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>||| N$S Buffet Infanti Domiciliar |||</title><style type="text/css">#geral {width:800px;}<!--Adcionei o geral... que engloba todo o site... você troca o 1024.... pela largura que você quer que seu site tenha-->#Cabecalho {width:800px;/*background-color:#6633FF*/}#ColunaEsquerda {float: left;padding: 5px 5px 5px 5px;width: 155px;/*background-color:#99CC66*/}#ColunaCentral {float:left;width:470px;}#ColunaDireita {float: right;padding: 5px 5px 5px 5px;width: 155px;/* background-color:#0033CC*/}#Rodape {padding-top: 10px;text-align: center;background-color:#666666;clear: both;}</style></head><body><div id="geral"><!--Inicio Div Geral--><div id="Cabecalho">Cortei os codigos do cabecalho para não atrapalhar</div><div id="MenuSuperior">Aqui tem codigos de banco para montagem do menu , mas não interfere em nada, ja testei.</div><div id="ColunaEsquerda">Aqui exibo meu menu lateral</div><div id="ColunaCentral"><asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>ooo</div><div id="ColunaDireita">Itens do menu da direita</div><!-- o problema acontece aqui. Utilizei esta table com width 99% pois os codigos que vem dentro do ContentPlaceHolderse perdem se não tiverem uma tabela como base. Mas mesmo tirando a tabela e digitando um texto, quando apertar a tela ele joga isso para baixo dos dois divs. --><div style="clear:both"/><div id="Rodape" runat="server"><uc2:Rodape ID="Rodape1" runat="server" /></div></div><!--Fim Div Geral--></div></body></html> Compartilhar este post Link para o post Compartilhar em outros sites
Kikitten 0 Denunciar post Postado Maio 8, 2007 Tem tutoriais que explicam como fazer com 3 colunas xD tava totalmente errado... 1- a div da coluna central devia estar entre as colunas esquerda e direita, se nom como vai saber de q lado q ela vai ficar?2- que padding era aquele x.x?3- estava faltando essa div GERAL que engloba o site todo...4- eu tirei a div que englobava os menus... não precisa.... já consertei o codigo e esta funcionando.5- ah eu tirei as tabelas... mas se precisar colocar... Compartilhar este post Link para o post Compartilhar em outros sites
Rafael Metring 0 Denunciar post Postado Maio 8, 2007 Tem tutoriais que explicam como fazer com 3 colunas xD tava totalmente errado... 1- a div da coluna central devia estar entre as colunas esquerda e direita, se nom como vai saber de q lado q ela vai ficar?2- que padding era aquele x.x?3- estava faltando essa div GERAL que engloba o site todo...4- eu tirei a div que englobava os menus... não precisa.... já consertei o codigo e esta funcionando.5- ah eu tirei as tabelas... mas se precisar colocar...Amigo, muito obrigado pela boa vontade em me ajudar.Confesso que começei a mexer nisso de tarde e vim até as 4 da manha, ja nem via letras mais no monitor.Eu procurei muito na internet ontem a noite achei varios exemplos e a ordem deles ( coluna esquerda, direta, centro ) estavam todos assim por isso deixei assim.Dos varios exemplos que peguei, todos quando eu diminui a tela, jogava algum dos tres itens citados, para baixo.Eu tentei pegar os css de sites como do imaster para estudar as divisões mas ai eram horas para localizar cada coisa. Desisti.Vou colocar o seu código no meu projeto e lhe informo do resultado.Muito obrigado. Leigo é fogo. Mexo com web a anos mas layout é meu ponto fraquissimo.Tableless então. não sei nada. Compartilhar este post Link para o post Compartilhar em outros sites
Giovani 104 Denunciar post Postado Maio 8, 2007 Rafael Metring, seja muito bem vindo ao fórum iMasters! A sua dúvida pode ser respondida lendo o link a seguir: Laboratório de Scripts (WS) / Layout fixo 3 colunas Caso queria aprender mais, pesquise no fórum que existe muita coisa. Abraço! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif Compartilhar este post Link para o post Compartilhar em outros sites
Rafael Metring 0 Denunciar post Postado Maio 8, 2007 Rafael Metring, seja muito bem vindo ao fórum iMasters! A sua dúvida pode ser respondida lendo o link a seguir: Laboratório de Scripts (WS) / Layout fixo 3 colunas Caso queria aprender mais, pesquise no fórum que existe muita coisa. Abraço! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif GIo, obrigado, mas meu layout nao é fixo. é variável e por isso o problema. Rafael Compartilhar este post Link para o post Compartilhar em outros sites
Rafael Metring 0 Denunciar post Postado Maio 8, 2007 Tem tutoriais que explicam como fazer com 3 colunas xD tava totalmente errado... 1- a div da coluna central devia estar entre as colunas esquerda e direita, se nom como vai saber de q lado q ela vai ficar? 2- que padding era aquele x.x? 3- estava faltando essa div GERAL que engloba o site todo... 4- eu tirei a div que englobava os menus... não precisa.... já consertei o codigo e esta funcionando. 5- ah eu tirei as tabelas... mas se precisar colocar... Kikitten Testei o seu layout mais o mesmo não funcionou como eu desejo. O meu site nao é com layout fixo. O lado esquerdo tem 155 pixels, o esquerdo também e o centro possui tudo que sobrar na tela. O problema é que ao diminuir a janela eu quero que ele va "pressionando" o centro até onde der. E quando chegar no limite máximo não permita diminuir mais e nem mexa no layout. Acontece que com o seu código, quando o meio chega no limite, ele joga o menu para baixo. Segue imagem do que ele faz: Tamanho correto : Compartilhar este post Link para o post Compartilhar em outros sites
Kikitten 0 Denunciar post Postado Maio 9, 2007 Bom isso só aconteceu se você mexeu no código que eu fiz... não entendi como você quer o layout mas a coluna esquerda e direita estão com 155px... e o centro está com o resto... de 800 - 155 - 155 - padding = 470pxNão sei fazer de outro jeito... a partir daqui não posso te ajudar... mas afinal fazendo do jeito que você quer... espremendo o centro acho que seu site não ia ficar nada bonito, mas é minha opnião... porque temos que pensar no usuário final. Compartilhar este post Link para o post Compartilhar em outros sites
Rafael Metring 0 Denunciar post Postado Maio 9, 2007 Bom isso só aconteceu se você mexeu no código que eu fiz... não entendi como você quer o layout mas a coluna esquerda e direita estão com 155px... e o centro está com o resto... de 800 - 155 - 155 - padding = 470pxNão sei fazer de outro jeito... a partir daqui não posso te ajudar... mas afinal fazendo do jeito que você quer... espremendo o centro acho que seu site não ia ficar nada bonito, mas é minha opnião... porque temos que pensar no usuário final.Não modifiquei nada em seu código.Abra ele em seu computador, insira bastante texto no meio dele e reduz a janela.O menu direito para em baixo dele. OBS : coloque cor nos div para "ver" o erroQuanto ao espremer, não sei se entendeu errado, mas todo site na internet faz isso.Abra o www.submarino.com.brPegue a janela e va reduzindo, ele vai "expremer" o centro até o minimo possivel, ai quando ficar tudo bem apertado aliele para de "expremer" e cria a barra de rolagemFaça o mesmo com o codigo que me passou.Ele vai expremer, expremer e............. vai jogar o menu direito la para baixo do centro.Rafael Compartilhar este post Link para o post Compartilhar em outros sites
marcelrizzo 0 Denunciar post Postado Maio 9, 2007 Bem, não sei se é o que você quer, mas testa esse aqui. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta name="GENERATOR" content="Microsoft FrontPage 6.0"><meta name="ProgId" content="FrontPage.Editor.Document"><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>Teste</title><style type="text/css">* {margin:0;padding:0;}body { background-color:#ffe4b5; font: 18px Arial, sans-serif; }#cabecalho{ background-image: url('imagens/cabecalho2_cima.jpg'); background-repeat: no-repeat; height:190px }#colunas{ margin-top:3px; background-color:#ffe4b5; }#esquerda{ width:100px; float:left; background-color:#ffcf70; border: black 1px solid; } #direita{ width:100px; float:right; background-color:#ffcf70; border: black 1px solid; }#centro{ margin-left:100px; margin-right:100px; }#conteudo{ border: black 2px solid; padding: 20px; background-color:#fff; text-align:justify; }#rodape{ background-color:#ffe4b5; margin-top:15px; text-align:center; }</style></head><body> <div id="cabecalho"> Cabeçalho </div> <div id="colunas"> <div id="esquerda"> Coluna Esquerda </div> <div id="direita"> Coluna Direita </div> <div id="centro"> <div id="conteudo"> Conteúdo </div> </div> </div> <div id="rodape"> Rodapé </div></body></html> Ele também joga as coisas para baixo se você reduzir muito a resolução. Acho que para resolver isso só com JavaScript. Mas não tenho certeza.Boa tarde. Compartilhar este post Link para o post Compartilhar em outros sites
Rafael Metring 0 Denunciar post Postado Maio 9, 2007 Vou testar o código, obrigado.Quanto ao JS , acho que não é não, pois o ajuste não é fixo , tipo, ao carregar a página ajuste tudo.Se você ver pelo submarino , ele faz os ajustes na hora, enquanto movimetamos a janela.A não ser que existam eventos do tipo , onResizeWindow , mas não sei.Creio eu que é apenas um bom css.Obrigado Bem, não sei se é o que você quer, mas testa esse aqui. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta name="GENERATOR" content="Microsoft FrontPage 6.0"><meta name="ProgId" content="FrontPage.Editor.Document"><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>Teste</title><style type="text/css">* {margin:0;padding:0;}body { background-color:#ffe4b5; font: 18px Arial, sans-serif; }#cabecalho{ background-image: url('imagens/cabecalho2_cima.jpg'); background-repeat: no-repeat; height:190px }#colunas{ margin-top:3px; background-color:#ffe4b5; }#esquerda{ width:100px; float:left; background-color:#ffcf70; border: black 1px solid; } #direita{ width:100px; float:right; background-color:#ffcf70; border: black 1px solid; }#centro{ margin-left:100px; margin-right:100px; }#conteudo{ border: black 2px solid; padding: 20px; background-color:#fff; text-align:justify; }#rodape{ background-color:#ffe4b5; margin-top:15px; text-align:center; }</style></head><body> <div id="cabecalho"> Cabeçalho </div> <div id="colunas"> <div id="esquerda"> Coluna Esquerda </div> <div id="direita"> Coluna Direita </div> <div id="centro"> <div id="conteudo"> Conteúdo </div> </div> </div> <div id="rodape"> Rodapé </div></body></html>Ele também joga as coisas para baixo se você reduzir muito a resolução. Acho que para resolver isso só com JavaScript. Mas não tenho certeza.Boa tarde. Compartilhar este post Link para o post Compartilhar em outros sites
Kikitten 0 Denunciar post Postado Maio 9, 2007 Olha você tem razão mas o site que eu fiz também faz isso...até esse tutorial que te passaram ai encima faz isso... mas desisto de responder porque você está fazendo testes que não vão acontecer na realidade afinal você não vai escrever uma linha assim : "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" sem nenhum espaçamento, por que com espaçamento ele não fez isso nenhuma vez........ assim como você quer espremer o conteudo do meio... seu site vai ficar desestruturado.Espero que ache a solução.... mas creio que não vai adiantar nada. Compartilhar este post Link para o post Compartilhar em outros sites
Rafael Metring 0 Denunciar post Postado Maio 9, 2007 Olha você tem razão mas o site que eu fiz também faz isso...até esse tutorial que te passaram ai encima faz isso... mas desisto de responder porque você está fazendo testes que não vão acontecer na realidade afinal você não vai escrever uma linha assim : "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" sem nenhum espaçamento, por que com espaçamento ele não fez isso nenhuma vez........ assim como você quer espremer o conteudo do meio... seu site vai ficar desestruturado.Espero que ache a solução.... mas creio que não vai adiantar nada.KikitenO seu exemplo não fez sentido, eu não quero usar um aaaaaaaaaaaaaaaaaaaaaaaaa, sem quebra.Eu tenho dentro do div 3 fotos de produtos dentro de uma tabela.Essa tabelas estão coloridas e eu consigo ver que elas não utilizam o espaço necessário, tem sobraO div por padrão deve ter uns 700 pixels , se eu setar este div central com 400 pixels ainda assim cabe todas as fotos dentro sem problemas.Mas só se eu setar na mão.Se eu vier reduzindo a tela até chegar a proximo a 500 pixels ele ja joga tudo la para baixo ( e tem espaço para ele redimensionar ) Todos os scripts enviados faz isso, mas porque o submarino não faz ?O que eu quero tem sentido sim e muito.. é uma loja virtual com produtos, estes produtos não ocupam mais que 300 pixels e devem ser distribuidos desde os 300 até uns 700 pixels ( tela ampliada ), obviamente sem desalinhar nada.Observe o site www.submarino.com.br e reduza a janela. Ele consegue reduzir tudo desde 800X600 até 1000 e poucos pixels sem problemas, deixando apenas o espaçamento correto entre os produtos.Rafael Compartilhar este post Link para o post Compartilhar em outros sites
marcelrizzo 0 Denunciar post Postado Maio 9, 2007 Eu fiz uns testes aqui. No FF ele faz o que você quer automaticamente (pelo menos num layout que eu testei) No IE que ele dá problema. Pesquisando no código do Submarino, eu ví coisas interessantes que eu nunca tinha visto, pode ser relacionado. Mas nos meus testes não resolveram o problema no layout que eu testei. Olhe: /*** GERAL ***/body, dd, dl, dt, form, img, ul, h1, h2, p, fieldset, a { text-decoration:none; margin:0; padding:0; border:none; }body <strong class='bbc'>{ min-width: 775px; }</strong>img.ms_imghover { cursor:hand; }#geral { margin:0, auto; }#geral, #topnav2006 <strong class='bbc'>{ width: expression(document.body.clientWidth < 780 ? '775px' : 'auto' ); }</strong>#servicestopnav2006 { text-align:right; }#bgtopnav2006 { height:150px; } Compartilhar este post Link para o post Compartilhar em outros sites
marcelrizzo 0 Denunciar post Postado Maio 9, 2007 Achei um site interessante.Olha isso aqui:://www.plugmasters.com.br/sys/materias/395/1/10-Dicas-de-CSS,-parte-1 Compartilhar este post Link para o post Compartilhar em outros sites
marcelrizzo 0 Denunciar post Postado Maio 9, 2007 Dá certo! Eu consegui fazer.É isso aqui que faz funcionar. <style type="text/css">#container{min-width: 600px;width:expression(document.body.clientWidth < 600? "600px": "auto" );}</style></head><body><div id="container">Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu Eu sou Eu </div></body> FalowBoa noite Compartilhar este post Link para o post Compartilhar em outros sites
Rafael Metring 0 Denunciar post Postado Maio 9, 2007 min-width ?!?!?!Nunca tinha visto isso e ia até perguntar hoje se não existia algo do gênero.Vou testar ja. Derrepente é a solução.Determino o minimo e pronto.Maravilha, espero que funcione.Obrigado Eu fiz uns testes aqui.No FF ele faz o que você quer automaticamente (pelo menos num layout que eu testei)No IE que ele dá problema.Pesquisando no código do Submarino, eu ví coisas interessantes que eu nunca tinha visto, pode ser relacionado. Mas nos meus testes não resolveram o problema no layout que eu testei.Olhe: /*** GERAL ***/body, dd, dl, dt, form, img, ul, h1, h2, p, fieldset, a { text-decoration:none; margin:0; padding:0; border:none; }body <strong class='bbc'>{ min-width: 775px; }</strong>img.ms_imghover { cursor:hand; }#geral { margin:0, auto; }#geral, #topnav2006 <strong class='bbc'>{ width: expression(document.body.clientWidth < 780 ? '775px' : 'auto' ); }</strong>#servicestopnav2006 { text-align:right; }#bgtopnav2006 { height:150px; } Compartilhar este post Link para o post Compartilhar em outros sites
Guilherme Rambo 4 Denunciar post Postado Maio 10, 2007 min-width naum funciona no IE6 :)[]'s Compartilhar este post Link para o post Compartilhar em outros sites
marcelrizzo 0 Denunciar post Postado Maio 10, 2007 Tem o hack ali em cima, inside.:) Compartilhar este post Link para o post Compartilhar em outros sites
Rafael Metring 0 Denunciar post Postado Maio 10, 2007 MarcelDa uma ajuda para o leigo aqui.Hack seria uma forma "alternativa" para fazer alguma coisa correto ?Ali em cima esta apenas o min-width, que como foi citado não roda no ie6.O que seria o hack no caso ?O que faz isso ai funcionar no ie6 Tem o hack ali em cima, inside.:) Compartilhar este post Link para o post Compartilhar em outros sites
