Galeria Imagens

Dúvidas, problemas, novidades... se tem a ver com Informática, é aqui!
goncalopes88
Regular
Regular
Mensagens: 171
Registado: domingo, 19 março 2006 19:41

Galeria Imagens

Mensagem por goncalopes88 »

Bom dia
Estou a fazer um projecto, nomeadamente um site, em que este possui uma galeria de imagens, só que fui testar nos browser, qual não é o meu espanto, a galeria funciona no firefox, mas no ie, nem se mexe, o meu site ta a ser feito em html+css, deixo aqui o meu código da galeria, para que alguém me possa ajudar.
Código da Galeria de Imagens

<html>
<head>
<title>ACESA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/site.css">
<style>
<!-
p.MsoNormal
{mso-style-parent:"";
margin-top:0cm;
margin-right:0cm;
margin-bottom:10.0pt;
margin-left:0cm;
line-height:115%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
}
.style2 {
border-width: 0px;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div>
</div>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="text-align: justify">
<tr>
<td align="center" valign="top"><table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="10" align="center" valign="top" bgcolor="#44444E"></td>
</tr>
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" bgcolor="#44444E">&nbsp;</td>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="5"><img src="images/temp_top_left_im.jpg" width="5" height="5" alt=""></td>
<td></td>
<td width="3"><img src="images/temp_top_right_im.jpg" width="5" height="5" alt=""></td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="5">&nbsp;</td>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="98%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="80"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.itap-net.org"><img src="images/image001.jpg" width="670" height="65" alt="" align="middle" class="style2"></a></td>
</tr>
<tr>
<td><span class="black-slogan-txt"></span></td>
</tr>
</table></td>
<td align="right" valign="top"><table border="0" cellspacing="0" cellpadding="2">
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/bg-top-nav.jpg">
<tr>
<td width="4"><img src="images/left-top-nav.jpg" width="4" height="35"></td>
<td align="center" class="navigation_text">
<a href="index.html" >Acesa</a></td>
<td width="10"><img src="images/joint-top-nav.jpg" width="10" height="35"></td>
<td align="center" class="navigation_text">
<a href="noticias.html">Noticias</a></td>
<td width="10"><img src="images/joint-top-nav.jpg" width="10" height="35"></td>
<td align="center" class="navigation_text">
<a href="eventos.html">Eventos</a></td>
<td width="10"><img src="images/joint-top-nav.jpg" width="10" height="35"></td>
<td align="center" class="navigation_text">
<a href="Galeria.html"><u><strong>Galeria</strong></u></a></td>
<td width="10"><img src="images/joint-top-nav.jpg" width="10" height="35"></td>
<td align="center" class="navigation_text">
<a href="Contactos.html">Contactos</a></td>

</tr>
</table></td>
</tr>
<tr>
<td height="2"></td>
</tr>
<tr>
<td height="8" bgcolor="#DB3C02"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="10" align="center" valign="top"></td>
</tr>
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="250" height="158">
<img src="images/logo_acesa_imgem.PNG" width="246" height="155" alt="" align="middle"></td>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="22" valign="top"><span class="orange_bold_text">Galeria Acesa </span><span class="gray_bold_text"></span></td>
</tr>
<tr>
<td height="10" align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="1" bgcolor="#999999"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="5" valign="top"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="5" align="center" valign="top"></td>
</tr>
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="250" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="93%" border="0" cellspacing="3" cellpadding="0">
<tr>
<td height="25" valign="bottom"><div align="center"><span class="orange_bold_text">Links</span></div></td>
</tr>
<tr>
<td height="1" bgcolor="#999999"></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" valign="top"></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="15"><div align="center"><span class="bold_sky_text">Europen</span></div></td>
<td width="15" rowspan="5">&nbsp;</td>
</tr>
<tr>
<td height="3"></td>
</tr>
<tr>
<td valign="top" class="light_gray_text">A Europen &eacute; uma grande loucura. Trata-se de uma mostra que integra uma 'instala&ccedil;&atilde;o' art&iacute;stica e uma 'performance' com refer&ecirc;ncias ao campo virtual.</td>
</tr>
<tr>
<td height="3"></td>
</tr>
<tr>
<td align="right"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right"></td>

</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="25" align="center" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"></td>
<td width="90%" height="1" bgcolor="#999999"></td>
<td width="15"></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" valign="top">&nbsp;</td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="height: 15px">
<div align="center"><span class="bold_sky_text">Projecto Ergon</span></div></td>
<td width="15" rowspan="5">&nbsp;
</td>
</tr>
<tr>
<td height="3"></td>
</tr>
<tr>
<td valign="top" class="light_gray_text">A plataforma Ergon &eacute; criada para permitir a professores, curriculum desenvolvedores e t&eacute;cnicos, que trabalham com a pr&aacute;tica ou na empresa para aprender uns com os outros.</td>
</tr>
<tr>
<td height="3"></td>
</tr>
<tr>
<td align="right"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right">&nbsp;</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="25" align="center" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"></td>
<td width="90%" height="1" bgcolor="#999999"></td>
<td width="15"></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" valign="top">&nbsp;</td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="15"><div align="center"><span class="bold_sky_text">Inform</span></div></td>
<td width="15" rowspan="5">&nbsp;</td>
</tr>
<tr>
<td height="3"></td>
</tr>
<tr>
<td valign="top" class="light_gray_text" style="height: 28px">Infor empresa espanhola, pretende continuar com a sua tarefa colectiva, de servi&ccedil;o e de contribui&ccedil;&atilde;o no campo da forma&ccedil;&atilde;o profissional em todo o pa&iacute;s de Espanha. </td>
</tr>
<tr>
<td height="3"></td>
</tr>
<tr>
<td align="right"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right">&nbsp;</td>

</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top">&nbsp;</td>
</tr>
</table></td>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="22" valign="top" class="orange_bold_text">Feira Internacional </td>
</tr>
<tr>
<td height="10" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="1" bgcolor="#999999"></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>

<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="5" valign="top"></td>
</tr>
<tr>
<td valign="top" class="light_gray_text"><p>
<style type="text/css">
.photopreview { width: 400px; margin: 0 auto; position: relative;} .photopreview li { float: left; width: 100px; height: 75px; padding: 10px;}.photopreview li img { position: relative; width: 100px; height: 75px; border: 1px outset #CCC; padding: 5px; background: #FFF;}.photopreview li:hover img { cursor: default; width: 320px; height: 240px; top: -37px; left: -50px; border: 1px outset #CCC; padding: 5px; z-index: 100; background: #EEE;}.photopreview li:active img, .photopreview:active li:hover img { width: 400px; height: 300px; position: absolute; left: 0; top: auto;}
</style>
</p> </td>
<tr>
<td valign="top" class="light_gray_text"><p><!--[if lt IE 7]><style type="text/css"> body { behavior:url("csshover.htc");}.photopreview li:hover img { margin-bottom: -75px; margin-right: -100px;}.photopreview li:active img { margin-bottom: -150px; margin-right: -200px;}</style><![endif]-->
</p>
<ul class="photopreview">
<li><a href="#"><img src="Galeria/09020008.JPG" alt="Acesa 1" width="100" height="75"></a><a href="#"></a></li>
<li><a href="#"><img src="Galeria/09020009.JPG" alt="Acesa 2" width="100" height="75"></a><a href="#">s</a></li>
<li><a href="#"><img src="Galeria/09020010.JPG" alt="Acesa 3" width="100" height="75"></a><a href="#"></a></li>
<li><a href="#"><img src="Galeria/09020011.JPG" alt="Acesa 4" width="100" height="75"></a><a href="#"></a></li>
<li><a href="#"><img src="Galeria/09020012.JPG" alt="Acesa 5" width="100" height="75"></a><a href="#"></a></li>
<li><a href="#"><img src="Galeria/09020013.JPG" alt="Acesa 6" width="100" height="75"></a><a href="#"></a></li>
<li><a href="#"><img src="Galeria/09020014.JPG" alt="Acesa 7" width="100" height="75"></a><a href="#"></a></li>
<li><a href="#"><img src="Galeria/09020015.JPG" alt="Acesa 8" width="100" height="75"></a><a href="#"></a><a href="#"></a></li>
<li><a href="#"><img src="Galeria/09020016.JPG" alt="Acesa 9" width="100" height="75"></a><a href="#"></a></li>
</ul> </td>
</tr>
<tr>
<td valign="top" class="light_gray_text"> </td>
<tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="10" valign="top"><p>&nbsp;</p>

</tr>
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="1" bgcolor="#999999"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="10" align="center" valign="top"></td>
</tr>
</table></td>
<td width="5">&nbsp;</td>
</tr>
</table></td>
<td>&nbsp;</td>
</tr>
<tr>
<td><img src="images/temp_foot_left_im.jpg" width="5" height="5" alt=""></td>
<td></td>
<td width="5"><img src="images/temp_foot_right_im.jpg" width="5" height="5" alt=""></td>
</tr>
</table></td>
<td width="15" bgcolor="#44444E">&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellpadding="10" cellspacing="0" bgcolor="#44444E">
<tr>
<td align="center">
<p class="MsoNormal"><font color="#FFFFFF">
<span style="font-family: Garamond,serif">© Todos direitos
reservados ACESA</span></font></p>
&nbsp;</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>


É urgente a resolução deste problema, agradecia uma resposta ou por PM, ou mesmo aqui neste tópico.
Obrigado
Topo
Avatar do Utilizador
Corsario-Negro
Lendário
Lendário
Mensagens: 1053
Registado: domingo, 24 julho 2005 13:40

Mensagem por Corsario-Negro »

Acabei de abrir esse código no IE7 e funciona, pelo menos vejo a estrutura do site e afins... não vejo imagens pq também não as tenho :P . Não tenho aqui IE6 pelo que não sei se lá funciona.


De qualquer das formas, se estás a usar CSS, não deverias definir nada relacionado com o estilo nos atributos (topmargin, cellpadding, etc) das tags como estás a fazer (<body> <img> , <table> , <td>, etc...). Deves usar uma hierarquia de classes CSS por forma a aplicar estilos a uma mesma tag.

No entanto, IE6 e IE7 não suportam completamente CSS2, pelo que é possível teres que ali ou de futuro em algo que não seja bem construído, fazer alguns dos tradicionais hacks.
Última edição por Corsario-Negro em sábado, 05 julho 2008 13:15, editado 1 vez no total.
Topo
Avatar do Utilizador
duffy
Lendário
Lendário
Mensagens: 3475
Registado: domingo, 14 novembro 2004 22:54

Mensagem por duffy »

O teu código é um bocado confuso, tens styles no meio do codigo html :? e colocares isso tudo num ficheiro css ou então tudo dentro do header só numa tag style?
Bem, como o teu código anda para aí todo baralho e o tempo não abunda por aqui, eu ajudo-te mas coloco-te um excerto de algo semelhante a tua galeria que eu fiz para um site. Só tens que alterar ao teu gosto agora, se te apetecer, claro :wink:

Código: Selecionar todos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Galeria de imagens</title>

<style type="text/css">

a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}

.photo {width:635px; text-align:left; position:relative; margin:0 auto;}

.photo ul.galeria {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}

.photo ul.galeria li {display:block; width:125px; height:31px; float:left;}

.photo ul.galeria li.mostra ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#fff; width:350px; padding:40px 60px; border:20px solid #fff; z-index:1;}

.photo ul.galeria li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.galeria li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#fff; border:1px solid #888;}

.photo ul.galeria li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.galeria li a:hover ul li a:hover, 
.photo ul.galeria li:hover ul li a:hover 
{white-space:normal; position:relative;}

.photo ul.galeria li a:hover ul li a:hover img, 
.photo ul.galeria li:hover ul li a:hover img 
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#ddd;}
</style>

</head>

<body>

<div class="photo">
<ul class="galeria">
	<li class="mostra">
		<ul>
			<li><a href="#"><img src="http://i141.photobucket.com/albums/r66/duffyzito/Coimbra%20Antiga/UC.jpg" alt="" title="" /></a></li>
			<li><a href="#"><img src="http://i141.photobucket.com/albums/r66/duffyzito/Coimbra%20Antiga/Solum.jpg" alt="" title="" /></a></li>
			<li><a href="#"><img src="http://i141.photobucket.com/albums/r66/duffyzito/Coimbra%20Antiga/PraadoComrcio.jpg" alt="" title="" /></a></li>
			<li><a href="#"><img src="http://i141.photobucket.com/albums/r66/duffyzito/Coimbra%20Antiga/pontes-1.jpg" alt="" title="" /></a></li>
			<li><a href="#"><img src="http://i141.photobucket.com/albums/r66/duffyzito/Coimbra%20Antiga/pontes.jpg" alt="" title="" /></a></li>
			<li><a href="#"><img src="http://i141.photobucket.com/albums/r66/duffyzito/Coimbra%20Antiga/PonteAude.jpg" alt="" title="" /></a></li>
		</ul>
	</li>
</ul>
</div>
</body>
</html>
Topo
goncalopes88
Regular
Regular
Mensagens: 171
Registado: domingo, 19 março 2006 19:41

Mensagem por goncalopes88 »

obrigado...
Topo

Voltar para “Informática”