Ir para conteúdo

POWERED BY:

Arquivado

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

Good

[Resolvido] Centralizar imagens...

Por , em Desenvolvimento frontend

Recommended Posts

Good    4

Good
Postado

Imagem Postada

 

 

Veja que na parte em que está circulada de vermelho, tem uma foto que não tem a largura das outras.. o width:77 fazia essa parte.. Se a largura da foto não fosse do tamanho das outras, ela fazia uma centralização da foto (alinhava a foto para não causar nenhum erro no modo em que as fotos são exibidas) para que não causasse um desalinhamento das outras..

 

Se colocar o width na tag img, a imagem ficará distorcida, eu queria usar numa div.. só que se colocar numa div ela fica pulando a linha..

 

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Good    4

Good
Postado

Não deu pra editar.. ¬¬

 

este fórum deveria ser daquele jeito que quando o cara postar alguma coisa no fórum e se a última postagem for dele, automaticamente faz um tipo de edit!

 

Ou então, essa opção poderia ficar por mais tempo.. umas 24 a 48 horas..

 

 

------------- -----------------

 

Eu fiz de outro jeito e o problema que deu foi:

Imagem Postada

 

Veja que na parte circulada em vermelho, eu consegui deixar no centro.. mas em questão as outras.. :X

 

E tive que usar tabela

 

  <div style="display: table-cell; text-align: center; width:1000px;">

<div style="background:#FFF; float:left; margin-top:3px; vertical-align: top; margin-bottom:20px; height:90px; width:77px; margin-right:6px;">
  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" style="border: 2px #808080 solid;">
  <span>
  <p align="center">
  <img src="upload/<?php echo $photos['foto_media']; ?>">
  </p>
  </span>
  </a>
</div>

  </div>

E o problema neste código até o momento agora é o height 90.. pq se eu colocar ele aquele alinhamento do display: table-cell; text-align: center; não irá funcionar.. irá alinhar normalmente..

 

Resumindo..: O height faz com que o alinhamento centralizado não funcione!

 

OBS.: O problema antes era width, agora é o height!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Não conseguir entender muito bem o resultado final, mas acho que é isso:

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Teste com css</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}

a img{ border: none; } 

#galeria{
	display: table-cell;
	width: 800px;
	text-align: center;
}

#galeria div{
	width: 120px;
	display: inline-block;
}

</style>
</head>
<body>
<div id="galeria">
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>
	<div>
		<a href="#">
			<img src="http://www.tutorialhero.com/default_css.gif" alt="" />
		</a>
	</div>
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>
	<div>
		<a href="#">
			<img src="http://www.tutorialhero.com/default_css.gif" alt="" />
		</a>
	</div>
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>	
	<div>
		<a href="#">
			<img src="http://www.tutorialhero.com/default_css.gif" alt="" />
		</a>
	</div>
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>
	<a href="#">
		<img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />	
	</a>
</div>
</body>
</html>

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Good    4

Good
Postado

Nam cara, você tá usando coisas que não tem! Use do mesmo jeito que eu to usando que você vai ver..

 

http://pastebin.com/bTX1gwJx

 

Acesse este link, copie e cole em algum arquivo html e abra.. é isso ae que está ocorrendo comigo!

 

Vlw!! ;D

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglash    0

douglash
Postado

Olá, eu também verifique e não vi erro algum.. teria como demonstrar em imagem a q erro você se refere?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Good    4

Good
Postado

Bom, o problema não é esse.. eu disse pra você usar os mesmos códigos do css que eu estou passando..

 

O problema é no alinhamento.. sabe aquela segunda linha? Eu quero que ela fique centralizada.. você até me passou o código: display: table-cell; text-align: center;

Mas não tá funcionando por causa daqueles width e height, não lembro qual é no momento, mas o problema está nessa centralização..

 

Vlw e foi mal se eu expliquei errado..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Já tentou fazer esse efeito em cima do código que te mandei?

 

Malz essa demora em achar uma solução é que realmente demorou para entender o problema e agora estou sem tempo. Assim que tiver uma brecha, tento arrumar.

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Good    4

Good
Postado

Vixe.. já tentei sim.. sempre dava um erro, acho que cheguei na forma mais simples pra poder arrumar este problema..

 

Não sei mais nem o que fazer, pois o que eu faço sempre dá no mesmo..

 

flw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Good    4

Good
Postado

Ow, tira o Resolvido do tópico.. pq ainda não foi resolvido..

 

Já que o thiago tá sem tempo, alguém pode me ajudar?

 

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Good    4

Good
Postado

----

 

Olha, só tem um problema.. é que eu preciso dessas divs pra definir uma altura e largura..

 

Pq o limite de fotos por linha é 10..

 

 

Se colocar o width e height no style da primeira tag img, a imagem fica distorcida..

 

O problema é fazer esse negócio ae que eu num to sabendo.. se souber de algum jeito que dê certo, fazendo o que eu quero beleza..

 

 

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Teste com css</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}

#galeria{
    display: table-cell;
    text-align: center;
    width:1000px;
}

#galeria div{
    display:inline;
}

a.contexto{
    font:12px arial, verdana, helvetica, sans-serif;
    color:#039;
    text-decoration:none;
    margin: 5px;
    display: inline-block;
    min-width: 120px;
    vertical-align: middle;
}
a.contexto:hover{
    background:transparent;
}
a.contexto span{display: none;}
a.contexto:hover span{
    display: inline;
    position:absolute;
    width:230px;
    text-align:justify;
    top: 80px;
    left: 40px;
    padding:3px 3px;
    border:1px solid #000;
    background:#FCFCFC;
    color:#000;
    z-index:5;
}
</style>
</head>
<body>
<div id="galeria">

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://www.tutorialhero.com/default_css.gif" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://www.tutorialhero.com/default_css.gif" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://www.tutorialhero.com/default_css.gif" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://www.tutorialhero.com/default_css.gif" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://www.tutorialhero.com/default_css.gif" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://www.tutorialhero.com/default_css.gif" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />
  </p>
  </span>
  </a>

  <a href="fotos.php?id=1&fotoid=1&pg=" class="contexto"style="position:relative;">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" style="border: 2px #808080 solid;" alt="" />
  <span>
  <p align="center">
  <img src="http://forum.imasters.com.br/uploads//av-72662.jpg" alt="" />
  </p>
  </span>
  </a>

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

 

Cara, agora que eu peguei o código vi o quanto está confuso! Das próximas vezes, tente sempre deixa-los mais limpos.

 

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

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