Oie Sem.Ponto!!!
Muuuuuuuuuuuuuuuito obridada pela ajuda.
Eu consegui fazer, mas... como nem tudo é perfeito rsrsr tá dando um conflito quando eu junto tudo buáá .
Bom, deixa eu te explicar pra vê se vc consegue me salvar di novo.
Estou colocando esse efeito no topo da página, e para testar fiz um css e um html separado. Até aqui tudo bem, funciona direitinho. Mas quando passo as regras do css-teste p/ css-completo, e o html-teste p/ o html-completo fica tudo louco, as imagens do topo desalinham e não aparecem, o menu dá problema, o site inteiro fica esquisito.
Vou colocar o código p/ vc dar uma olhadinha pra mim.
Html
[codebox]!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR...nsitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Agendas e Atores de PEB</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css-topo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="geral">
<div id="topo">
<div id="pequenas">
<!-- Linha 1-->
<a href="ec.html" class="img1"></a>
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
<a href="ct.html" class="img2"></a>
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
<a href="ec.html" class="img3"></a>
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
<!-- linha 2-->
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
<a href="ec.html" class="img4"></a>
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
<a href="ec.html" class="img5"></a>
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
<a href="ec.html" class="img6"></a>
<!-- linha 3-->
<a href="ec.html" class="img7"></a>
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
<a href="ec.html" class="img8"></a>
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
<a href="ec.html" class="img9"></a>
<img class="img" src="imagens/topo/bloco1.jpg" alt=""/>
</div>
<div id="grande">
<img class="img" src="imagens/topo/titulo.jpg">
</div>
</div>
<!--Fim Topo-->
<div id="barra"></div>
<!-- Inicio Menu de Navegação >
<div id="menu">
<ul id="nav">
<li><a href="index.html">Apresentação</a></li>
<li><a href="#">Áreas Temáticas</a>
<ul>
<li><a href="ct.html">Ciência e Tecnologia</a></li>
<li><a href="ec.html">Educação e Cultura</a></li>
<li><a href="paradiplomacia.html">Paradiplomacia</a></li>
<li><a href="saude.html">Saúde</a></li>
</ul>
</li>
<li><a href="#">Equipe</a>
<ul>
<li><a href="equipe.html#pesquisadores">Pesquisadores</a></li>
<li><a href="equipe.html#assistentes">Assistentes</a></li>
</ul>
</li>
<li><a href="publicacoes.html">Publicações</a></li>
<li><a href="trabalhos.html">Trabalhos Apresentados</a></li>
<li><a href="teses.html">Teses e Dissertações</a></li>
<li><a href="monografias.html">Monografias</a></li>
<li><a href="#">Relatórios</a>
<ul>
<li><a href="rel_rede.html">Atividades da Rede</a>
<li><a href="rel_ic.html">Iniciação Científica</a>
</ul>
</li>
<li><a href="cursos.html">Cursos e Disciplinas</a></li>
<li><a href="#">Eventos</a>
<ul>
<li><a href="eventos.html#prog">Programados</a>
<li><a href="eventos.html#realizados">Realizados</a></li>
</ul>
</li>
<li><a href="clipping.html">Clipping</a></li>
<li><a href="album.html">Fotos</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</ul>
</div>
<!--Fim Menu-->
-->
<h3 class="dest"> Apoio</h3>
<p> jjhhffd<p>
<div class="cols"><img src="imagens/p1.png" alt=""></div>
<div class="cols"><img src="imagens/p1.png" alt=""></div>
</div>
<!--Fim Menu-->
<div id="conteudo">
<h1>Apresentação</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod </p>
<div id="barra"></div>
<div class="c1">
<h3>Subporjetos</h3>
<p><img src="imagens/pdf.gif" alt=""/> <a class="cont" href="#">sp1</a></p>
</div>
</div>
<div id="apoio">
<h4>Área Restrita</h4>
<form action="" method="get">
<label> Usuário:</label>
<input name="usuario" type="text" id="usuario4" size="12" maxlength="8" />
<label> Senha:</label>
<input name="senha" type="password" id="senha2" size="12" maxlength="5" />
<p>
<input type="submit" name="Submit" value="Enviar" />
</p>
</form>
<hr />
<div>
<h3>Novidades</h3>
<p class="teste"><a href="#">Lançamento do o novo livro </a></p>
<p class="teste">Simpósio de Peb</p>
<p class="teste">Seminário </p>
</div>
</div>
<div id="rodape"> </div>
</div>
-->
</div>[/codebox]
css
[codebox]/* CSS Document */
body
{
margin: 0;
padding: 0;
font: verdana, arial, san-serif;
text-align: center;
background: #FFF;
}
#geral
{
margin:1em center;
width:778px;
text-align: left;
background-color: #fff;
}
#topo
{
height: 180px;
}
#pequenas {
float: left;
width: 360px;
height: 180px;
}
#pequenas img {
float: left;
width: 60px;
height: 60px;
}
a {
display: block;
width: 60px;
background-repeat: no-repeat;
padding-top: 60px;
overflow: hidden;
height: 0;
}
a:hover{
background-position: 0 60px;
size: 120%;
/* ao passar o mouse, a posição do background mudará exibindo assim a imagem de baixo */
}/*
Todas as suas imagens logo abaixo */
.img1 {
background: url(imagens/topo/top1.jpg);
float: left;
width: 60px;
height: 0px;
}
.img2 {
background: url(imagens/topo/top2.jpg);
float: left;
width: 60px;
height: 0px;
}
.img3 {
background: url(imagens/topo/top3.jpg);
float: left;
width: 60px;
height: 0px;
}
.img4 {
background: url(imagens/topo/top4.jpg);
float: left;
width: 60px;
height: 0px;
}
.img5 {
background: url(imagens/topo/top5.jpg);
float: left;
width: 60px;
height: 0px;
}
.img6 {
background: url(imagens/topo/top6.jpg);
float: left;
width: 60px;
height: 0px;
}
.img7 {
background: url(imagens/topo/top7.jpg);
float: left;
width: 60px;
height: 0px;
}
.img8 {
background: url(imagens/topo/top8.jpg);
float: left;
width: 60px;
height: 0px;
}
.img9 {
background: url(imagens/topo/top9.jpg);
float: left;
width: 60px;
height: 0px;
}
#grande {
float: right;
width: 418px;
height: 180px;
}
#grande img {
float: left;
width: 420px;
height: 180px;
}
#barra
{
height: 10px;
background-color: #800000;
/*Fim Topo*/ }
/*----------------Inicio Menu-----------------*/
#menu
{
float: left;
width: 180px;
height: auto;
margin-top:0px;
}
#menu ul{
margin: 0;
padding: 0;
list-style: none;
width: 180px;
color: #fcebca;
font: bold 11px "Trebuchet MS", Verdana, Arial, Serif;
}
#menu ul li {
position: relative;
}
#menu li ul{
position: absolute;
left: 179px;
top: 0;
display: none;
}
#menu ul li a:link, a:visited, a:active {
text-decoration:underline;
display: block;
text-decoration:none;
color: #ffe9c6;
background: #800000;
padding: 5px;
}
#menu ul li a:visited {
text-decoration:none;
display: block;
text-decoration:none;
color: #ffe9c6;
background: #800000;
padding: 5px;
}
#menu ul li a:active {
text-decoration:none;
display: block;
text-decoration:none;
color: #ffe9c6;
background: #ccc;
padding: 5px;
}
#menu ul li a:hover {
text-decoration: underline;
color: #800000;
background-color: #feebcc;
}
#menu li:hover ul {
display: block;
text-decoration: underline;
color:#feebcc ;
background: #800000;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
/* ----Fim Menu -------*/
/* ----Inicio Conteudo -------*/
#conteudo{
float: left;
width: 450px;
height: auto;
text-align:justify;
padding: 10px;
border:solid 0 #800000;
border-width: 0px 8px;
background-image: url(imagens\bg2.png) repeat-y 0 0;
font: 11px "Trebuchet MS", Verdana, Arial, Serif;
color: #696969;
}
.c1 {
width: 450px;
height: auto;
text-align:justify;
padding:10px;
font: 11px "Trebuchet MS", Verdana, Arial, Serif;
color: #696969;
}
/* Lista do Conteúdo*/
ul.cont{
/*margin: 10px;
padding: 3px;*/
list-style: square;
/*font: normal, 12px, Trebuche MS, Verdana, Arial, Serif;*/
font-size: 11px;
line-height: 150%;
}
ul li.cont{
padding: 5px;
}
a.cont:link, a.cont:visited, a.cont:active {
text-decoration: underline;
color:#A52A2A;
}
a.cont:hover {
text-decoration: underline;
color: #800000;
background: #feebcc;
}
/*Fim das Listas dentro do conteudo*/
#apoio
{
float: right;
width: 100px;
height:auto;
padding: 5px;
background-image: url(imagens/bg_vert.jpg);
}
#teste
{
margin-left: 190px;
width: 80px;
height: 120px;
background-color: #000;
}
#rodape
{
clear: both;
height: 20px;
background-color: #800000;
text-align: center;
font-size: 9pt;
color: #fcebca;
font: bold 9px "Trebuche MS", Verdana, Arial, Serif;
}
h1, h2, h3, h4 {
margin: 0.8em 0;
font-size:1.6em;
color:#8B0000;
padding:5px;
}
h2 {
font-size:1.3em;
}
h3 {
font-size:1.2em;
}
h4{
font-size:1em;
}
.dest {
margin-top: 15px;
color:#800000;
padding:5px;
background-color: #ece5cf;
font: arial;
}
.areas_tematicas {
background: #800000;
color: #fcebca;
padding: 5px;
}
.cols{
float:left;
background:#fff;
}[/codebox]
modelo_img_topo.png 162.59KB
34 downloads 
