Ir para conteúdo

POWERED BY:

Arquivado

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

festamix

Moldura no fundo

Por , em Desenvolvimento frontend

Recommended Posts

festamix    0

festamix
Postado

Olá pessoal. Estou fazendo uma galeria de imagens e gostaria de uma ajuda quanto ao mostrar as imagens. Queria que atrás de cada imagem tenha um fundo qualquer, como uma moldura e que a imagem também fique ao centro desta moldura tanto na horizontal quanto na vertical.

Um exemplo vocês podem ter no site LINK

 

Atualmente tenho:

<div class="div_imagem" align="center" valign="absmiddle" ><a href="asdfasd"><img onmouseover="showtrail($img_size[0],$img_size[1],'$imagem_full');" width="$img_size_thumb[0]" height="$img_size_thumb[1]" class="style20" src="$imagem" onmouseout="hidetrail()" align="absmiddle"/></a></div>

MEU CSS

.container{width: 288px;}.div_imagem{	float:left;	width:96px;	color: #2e2a2b;	border-color: #2E2A2B;	border-bottom-color: #2E2A2B;	border: 2 px;	height: 96px;}

Agradeço a todos desde já.

Compartilhar este post

Link para o post
Compartilhar em outros sites

festamix    0

festamix
Postado

Se você olhar no link verá que em cada thumb tem um fundo. A thumb parece estar no centro de uma celula quadrada e essa celula tem um fundo. É isto que quero fazer. Se fosse com tabelas que eu estive-se fazendo eu simplesmente iria criar uma celula de 120 x 120, dar um fundo qualquer a ela, e inserir uma thumb de 90x60 dentro no qual ficaria no centro da celula. É isto que não sei fazer com o tableless.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

Cria um span ou div (dependendo da situção se for uma lista de imagens uma lista n ordenada) com display block na medida que você quer e define margins, paddings, float, clear e poe a imagem dentro dele.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Se as miniaturas tiverem (todas) o mesmo tamanho, aí fica mais fácil... Veja como ficaria (eu coloquei o CSS tudo junto para facilitar a visualização):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">	<head>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />		<title>TÍtulo do Site</title>		<style type="text/css">		div.main {			width: 100px;			height: 100px;			position: relative;			border: 2px solid #f00;			background-image: url(bg.gif);			margin: 15px;			float: left;		}		div.main a img {			border: 0;			position: absolute;			left: 50%;			top: 50%;			width: 30px;			height: 30px;			margin-left: -15px;			margin-top: -15px;		}		</style>	</head>	<body>		<div class="main">			<a href="#" title="Link 1"><img src="img1.gif" alt="Img1" /></a>		</div>		<div class="main">			<a href="#" title="Link 2"><img src="img2.gif" alt="Img2" /></a>		</div>		<div class="main">			<a href="#" title="Link 3"><img src="img3.gif" alt="Img3" /></a>		</div>	</body></html>
Analise este código... Veja este exemplo on-line. Espero que isso ajude...

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

festamix    0

festamix
Postado

Agora entendi de vez, só tenho um problema. Se eu uso o _position: absolute ele dah problema, só aparece um imagem das 6 q devem aparecer e mesmo assim não centralizada. E se eu uso _position: relative não funciona a minha função do onmouseover, ele pega e coloca a imagem que deve ser exibida nessa função atrás do div. Como posso resolver isto?

Compartilhar este post

Link para o post
Compartilhar em outros sites

festamix    0

festamix
Postado

Eu sei que funciona, já testei aqui e estou usando, só preciso saber como posso fazer para que a função javascript fique acima dos objetos com position: relative

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito