[Resolvido] Background não aparece

Rafael Crespo · Setembro 16, 2008

Olá pessoal,

Estou desenvolvendo o seguinte site:

http://www.rafaelgcrespo.com.br/eduardocre...ste_layout.html

Como podem ver, a div "overlay_meio" possui uma imagem de background, que não está sendo mostrada.

Alguém poderia me dar um help, plz? Não faço idéia do que seja...

Aí vai o codigo fonte:

<!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>Untitled Document</title>

<style type="text/css">

body { margin:0; padding:0; background-color: #bbf1ff;}

#degrade { background-image: url(layout/degrade_azul.jpg); height:474px; width:100%; position:absolute; visibility: visible;}
#banner { position:absolute; width:800px; height:115px; left: 50%; top: 75px; margin-left:-400px; background-image: url(layout/banner.png);z-index:2; visibility: visible; }
#geral { width:100%; margin:0; padding:0;}
#topo { width:100%; height:50px; }
#rodape { width:100%; height:403px; background-image: url(layout/cana.png); margin-top:-200px; }

#overlay { position: relative; width:700px; left:50%; height:auto; margin-left:-350px; }
#overlay_topo{ background-image: url(layout/overlay_topo.png); height: 28px; }
#overlay_meio{ background-image: url(layout/overlay_meio.png); background-repeat:repeat-y; }
#overlay_rodape{ background-image: url(layout/overlay_base.png); height: 28px; clear:both; }

#conteudo{ width:420px; float:left; margin-top:110px; margin-left:22px; }
#conteudo_topo{ background-image: url(layout/conteudo_topo.png); height: 28px; }
#conteudo_meio{ background-image: url(layout/conteudo_meio.png); background-repeat:repeat-y; padding-left: 15px; padding-right: 15px; }
#conteudo_rodape{ background-image: url(layout/conteudo_base.png); height: 28px; }

#noticias{ width:220px; float:left; margin-top:165px; margin-left:15px; }
#noticias_topo{ background-image: url(layout/noticias_topo.png); height: 20px; }
#noticias_meio{ background-image: url(layout/noticias_meio.png); background-repeat:repeat-y; padding-left: 15px; padding-right: 15px; }
#noticias_rodape{ background-image: url(layout/noticias_base.png); height: 24px; }

/*styles e tipografia*/

.noticias {
	font-size: 12px;
	font-family: "Myriad Web Pro", "Myriad Web Pro Condensed";
	color: #FFFFFF;
	font-style: italic;
}
.horario {font-family: "Myriad Web Pro", "Myriad Web Pro Condensed"; color: #FFFFFF; font-weight: bold; font-size: 12px;}
.links {font-family: "Myriad Web Pro", "Myriad Web Pro Condensed"; color: #FFFFFF; font-size: 17px;}
.titulo {
	font-family: "Myriad Web Pro", "Myriad Web Pro Condensed";
	color: #FFFFFF;
	font-size: 48px;
	font-style: italic;
}
.subtitulo {font-family: "Myriad Web Pro", "Myriad Web Pro Condensed"; color: #FFFFFF; font-size: 35px; font-style: italic; }
.normal {color: #FFFFFF; font-size: 20px; font-family: "Myriad Web Pro Condensed";}


</style>


</head>
<body>
<div id="degrade"></div>
<div id="banner"></div>
<div id="geral">
  <div id="topo"></div>

  <div id="overlay">

	 <div id="overlay_topo"></div>
	 <div id="overlay_meio">
	 
	 
		<div id="conteudo">
		  <div id="conteudo_topo"></div>
		  <div id="conteudo_meio" class="normal">
		  
		  <span class="titulo">Título</span>

		  <br />
		  <br />
		  <span class="subtitulo">Subtítulo</span>		
		  <br />
		  <br />
	  In nibh odio, porttitor vel, mattis vel, porttitor eget, orci. Duis  consectetuer tempus enim. Sed ut felis et tortor feugiat malesuada. Nam  vulputate, tellus eu nonummy dapibus, pede risus luctus dolor, ut  nonummy urna felis a lacus. Nam in dolor tincidunt ante vehicula  dignissim. Nulla id libero ut dui placerat semper. Nulla sit amet nibh  at velit facilisis gravida. Phasellus in diam. Pellentesque volutpat  scelerisque dolor. Donec venenatis nulla suscipit nisl dignissim  tristique. Ut ut lorem sit amet purus ullamcorper mattis. Phasellus  ornare ligula non orci. Pellentesque luctus tristique orci. Proin a  est. Nulla porta lacus ut leo. Nulla faucibus pede sit amet dui. Nullam  aliquet lorem at nunc. Nullam eu tellus.</div>
		  <div id="conteudo_rodape"></div>
		</div>

		
		<div id="noticias">
		  <div id="noticias_topo"></div>
		  <div id="noticias_meio" class="noticias" >
		  
		  <span class="horario">18:45h:</span> Eduardo Crespo é o mais votado verador do estado do RJ<br />
		<br />
		<span class="horario">17:56h: </span>Brasil foi bem nas Olimpíadas, mas não da para continuar a...<br />

		<br />
		<span class="horario">18:45h:</span> Eduardo Crespo é o mais votado verador do estado do RJ<br />
		<br />
		<span class="horario">17:56h: </span>Brasil foi bem nas Olimpíadas, mas não da para continuar a...<br />

		<br />
		<span class="horario">18:45h:</span> Eduardo Crespo é o mais votado verador do estado do RJ<br />
		<br />
	  <span class="horario">17:56h: </span>Brasil foi bem nas Olimpíadas, mas não da para continuar a...</div>

		  <div id="noticias_rodape"></div>
		</div>
		
		
	 </div>
	 <div id="overlay_rodape"></div>


  </div>
  <div id="rodape"></div>
</div>


</body>
</html>

Grato,

Rafael Crespo

Aprendiz CSS · Setembro 17, 2008

a imagem seria a de uma plantação!!!

no meu apareceu, porem demorou muito!

abraço

Giovani · Setembro 17, 2008

Este link vai ajudá-lo: Div pai não acompanha a altura dos filhos que estão com float. Como fazer para que acompanhe

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Rafael Crespo · Setembro 17, 2008

Este link vai ajudá-lo: Div pai não acompanha a altura dos filhos que estão com float. Como fazer para que acompanhe

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Perfeito !!!!

Muito obrigado!!

coloquei um display: table no div pai, mas só funcionou no firefox... aí eu coloquei uma nova div "invisivel", sem float, e funcionou no IE também =)

Show de bola!

Caso resolvido

Abraços

Rafael Crespo · Setembro 17, 2008

Só um problema, pessoal...

Eu coloquei as duas soluções: Um display: table no div pai, e uma div com visibility:hidden na div filho ... agora está mostrando o fundo perfeitamente no FF, mas no IE ( o meu é o IE 6) a transparência está meio bugada... as vezes aparece, as vezes não... Meio esquisito, como um bug mesmo...

Estou usando PNGs com transparencia para fazer o layout...

tá aí o link:

http://www.rafaelgcrespo.com.br/eduardocre...ste_layout.html

Abraços!

brcontainer · Setembro 17, 2008

Pesquise antes Rafael, tem varias respostas prontas no forum, esse link tem a solução:

http://forum.imasters.com.br/index.php?showtopic=223512

abraço

Rafael Crespo · Setembro 18, 2008

Pesquise antes Rafael, tem varias respostas prontas no forum, esse link tem a solução:

http://forum.imasters.com.br/index.php?showtopic=223512

abraço

Opa! Brigadão! Deu certinho...

Abraços

brcontainer · Setembro 18, 2008

Que bom que conseguiu ^^

Resolvido

Arquivado

[Resolvido] Background não aparece

Recommended Posts

Rafael Crespo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Crespo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Crespo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Crespo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real

Informação importante