Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa Tarde pessoal do Imasters.
Estou tentando fazer um layout com div's e imagens de fundo apenas para aprendizado.
Com o código que fiz tudo funciona marabilhosamente bem no fire-fox e chrome.
Porém no IE fica uma caca.
Percebi que as div's no IE não aumentam de tamanho quando se usa background-image e height 100%.
O que faço para que no ie a div pegue o tamanho da imagem que eu seto no background?
Abaixo vai o código.
teste_div.css
body { margin:0; padding:0; border:none; text-align: center; }
div { width: 100%; border: 1px solid black; }
.master { margin:0 auto; width: 975px; text-align:left; }
.top { height: 168px; background-image: url("imgteste/topo.jpg"); }
.banners-top { margin-top: 6px; height: 122px; background: url("imgteste/banner.jpg") no-repeat center center #0884c4 ; }
.menu { margin-top: 5px; width: 165px; height: 100%; float: left; background: url("imgteste/menu.jpg") no-repeat top center }
.banners-right { margin-top: 5px; width: 165px; height: 100%; float: right; background: url("imgteste/banner-right.jpg") no-repeat top center }
.contents { margin: 5 auto; width: 640px; height: 100%; background: url("imgteste/conteudo.jpg") no-repeat top center }
.footer { height: 108px; background-image: url("imgteste/footer.jpg"); }
teste_div.html
<html>
<head>
<title>Teste Div</title>
<link rel="stylesheet" type="text/css" href="teste_div.css" />
</head>
<body>
<div class="master">
<div class="top"></div>
<div class="banners-top"></div>
<div class="menu"></div>
<div class="banners-right"></div>
<div class="contents"></div>
<div class="footer"></div>
</div>
</body>
</html>Então amigo, não tenho como subir os arquivos em um servidor para lhe enviar o link pois estou fazendo localmente e não tenho dominio disponivel pra isso.
Mas o problema é simples: o código é esse background: url("imagem.jpg");
Essa imagem tem um tamanho de 400 x 1230 por ex:
No FireFox se eu utilizar a classe em uma div, a imagem aparece de fundo na div
e logo essa div fica do tamanho da imagem.
Porém no IE isso não acontece e a div fica fina mantendo apenas o width da imagem.
Se você tiver umas imagens de teste ai nos tamanhos que ta no código já fica facil de visualizar.
Desculpe se pareço ser "folgado" mas é que realmente eu não tenho como enviar o link.
Tentei enviar uma imagem de como fica pra ilustrar mas o fórum só aceita links de imagem.
Mas fico grato desde já pela atenção e qualquer ajuda que possa me oferecer.
Poste a imagem no imageshack e poste o link aqui.
Carlos Eduardo
>
Poste a imagem no imageshack e poste o link aqui.
Carlos Eduardo
Obrigado pela dica amigo Carlos.
Então, no firefox o site fica perfeito:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img51.imageshack.us/img51/5403/firefoxu.jpg&key=e2cbb35a0d2ccb8a8303c9ebfe8e8b4ac2fa3149ed04d3fcb0c8a1c9cade58dc" alt="Imagem Postada" />
No IE fica isso aqui:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img697.imageshack.us/img697/9629/59078532.jpg&key=bcb7f08e09391978f92626b9cf957472f2c154d5b4198f36eb0799ae2b3967cb" alt="Imagem Postada" />
No FireFox a propriedade height:100%; faz com que o menu e o banner lateral fiquem do tamanho
da imagem.
E já no ie isto não acontece
O que faço para arrumar este problema?
Grato pela atenção de todos
Algumas tentativas:
abcs
>
Algumas tentativas:
abcs
Ok fiz as alterações que você me disse e ja ficou melhor posicionado e até mais fácil de trabalhar.
>
Essa parte aqui ainda continua na mesma.
Agora o posicionamento dos elementos esta ok porém o height das div's ainda continua errado ele não pega 100%
Tentei os clear both mas não deu certo
abaixo vão os códigos:
css
body { margin:0; padding:0; border:none; line-height: 1; text-align: center; }
div { width: 100%; border: 1px solid black; }
.master { margin:0 auto; width: 975px; text-align:left; }
.top { height: 168px; background-image: url("imgteste/topo.jpg"); }
.banners-top { margin-top: 6px; height: 122px; background: url("imgteste/banner.jpg") no-repeat center center #0884c4 ; }
.body { height: 100%; }
.menu { margin-top: 5px; width: 165px; height: 100%; float: left; background: url("imgteste/menu.jpg") no-repeat top center; }
.contents { margin: 5 auto; width: 637px; height: 100%; float: left; background: url("imgteste/conteudo.jpg") no-repeat top center; }
.banners-right { margin-top: 5px; width: 165px; height: 100%; float: left; background: url("imgteste/banner-right.jpg") no-repeat top center;}
.footer { clear:both; margin-top: 10px; height: 108px; background-image: url("imgteste/footer.jpg"); }
html
<html>
<head>
<title>Teste Div</title>
<link rel="stylesheet" type="text/css" href="teste_div.css" />
</head>
<body>
<div class="master">
<div class="top"></div>
<div class="banners-top"></div>
<div class="body">
<div class="menu"></div>
<div class="contents"></div>
<div class="banners-right"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>/applications/core/interface/imageproxy/imageproxy.php?img=http://img43.imageshack.us/img43/3789/ie2d.jpg&key=b31934640ccf114c4b83ea83008967733da6c14e81c5a3664fe2d67e54d106ce" alt="Imagem Postada" />
O problema do height continua no IE.
Foi algo que eu fiz de errado ou que faltou fazer?
Grato mais uma vez pela atenção de todos.
É o lance do clear eu sabia que ia ser difícil funcionar. Eu tenho quase certeza que height: 100% não funciona direito no IE6. Eu raramente utilizo isso em layouts já que na maioria das vezes o conteúdo é quem determina a altura. À medida que você for incluindo conteúdo o DIV vai ganhando altura.
Se você quer fazer um layout com um rodapé grudado na parte debaixo, dá uma olhada nessa estrutura. Acho que vai ser fácil de adaptar:
http://ryanfait.com/sticky-footer/
O pessoal daqui do forum gosta desse aqui:
http://maujor.com/tutorial/rodape-embaixo-da-janela.php
abcs
>
É o lance do clear eu sabia que ia ser difícil funcionar. Eu tenho quase certeza que height: 100% não funciona direito no IE6. Eu raramente utilizo isso em layouts já que na maioria das vezes o conteúdo é quem determina a altura. À medida que você for incluindo conteúdo o DIV vai ganhando altura.
Se você quer fazer um layout com um rodapé grudado na parte debaixo, dá uma olhada nessa estrutura. Acho que vai ser fácil de adaptar:
http://ryanfait.com/sticky-footer/
O pessoal daqui do forum gosta desse aqui:
http://maujor.com/tutorial/rodape-embaixo-da-janela.php
abcs
Mais uma vez obrigado amigo BDore, quanto ao rodapé está tudo tranquilo, não me importo que ele acompanhe o crescimento da div, mas obrigado
pela dica.
O Problema mesmo é o height: 100% que não funciona nem mesmo no IE8.
Por isto gostaria de saber com o pessoal do fórum se existe algum hack para o IE que resolva isto
ou uma alternativa para que funcione como no firefox.
Se mais alguém tiver alguma idéia e puder me ajudar eu agradeço.
Grato mais uma vez pela atenção de todos.
Mano...só agora li seu post e acho que sei o que deve ser. Você já testou construir suas DIVS obedecendo hierarquia? Pois esse é o melhor metodo de você ajustar esses tipos de problemas, e não se importe com IE6 é mais dever das pessoas que tem que atualiza-lo para verções 7+ do que ficarmos usando HACK pois alguem ainda tem dificuldade de apertar um botão em qualquer site de download (Bom é minha opinião).
Quanto ao seu problema entenda isso aqui que vou explicar:
Uma coisa é você ter uma div assim:
<div class="topo">TOPO</div>
<div class="conteudo">CONTEUDO</div>Agora veja um exemplo certo de construção de DIV:
<div id="geral">
<div id="geral_topo">
<div>TOPO</div>
<div>MENU TOPO</div>
</div>
<div id="geral_conteudo">
<div>MENU</div>
<div>CONTEUDO</div>
<div>BANNER LATERAL</div>
</div>
</div>A partir desse ponto, todas as condições que você aplicar nas DIVS terão que obedecer aquela que "manda no pedaço" que seria a o "id=geral", então se o "id=geral" tem um height="700" num adianta vir colocar no "id=geral_topo" height="1000" que num vai dar certo, ao mesmo tempo, se for informado ao "id=geral" que ele tem height="100%" então ao colocar no "id=geral_conteudo" que ele também tem height="100%" esse comando vai funcionar por ele acatar uma "hordem" do "id=geral" que é ter 100% de height, ao contrario das regrasTABELAS no HTML as DIVS são muito obedientes quando controladas por CSS e essa obediencia leva a todo profissional se certificar de um monte de rotinas para ver se tudo ira funcionar da maneira que deveria.
De qualquer maneira testa ai e fala ai pra gente no que deu.
Espero ter ajudado.
Amigo ORisonho obrigado pela atenção.
Lendo oque você me disse eu observei que realmente
não tinha setado a altura da div pai http://forum.imasters.com.br/public/style_emoticons/default/natal_dry.gif
rsss então o problema de height agora esta mais que resolvido! http://forum.imasters.com.br/public/style_emoticons/default/natal_happy.gif
Por curiosidade tem diferença entre usar class e id?
como ficaria o css para setar os tamanhos das div's internas
#geral div { } ?
Ou na realidade o exemplo que dei é só uma outra forma de fazer?
Desculpe se a pergunta é simples mas é que não entendo muito de css.
Mais uma vez grato pela atenção de todos.
A sua pergutna é simples, mas a resposta da uma diferença muito grande ao tempo que gastamos para construir HORDENS vindo do css, vejamos o exemplo comum, e mais trabalhoso:
<div class="pai">
<div class="filho"><font class="titulo">TITULO</font> <br /> ALGUM TEXTO</div>
</div>Nesse exemplo ai nosso CSS ficaria da seguinte maneira:
.pai{
position:relative;
width:200px;
}
.filho{
width:100px;
border:2px solid #ffffff;
}
.titulo{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
color:#333333;
}Você já deve ter visto a trabalheira que dá arrumar esse codigo entendendo que ele esta repartido todo em classes, agora multiplica isso por um site de maior porte, nem quero imaginar o monte de classes que vai existir ai, uma misturada com a outra, para achar então a bendita classe que você deseja, minutos de leitura de código para saber.
Agora vamos rapidamente para o exemplo certo e que lógico responde sua pegunta:
<div id="pai">
<div><font>TITULO</font> <br /> ALGUM TEXTO</div>
</div>Até aqui você deve estar se fazendo aquela pergunta: "onde estão as classes?", "como o CSS vai interpretar isso?", vamos a resposta:
/aqui no pai você vai colocar todas as regras a serem seguindas/
#pai{
position:relative;
width:200px;
} width:100px;
border:2px solid #ffffff;
} font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
color:#333333;
}
**Pronto!** Como viu no exemplo pelo CSS eu apenas digo para onde essas hordens vão e ele acha seu respectivo comando e executa, dessa maneira, toda vez que você criasse a tag **<font>** ela ia obcecer hordens vindas do CSS de como ela deve mostrar o conteudo dela, seja imagem ou texto, e isso vale para todas as tags que vem logo abaixo da "TAG PATRIARCA" ou seja, da div que tem por seu nome **"id="pai"**, isso significa que **#pai div** não é a mesma coisa que **id="pai"** e sim que é uma DIV logo depois dele que será comandada por ele, para controlar o **id="pai"** apenas coloque **#pai** (como no exemplo). Isso é deixar de trabalhar com classes e trabalhar com algo que faça parecer objetos no css. Cada um com a sua determinada função, sem se misturar e organizado.Bom, espero ter ajudado... vlw! ^^
Ajudou e esclareceu muito.
Obrigado mais uma vez amigo ORisonho.
Podem fechar o tópico http://forum.imasters.com.br/public/style_emoticons/default/natal_happy.gif
Naõ entendi o problema... Pode postar um link?
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif