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

Eu estou tentando centralizar fotos, pq tipo.. É tipo um perfil do usuário, ae o usuário pode enviar até no máximo 20 fotos..

 

Ae, eu queria fazer assim:

 

Se tiver 5 imagens para mostrar, eu quero centraliza-las na tela.. E se tiver 10 será alinhado, se tiver 15 a primeira fila de fotos ficará alinhada e a segunda ficará no centro..

 

Só que não estou conseguindo fazer..

 

CSS:

 



.thumbbox3{float:left;width:87px;background:#FFF;margin-left:1px;}
.thumbbox3{height:62px;width:77px;margin-top:3px;margin-bottom:15px;}

 

HTML:

 

<div style="position:relative;" class="thumbbox3 ">
<a href="fotos.php?<?php echo "id=".$usuario_row['id']."";?>&fotoid=<?php echo $photos['id'];?>&pg=<?php echo $_GET['pg'];?>" class="dcontexto">
<img src="upload/<?php echo $photos['foto_pequena']; ?>" style="border: 2px #<?php echo $color;?> solid; overflow: hidden;">
<span>
<p align="center">
<img src="upload/<?php echo $photos['foto_media']; ?>">
</p>
</span>
</a>
</div>

 

A classe dcontexto, é apenas para mostrar umas informações ao passar o mouse, eu já fiz testes e esta parte não prejudica no que estou querendo fazer..

 

O problema está no position:relative.. pois se eu tirar isso, as informações que irão ser mostradas ao passar o mouse elas ficam no topo do site.. vcs entendem essa função..

 

É isso ae..

 

O problema seria mesmo só na centralização, pq pra limitar o espaço das fotos eu já fiz..

 

 

Ex. de como seria: Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

Good    4

Good
Postado

Não alinhou do jeito que eu estava pensando..

 

Ele apenas fez aquele alinhamento de justificação..

 

É centralização..

 

Eu agora coloquei o align="center" no td da tabela.. ae consegui alinhar agora..

 

 

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Good    4

Good
Postado

Acho que não falei sobre a tabela que eu tinha colocado..

 

mas com o seu código, eu consegui alinhar..

 

vlw

 

Resolvido!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Good    4

Good
Postado

Voltando ao tópico.. ¬¬

 

Eu acho que eu estava distraído, não percebi que não estava alinhando as outras fotos no centro..

 

as 10 primeiras deu beleza, mas as outras continuaram no mesmo trajeto, sendo que deveriam ficar no centro..

 

 

É o mesmo código que eu passei, não alterei nada.. apenas acrescentando uma tabela ou não.. Pq mesmo com a tabela ou sem a tabela, o alinhamento fica a mesma coisa, então tanto faz com ou sem.. Ajudem-me!! Alterei o width, mas não houve alteração no eu quis!

 

E se talvez for preciso re-escrever este código css, beleza!

 

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Good    4

Good
Postado

A class idfotos, é a que me disseram pra colocar.. coloquei ao lado da outra pq dá no mesmo, tanto faz coloca numa div separada quanto colocar ao lado!

 


<table border="0" width="100%">
<tr>
  <td align="center">

<div style="position:relative;" class="thumbbox3 idfotos">
<a href="fotos.php?id=1&fotoid=1&pg=" class="dcontexto">
<img src="upload/fotos/p/thumb_0401101262655250.png" style="border: 2px #808080 solid;">
<span>
<p align="center">
<img src="upload/fotos/media/media_0401101262655250.png">
</p>
</span>
</a>
</div>

  </td>
</tr>
</table>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Aqui foi de boa!

 

 

<!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
}
.thumbbox3{
	display: table-cell;
	width: 400px;
	text-align: center;
}

        </style>
    </head>
    <body>
<table border="0" width="100%">
<tr>
  <td align="center">

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

  </td>
</tr>
</table>
    </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

Deu certo também, só que essa div: <div style="position:relative;" class="thumbbox3 idfotos">

 

ela fica entre cada tag <a></a>.. ou seja, são várias dessas divs.. No lugar de fazerem a centralização.. elas continuam na mesma linha..

 

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Good    4

Good
Postado

Estou sim.. é que cada imagem deve ter uma div diferente, pois poderá ter problemas na visualização!

 

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Good    4

Good
Postado

Mas é o que eu fiz.. é isso que eu to tentando dizer já faz um tempão.. :X

 

 

o problema: não pula linha, continua na mesma linha..

 

É pq aquela classe dcontexto, é para visualizar uma img maior e pequenas informações ao passar o mouse..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Good    4

Good
Postado

O html que tá gerando é apenas isso:

 

<table border="0" width="100%">
<tr>
  <td align="center">

<div style="position:relative;" class="thumbbox3 idfotos">
<a href="fotos.php?id=1&fotoid=1&pg=" class="dcontexto">
<img src="upload/fotos/p/thumb_0401101262655250.png" style="border: 2px #808080 solid;">
<span>
<p align="center">
<img src="upload/fotos/media/media_0401101262655250.png">
</p>
</span>
</a>
</div>

 <div style="position:relative;" class="thumbbox3 idfotos">
<a href="fotos.php?id=1&fotoid=1&pg=" class="dcontexto">
<img src="upload/fotos/p/thumb_0401101262655250.png" style="border: 2px #808080 solid;">
<span>
<p align="center">
<img src="upload/fotos/media/media_0401101262655250.png">
</p>
</span>
</a>
</div>

  </td>
</tr>
</table>

 

Pode fechar o tópico..

 

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Good    4

Good
Postado

Pronto, estou com uma dúvida:

 

O meu código ficou assim:

 

<div style="display: table-cell; width: 1000px; text-align: center;background:#FFF;margin-left:1px; height:62px;width:77px;margin-top:3px;margin-bottom:10px;">

<a href="fotos.php?id=1&fotoid=1&pg=" class="dcontexto" 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>

 

O problema que estou tendo é no width.. Aquela classe do css que você me passou eu coloquei no style dentro da div..

 

É que eu declarei o width como 1000, ae depois eu declarei como 77... Eu preciso declarar estes dois, o 1000 pra alinhar o conteúdo e o 77 é pra deixar as fotos no topo... Ou seja, é que existem algumas fotos que tem dimensões diferentes ae o cara lá pediu que eu alinhasse pra não ficar tudo desalinhado..

 

Eu tentei colocar outra div, só que mesmo assim ficava uma linha para cada foto..

 

Eu preciso fazer com que use os 2 widths.. e não adianta colocar na tag da img, pq a imagem fica com uma resolução ruim, a imagem fica puxada pro lado..

 

vlw

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