[Resolvido] Alinhando com float..

Good · Julho 2, 2010

Como eu faço pra alinhar o conteúdo? Eu quero que quando pule uma linha, fique alinhado ao centro! Mas não está dando por causa do float, mas não posso retirar o float porque preciso dele para colocar as img no topo..

CSS:

#preview{
	position: absolute;
	border:1px solid #ccc;
	background: #333;
	padding: 2px;
	display: none;
	color: #fff;
}

.thumbbox4{height:71px; width:80px; float:left; overflow:hidden; background:#FFF}
.thumbbox4 img{margin-top:0;}

#fotos ul,li{
	margin:0;
	padding:0;
}
#fotos li{
	list-style:none;
	display:inline;
}

#galeria{
    display: table-cell;
    text-align: center;
    width:839px;
}
#galeria div{
    display:inline;
}

HTML:

<div id="galeria">

	<ul id="fotos">

   <div class="thumbbox4" style="margin-bottom: 20px;">
		<li id="fotos">
      <a href="#" style="min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: 71px; height: 70px; border: 2px #808080 solid; " class="preview">

      </a>
      </li>
   </div>


   <div class="thumbbox4" style="margin-bottom: 20px;">
		<li id="fotos">
      <a href="#" style="min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: 71px; height: 53px; border: 2px #808080 solid; " class="preview">
      </a>

      </li>
   </div>


   <div class="thumbbox4" style="margin-bottom: 20px;">
		<li id="fotos">
      <a href="#" style="min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: 71px; height: 53px; border: 2px #808080 solid; " class="preview">
      </a>
      </li>

   </div>


   <div class="thumbbox4" style="margin-bottom: 20px;">
		<li id="fotos">
      <a href="#" style="min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: 71px; height: 53px; border: 2px #808080 solid; " class="preview">
      </a>
      </li>
   </div>


   <div class="thumbbox4" style="margin-bottom: 20px;">
		<li id="fotos">
      <a href="#" style="min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: 71px; height: 53px; border: 2px #808080 solid; " class="preview">
      </a>
      </li>
   </div>

   <div class="thumbbox4" style="margin-bottom: 20px;">
		<li id="fotos">
      <a href="#" style="min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: 71px; height: 53px; border: 2px #808080 solid; " class="preview">
      </a>
      </li>
   </div>


   <div class="thumbbox4" style="margin-bottom: 20px;">
		<li id="fotos">
      <a href="#" style="min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: 71px; height: 53px; border: 2px #808080 solid; " class="preview">
      </a>
      </li>
   </div>


   <div class="thumbbox4" style="margin-bottom: 20px;">

		<li id="fotos">
      <a href="#" style="min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: 71px; height: 53px; border: 2px #FF0404 solid; " class="preview">
      </a>
      </li>
   </div>


   <div class="thumbbox4" style="margin-bottom: 20px;">
		<li id="fotos">

      <a href="#" style="min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: 71px; height: 53px; border: 2px #808080 solid; " class="preview">
      </a>
      </li>
   </div>


   <div class="thumbbox4" style="margin-bottom: 20px;">
		<li id="fotos">
      <a href="#" style="min-width: 75px;">

          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: 71px; height: 53px; border: 2px #808080 solid; " class="preview">
      </a>
      </li>
   </div>


   <div class="thumbbox4" style="margin-bottom: 20px;">
		<li id="fotos">
      <a href="#" style="min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: 71px; height: 57px; border: 2px #808080 solid; " class="preview">

      </a>
      </li>
   </div>


   <div class="thumbbox4" style="margin-bottom: 20px;">
		<li id="fotos">
      <a href="#" style="min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: 71px; height: 57px; border: 2px #808080 solid; " class="preview">
      </a>

      </li>
   </div>


   <div class="thumbbox4" style="margin-bottom: 20px;">
		<li id="fotos">
      <a href="#" style="min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: 71px; height: 40px; border: 2px #808080 solid; " class="preview">
      </a>
      </li>

   </div>


   <div class="thumbbox4" style="margin-bottom: 20px;">
		<li id="fotos">
      <a href="#" style="min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: 70px; height: 59px; border: 2px #808080 solid; " class="preview">
      </a>
      </li>
   </div>

	</ul>

      <div style="clear: both;"></div>

</div>

Eu também estou usando jquery, para exibir a imagem um pouco maior ao passar o mouse.. não tem nada a ver com isso.. E tem a class #preview no css não é para mexer, pois pertence ao jquery para exibir a imagem maior..

Como está ficando:

Imagem Postada

E como deveria ser:

Imagem Postada

Thales Caricati · Julho 2, 2010

Good,

Creio que não dê pra deixar ele no centro usando float, pois o nome já diz: float:left => flutuar a esquerda.

