Jair Humberto 2 Denunciar post Postado Agosto 10, 2008 Ola pessoal, ao criar uma div com width:100%, ela toma todo o tamanho da página. omitir o width, parece que dá o mesmo efeito, mas testei só no ie e ff. Mas existe um problema com essas duas formas. Se eu tiver uma página como essa abaixo: CODE <body> <div id="header"> </div> <div id="page-container"> </div> <div id="footer"> </div> </body> A div page-container tem width:750px. As outras divs têm width:100%. O problema ocorre quando eu redimensiono a janela do navegador para por exemplo 300px de largura. Aparece uma barra de rolagem horizontal, e eu posso percorrer toda a div page-container, só que as divs header e footer permanecem com 300px (100%) , criando um efeito diferente do esperado e quebrando o layout. Eu tentei resolver essa situação criando um pano de fundo para BODY e colocando repeat-x. assim daria o mesmo efeito. Mas essa solução não parece viável, pois se a página esticar, como vai ser o meu caso, há uma quebra novamente. tentei fazer isso: CODE html { background-image: url(../../images/default/layout/bg-header.jpg) ; background-repeat: repeat-x ; background-position: bottom ; } body { background-image: url(../../images/default/layout/bg-header.jpg) ; background-repeat: repeat-x ; background-position: top ; } só que so funciona no FF, no ie6 não funciona, porque o fundo de body encobre o fundo de html(mesmo que as imagens tenham só 50px de altura) Não estou sabendo como resolver isso. Alguém já teve esse problema e pode me ajudar? Obrigado. Compartilhar este post Link para o post Compartilhar em outros sites
Gui 0 Denunciar post Postado Agosto 10, 2008 Pq nao seta o width das divs header e footer em 750px tb? Compartilhar este post Link para o post Compartilhar em outros sites
William Bruno 1501 Denunciar post Postado Agosto 10, 2008 Veja que DIVs são elementos nivel de bloco. Ocupam 100% de width do pai a menos que você retire isso. Coloque on line para vermos tudo oque você fez. Compartilhar este post Link para o post Compartilhar em outros sites
Jair Humberto 2 Denunciar post Postado Agosto 11, 2008 Olá Gui, não é do meu gosto fazer isso, mas é ordem do patrão, pois o layout já está aprovado, e eu só estou reestruturando ele para tentar adequa-lo aos padrões, pois estava todo em tabelas. Olá Tiu uiLL, nesse link eu postei o exemplo que fiz acima: http://jairhumberto.890m.com/imasters/layout2/ tente redimensionar a janela e verá o que estou falando. se eu tirar o width, da o mesmo problema! Nunca fiz um layout assim, então essa é a primeira vez que vejo esse problema :\ Compartilhar este post Link para o post Compartilhar em outros sites
Jair Humberto 2 Denunciar post Postado Agosto 11, 2008 Olá pessoal, se existir alguma forma de fazer com que um background de um elemento não soberponha o outro no IE6, resolveria o problema. Eu tenho uma imagem de 50px de altura. Se eu puser essa imagem como fundo em HTML, e no topo. e puser essa mesma imagem em body e no rodape, então resolveria o problema. NO FF funciona. Mas no IE6 não, porque uma imagem sobrepõe a outra :\ Compartilhar este post Link para o post Compartilhar em outros sites
Jair Humberto 2 Denunciar post Postado Agosto 13, 2008 ninguém faz idéia de como resolver isso? :( Compartilhar este post Link para o post Compartilhar em outros sites
pauloedums 0 Denunciar post Postado Agosto 13, 2008 Olá Jair, Se você deseja separar os backgrounds sem repetir tente isso: body { background-image: url(../../images/default/layout/bg-header.jpg) ; background-repeat: no-repeat ; background-position: top ; } div#footer { background-image: url(../../images/default/layout/bg-header.jpg) ; background-repeat: no-repeat ; } Não recomendo o uso de códigos CSS em html, separe o arquivo e link via DW ou código. Abs Compartilhar este post Link para o post Compartilhar em outros sites
cassitos 2 Denunciar post Postado Agosto 13, 2008 o que ocorre é que quando a resolução definida no navegador é menor que a largura do container (760px) o navegador está exibindo a largura do topo e rodapé com os 100% de acordo com a largura da página (navegador), mas devido a largura do container o layout fica 'desalinhado', certo? bom... se for isso o que entendi... se não quer que aconteça que a largura destes seja menor que a largura do container, você pode ver se o atributo min-width no CSS serve para o teu caso. com ele você define a largura mínima de um elemento (mesmo que a largura 'original' tenha sido definida em outra métrica). por exemplo: você define a largura como 100%, mas quer que a largura seja no mínimo 760px. seria algo assim: .rodape { width: 100%; min-width: 760px; } infelizmente só tenho o FF e IE6, e no IE o min-width não funciona como o esperado (ou não funciona), então tem um Hack que você pode definir somente para o IE que seria algo assim: .rodape { width: 100% ; min-width: 760px; *width:expression(document.body.clientWidth < 760? "760px":"100%"); } não testei em outros navegadores que não sejam o FF 3 e IE6. eu particularmente não gosto de usar Hacks, mas ajudam um bucado enquanto não encontra-se outros métodos. http://perishablepress.com/press/2008/05/1...net-explorer-6/ Compartilhar este post Link para o post Compartilhar em outros sites
brcontainer 16 Denunciar post Postado Agosto 13, 2008 Jair Humberto é PROIBIDO FLOODS no forum. O width:100%; não funciona assim. É normal cobrir toda a area do naegador. Elementos que possuem display:block; não necessitam de width:; como por exemplo os DIVs Vou ver se depois consigo lhe ajudar. Compartilhar este post Link para o post Compartilhar em outros sites
Jair Humberto 2 Denunciar post Postado Agosto 13, 2008 Olá silverfox, desculpe pela infração, eu nem mesmo sabia o que era um flood :( quanto à resposta do cassito, acho que vai ajudar. vou testar, me parece ser muito lógica. Eu não tinha pensado nessa do min-width :) Vou testar e posto novamente -------------------------------------- Editado: Infelizmente não funcionou aqui. Deu o mesmo problema :( Compartilhar este post Link para o post Compartilhar em outros sites
cassitos 2 Denunciar post Postado Agosto 13, 2008 como ficou seu CSS com as novas alterações?posta ae p/ gente dar uma olhada. eu peguei o seu exemplo e fiz alguns testes, pode acessar aqui: http://201.8.125.182:8081/teste/teste.html ou http://cassitos2.ath.cx:8081/teste/teste.html. o que fiz foi fazer com que a largura mínima do topo/rodapé seja 760px. então se reduzir a tela, não vai ficar com aquele espaço em branco (em relação ao container) que fica atualmente. pelo menos no FF 3 e no IE6 que testei. mas é possível configurar para que a largura mínima seja maior que estes 760, basta definir no CSS os valores. Compartilhar este post Link para o post Compartilhar em outros sites
Jair Humberto 2 Denunciar post Postado Agosto 14, 2008 ah entendi eu estava colocando apenas min-width, por isso nao tava funcionando valeu cassito. Compartilhar este post Link para o post Compartilhar em outros sites
