Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

pamellass

[Resolvido] Div aparece no dreamweaver mas não aparece no Browser

Recommended Posts

Boa noite!

 

Tentei o dia inteiro resolucionar este problema para não postar aqui de novo, mas não consegui...

 

Essa div.boxHome parece que não existe quando visualizo a página no browser. View

 

 

Mas no Dreamweaver ela está direitinha... View

 

 

 

Já revi o HTML e CSS muitas vezes, mexi....mas não consegui descobrir onde está o problema! :(

 

Alguém sabe?

 

 

PS: Sou nova na área (webdesign e aqui no Imasters), então não sei se posso postar tantas dúvidas...se não puder, por favor me avisem!

 

 

 

HTML:

 

<!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=utf-8" />
<title>CEDM - Centro de Estudos da Dor e do Movimento</title>
<style type="text/css">
#container {
margin:0;
padding:0;
width:960px;
background-color:#FFFFFF;
box-shadow: rgb(0,0,0);
}

#header {
margin:0;
padding:0;
width:960px;
height:154px;
background-image:url(images/headerb.gif);
}

#banner {
margin:0;
padding:0;
width:960px;
height:220px;
background:url(images/banner.gif) center;
}

ul.navmain {
margin:0 0 1px 0;
padding:0;
list-style: none;
width:970px;
height:35px;
font-size:14px;
background:url(images/nav_fundo.jpg);
}

ul.navmain ul {
margin:0;
padding:0;
list-style-type:none;
}

.navmain li {
margin:0;
padding:0;
width: 120px;
float:left;

}

.navmain li ul {
position: absolute;
width: 120px;
left: -999em;
color:rgb(255,255,255);
background-color:#21245b;
}

.navmain li:hover ul {
left: auto;
}

.navmain a {
display: block;
}

.navmain li a {
color:#21245b;
}

.navmain li ul a {
color:#ffffff;
}

.navmain a:link {
display:block;
font: 0.95em Arial, Helvetica, sans-serif;
text-align:center;
padding:9px 6px 9px 6px;
text-decoration:none;
}

.navmain a:hover {
background:url(images/nav_fundob.jpg);
color:#FFFFFF;
}

a.dor_main:hover, a.tra_main:hover {
background:url(images/nav_maiorb.jpg);
}

sfHover = function() {
var sfEls = document.getElementById("navmain").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
	sfEls[i].onmouseover=function() {
		this.className+=" sfhover";
	}
	sfEls[i].onmouseout=function() {
		this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
	}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

.boxHome {
margin:0;
padding:50px;
width:378px;
height:138px;
font:normal 13px Arial, Helvetica, sans-serif;
color:#21245b;
background:url(images/fundo_box.gif) center no-repeat;

}

img.floatLeft {
margin:0;
padding:0 13px 0 0;
width:138px;
height:138px;
float:left;

}

img.titleBox {
margin:0;
padding:15px 0 0 0;
width:97px;
height:27px;

}

p.box {
margin:-5px 0 0 0;
padding:0 10px 0 0;
text-align: right;

}

span.maiorbox {
font-size:16px;
font-style:italic;

}

</style>

</head>

<body>
<div id="container">
<div id="header"></div>
<div id="banner"></div>
<ul class="navmain">
<li><a href="#">Home</a></li>
<li><a href="#">Sobre o CEDM</a>
	<ul>
		<li><a href="#">Filosofia</a></li>
		<li><a href="#">Equipe</a></li>
	</ul>
</li>
   	<li><a href="#">Prevenção da Dor</a>
	<ul>
		<li><a href="#">Matérias</a></li>
		<li><a href="#">Dicas</a></li>
	</ul>
</li>
<li><a href="#">Clínica</a>
	<ul>
		<li><a href="#">Experiência</a></li>
		<li><a href="#">Serviços</a></li>
		<li><a href="#">Avaliação</a></li>
		<li><a href="#">Tratamento</a></li>
	</ul>
</li>
<li><a href="#">Cursos</a>
	<ul>
		<li><a href="#">Experiência</a></li>
		<li><a class="dor_main" href="#">Formação Continuada em Dor</a></li>
		<li><a href="#">Cursos</a></li>
		<li><a href="#">Agenda</a></li>
		<li><a href="#">Inscrições</a></li>
		<li><a href="#">Ex-alunos</a></li>
	</ul>
</li>
<li><a href="#">Sports</a>
	<ul>
		<li><a href="#">Experiência</a></li>
		<li><a href="#">Serviços</a></li>
		<li><a href="#">Avaliação</a></li>
		<li><a class="tra_main" href="#">Tratamento/<br />Aprimoramento</a></li>
	</ul>
</li>
<li><a href="#">Centro de Estudos</a>
	<ul>
		<li><a href="#">Biblioteca</a></li>
		<li><a href="#">E-Learning</a></li>
		<li><a href="#">Grupos de Estudo</a></li>
	</ul>
</li>
<li><a href="#">Contato</a></li>
</ul>
<div class="boxHome">
<img src="images/macielmurarifernandes.jpg"  alt="Maciel Murari Fernandes" title="Maciel Murari Fernandes" class="floatLeft" />
<img src="images/equipe.gif"  alt="Equipe CEDM" class="titleBox" />
   <p><span class="maiorbox">Maciel Murari Fernandes</span>, fisioterapeuta fundador do CEDM</p>
   <p class="box"><a href="formacao.html">Ver Formação ></a></p>

</div>    
</div>
</body>
</html>

 

div.boxHome {
margin:0;
padding:50px;
width:378px;
height:138px;
font:normal 13px Arial, Helvetica, sans-serif;
color:#21245b;
background:url(images/fundo_box.gif) center no-repeat;
}

img.floatLeft {
float:left;
margin:0;
padding:0 13px 0 0;
width:138px;
height:138px;
}






e aí mudei pra:

img.floatLeft {
float:left;
margin:0;
padding:0 13px 0 0;
width:138px;
height:138px;
}

div.boxHome {
margin:0;
padding:50px;
width:378px;
height:138px;
font:normal 13px Arial, Helvetica, sans-serif;
color:#21245b;
background:url(images/fundo_box.gif) center no-repeat;
}

 

 

 

 

e ficou assim.

 

 

alguém sabe me explicar porque?? agradeceria muito! :)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você não pode colocar funções Javascript em uma tag de CSS (<style></style>). Como você desenvolve com Dreamweaver, ele ignora isso.

 

Mas isso não pode acontecer pois Javascript, assim como o CSS, usa {}. Então confunde, não dá pra saber que valor está sendo aberto, fechado...

 

Já corrigi você em outro tópico, sobre o menu!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Poste quantas dúvidas achar necessário :natalbiggrin:

PS: Sou nova na área (webdesign e aqui no Imasters), então não sei se posso postar tantas dúvidas...se não puder, por favor me avisem!

E não esqueça de utilizar a tag [ code ] código [ /code ] quando colocar um código no seu post.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.