Good · Julho 3, 2010

tem sim.. se não, me mostre algum jeito que possa fazer o que eu quero..

marcus_du · Julho 3, 2010

Cara, as imagens não estão nos mesmos tamanhos.

Será que não é isso?

Good · Julho 3, 2010

não.. não tem nada a ver tamanho de imgs não..

o float já faz isso, ele coloca as img tdo alinhadas no topo.. cada quadrado cinza é uma img..

eu quero apenas colocá-las no centro..

mauelement · Julho 3, 2010

Pra que as divs dentro da UL ?

Não se deve utilizar ID´s iguais em uma mesma página.

Pra que colocar estilo inline se você ta usando estilo no head ?

Pra que colocar estilo no link tb se tb ta usando lá em cima?

Tá cheio de problemas no seu código, se eu fosse você, aproveitava o momento pra arruma-ló.

Sobre o problema que você tá passando, se são imagens e você quer que fique sempre centralizado as de baixo.

Uma opção seria criar uma div com a largura que você quer e dentro do div colocar cada tag de imagem, uma do lado da outra e mandar um text-align na div.

Dessa forma todas as imagens ficaram uma do lado da outra automaticamente sem você precisar usar float: left, dispensando assim tb o uso de LI.

E sempre que restar espaço em uma linha da div, essas imagens ficaram centralizadas com a de cima. tende?

flw

Good · Julho 3, 2010

entendi nada..

eu quero apenas que elas fiquem centralizadas e que elas fiquem todas no topo..

Giovani · Julho 4, 2010

O recomendado é primeiro fazer o correto.

Você quer um menu? Pesquise sobre listas. Arrumar algo que já está errado fica meio complicado.

E tente postar um link com o que você já tem feito, fica muito mais fácil pro pessoal tentar lhe ajudar.

Em 03/07/2010 at 20:45, 'mauelement' disse:

Pra que as divs dentro da UL ?

Não se deve utilizar ID´s iguais em uma mesma página.

Pra que colocar estilo inline se você ta usando estilo no head ?

Pra que colocar estilo no link tb se tb ta usando lá em cima?

Tá cheio de problemas no seu código, se eu fosse você, aproveitava o momento pra arruma-ló.

Good · Julho 4, 2010

Eu num quero menu não.. eu quero apenas que elas fiquem centralizadas e que elas fiquem todas no topo..

deixa o código do jeito que está, pois é assim que precisa estar pra funcionar o preview..

Vê ae o que eu to usando ¬¬: http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/

PROBLEMA: float: left;

eu não deixa alinhar no centro, ele alinha as fotos no topo mas não alinha no centro da página..

marcus_du · Julho 4, 2010

Seguinte...

Não existe um estilo direto de alinhamento centralizado para a posição HTML, como DIV, entre outros, que seja diretamente equivalente ao antigo atributo HTML align="center";

O que se pode fazer:

Se a largura do bloco não for especificada e pudermos escolher o tamanho das margens, seja em uma unidade de medida absoluta (como pixels) ou relativa (como porcentual), definimos os estilos margin-left (margem esquerda) e margin-right (direita) do bloco com valores iguais para centralizá-lo.

Exemplo:

Citar
margin-left: 10%; margin-right: 10%;

Mas assim, claro que a porcentagem dependerá do tamanho da DIV.

Good · Julho 4, 2010

Então beleza..

Só pra mostrar pra vocês que tem como:

<div id="galeria">

      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>
      <a href="" style="vertical-align: top; min-width: 75px;">
          <img src="http://forum.imasters.com.br/public/style_images/imasters2010/profile/default_thumb.png" style="width: XXXpx; height: XXXpx;" class="preview">
      </a>

      <div style="clear: both;"></div>

</div>

Realmente, nesta parte eu nem precisei de ul e li.. eu preciso em outras páginas..

e add apenas: vertical-align: top;

tópico resolvido e flw!

mauelement · Julho 4, 2010

Foi exatamente isso que te respondi antes pra fazer.. tsc..

colocar todas as imagens dentro de 1 div e nessa div da text-algin center.

obs: seu código tá cheeio de erro de boas práticas. Mas beleza. ;)

Good · Julho 4, 2010

sim.. mas tudo o que eu postei no começo é necessário para funcionar corretamente em outras páginas diferentes..

Arquivado

[Resolvido] Alinhando com float..

Recommended Posts

Good 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thales Caricati 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Good 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcus_du 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Good 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

mauelement 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Good 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Good 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcus_du 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Good 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

mauelement 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Good 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Pergunta: gerar sitemap.xml

Pergunta: gerar sitemap.xml

php + mysql - where do select em campo varchar com dados numéricos com zeros a direita

Fóruns

Tempo Real

Informação importante