Não consigo alinhar middle

[Carcleo 4]

Pessoal.

 

Bom dia!

 

Estou tentando fazer alinhamento vertical middle em uma coluna de uma tabela e não consigo.

 

Dentro desta coluna, existe uma div. Mas nessa div não há css de alinhamento vertical.

 

Segue o link:

 

http://www.dinamicaimoveis.com.br/gui

 

Já coloquei valign="middle" e nada.

 

Até heguei a colocar na div vetica-align:middle, mas nada adiantou.

 

 

Onde estará o erro?

[Bergs 53]

coloca vertical-align: middle; na td via css.

[Carcleo 4]

Não funcionou.

 

O html (com php) é:

echo "<td width=\"180px\" height=\"250px\" align=\"center\" valign=\"middle\">
   ".$nome_produtos."<br />
   <div class=\"borda_categoria\">
	 <a href='ver_produto.php?acao=ver_produto&id_produtos=".$id_produtos."'>
	   ".miniatura_exibe($imagem_produtos, endereco_mini, $nome_produtos)."
	 </a><br />
	 <a href='ver_produto.php?acao=ver_produto&id_produtos=".$id_produtos."'>
	   <img src=\"img/solicitar_orcamento.png\" border=0>
	 </a><br />
   </div>
  </td>";

A função php miniatura exibe:

<?php
function miniatura_exibe($foto_ver, $endereco, $categoria) 
{
 if($foto_ver=="")
 { $foto3 = "<img src=\"img/semimagem.png\" height=\"150px\" alt=\"Sem Imagem\" title=\"Sem Imagem\" border=0>";}
else {
            if(file_exists($endereco."/".$foto_ver))
		 { 
              $width="180px"; 
		   $alt=$categoria; 
		   $title=$categoria;
		   $foto3 = "<img src='$endereco/$foto_ver' width=$width alt='$alt' title='$title' border=0 class=\"imagem_categoria\""; 
		 }
            else { $foto3 = "<img src=\"img/semimagem.png\" height=\"150px\" alt=\"Sem Imagem\" title=\"Sem Imagem\"  border=0>";}
		 }
  return $foto3;
}
?>

E o css da div. A classe borda categoria é

.borda_categoria
{
width:180px;
height:160px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 2px solid #95A9B3;
display: table-cell;
}

 

Com display: table-cell no css da div deu certo.

 

Alguma outra ideia?

[Maujor 144]

1-) Você colocou um titulo e um div contendo uma imagem dentro de uma célula.

Estes dois conteúdos estão alinhados middle, mas você não percebe isso porque a altura da célula é 180px

(muito pequena para perceber)

Para visualizar o alinhamento middle funcionando coloque a seguinte regra CSS na folha de estilo.

td { 
 height: 300px;
 border: 1px solid black;
}

Isso aumentará a altura da célula e colocará uma borda preta permitindo visualizar o alinhamento middle.

Mas, é claro, isso não soluciona o problema, somente faz entender o que esta acontecendo e deve ser retirado das CSS.

 

2-) Coloque os titulos em uma célula e os div com imagem em outra célula logo abaixo.

3-) Retire os div e deixe somente o link e a imagem dentro da célula.

4-) Para o TR das células que contêm a imagem defina class="borda_categoria".

5-) Nas CSS altere para .borda_categoria td {...}.

6-) Retire da marcação: width="600" para a table.

7-) Retire da marcação TODAS as with e height das td e das imagens.

8-) Acrescente nas CSS .borda_categoria td img { width:150px; }

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

 

Atenção: Desenvolver layout com uso de tabelas é uma prática ultrapassada.

Aconselho abandonar a marcação usada e montar o layout sem tabelas.

[Carcleo 4]

Ok.

Entendo.

Porem, sobre a div, não poderei retirar pois, abaixo do título, para a imagem do produto, preciso de uma borda circulando apenas a imagem.

 

E, sobre a linha, não poderei colocar a classe diretamente na linha pois a classe é aplicada em cada imagem. Do contrário, a linha toda terá a borda.

 

Outra coisa, seria o seguinte: Essas categorias estão vindo do mysql e sofrem alteração. Ou seja, aumenta, diminui e alteram. Por isso estou exibindo dentro de tabela.

 

Alguma ideia?

[Bergs 53]

semanticamente falando dados tabulares use tabelas. O vertical-align testou certinho?.

[Maujor 144]

Não, decididamente você não entendeu.

Eu não postei o que eu "acho", o que eu disse funciona direitinho.

Você pelo menos tentou fazer o que eu disse?

Não há como centralizar middle colocando o titulo e a imagem em uma mesma célula.

Você não percebeu que eu retirei o DIV e coloquei a borda na célula?

Antes de postar a solução eu baixei a página no meu HD e fiz as alterações para solucionar

e só depois postei a solução.

Pelo menos tente a solução qque eu postei, pois ela FUNCIONA.

[Bergs 53]

coloque o vertical-align: middle; na div com class borda_categoria.

[Carcleo 4]

Ok.

 

Mas observe que do jeito que você esta indicando, a coluna toda terá borda e, como tanto o titulo quanto o link estão dentro da coluna, então, ambos vão estar circulados pela borda e eu quero que o titulo fique fora da borda. Por isso coloquei a div abaixo do titulo.

 

Veja com o ie

 

http://localhost/php/guicapas.com.br/index.php

 

Não estava funcionando.

 

Mas quando adicionei:

display: table-cell;

à css da categoria aí centralizou vertical. Mas só funcionou no ie.

 

No chorme e no FF não alinhou vertical.

[Maujor 144]

LInks para localhost não funcionam!

[Carcleo 4]

pequena distração. desculpe

http://dinamicaimoveis.com.br/gui/

 

Na verdade, o alinhamento vertical que preciso, é só na div.

e na div só tem a imagme.

[Maujor 144]

Pois é!

Você não tentou fazer o que eu disse. Talvez por ter pouco conhecimento de HTML/CSS

Veja a sua página funcionando, inclusive o menu de lista (que você postou em outro tópico no forum): http://maujor.com/temp/forum/gui-capas.html

 

Dica: estude mais HTML e CSS, pois sua marcação HTML é ultrapassada e sua CSS não é legal.

[Carcleo 4]

Pois é. Entendi e estou corrigindo meu css aqui.

 

Mas eu estava fazendo assim: A cada 4 registros(4 colunas sendo uma para cada registro), eu verificava se contador mod 4(colunas)==0. Se fosse, fechasse a linha e abrisse uma nova.

 

Mas fazendo uma linha para as colunas de títulos e uma linha para as colunas das imagens, não encontrei uma lógica para pular a linha a cada duas linhas com 4 colunas cada.

Eis o que estou usando.

  $contador=0;

  echo "<label class=\"topos\" style=\"width:800px;\">CATEGORIAS</label>
        <table align=\"center\" width=\"600px\">
	   <tr>";
  while(list(
		   $id_categorias,
		   $nome_categorias,
		   $imagem_categorias
		  ) =$categorias_query->fetch_row())
	{
	 $contador++;
	 $endereco="img/img_categorias/";
	 echo "<tr>
            <td width=\"180px\" height=\"180px\" align=\"center\" valign=\"middle\">".$nome_categorias."</td>
		   </tr>
	       <tr class=\"borda_categoria\">
		    <td>
			    <a href=\"produtos.php?acao=listar&id_categorias_produtos=".$id_categorias."\">".miniatura_exibe($imagem_categorias, $endereco, $nome_categorias)."</a>
			  </td>
			</tr>";
	 if ($contador % 4==0)
	 {
        echo "</tr>
	       <tr>
		     <td colspan=\"4\"> </td>
		   </tr>
		   <tr>";
	 }
	}
  echo "</tr>";   
  echo "</table>";

Na hora de fazer o lance das colunas separadas pata títulos, aí só consegui um registro por linha. Queria 4

Nesse caso, como proceder?

[Maujor 144]

Você tem que fazer dois loops while aninhados.

O primeiro escreve uma linha com os quatro títulos.

A cada 4 títulos escrito no loop crie o segundo loop para escrever as 4 imagens e o link.

[Carcleo 4]

Fiz. Mas só saiu uma a primeira linha com os títulos e a ultima linha com as imagens.

Porem, tem 7 registros. Logo 4 linhas.

Veja o que eu fiz:

<?php
$categorias_string=
"
SELECT 
  id_categorias,
  nome_categorias,
  imagem_categorias
FROM categorias
ORDER BY nome_categorias
";

$categorias_query=$conexao->query($categorias_string);

if($categorias_query->num_rows==0)
{
  echo "<table align=\"center\" width=\"600px\" height=\"250px\"><tr><td align=\"center\" valign=\"middle\">";
  echo "Não há produtos cadastrados ainda!";
  echo "</td></tr></table>";
}
else
{
  $contador=0;
  $contador2=0;

  echo "<label class=\"topos\" style=\"width:800px;\">CATEGORIAS</label>
        <table align=\"center\" width=\"600px\">
	   <tr>";
  while(list(
		   $id_categorias,
		   $nome_categorias,
		   $imagem_categorias
		  ) =$categorias_query->fetch_row())
	{
	 $contador++;
	 $endereco="img/img_categorias/";
	 echo "<td width=\"180px\" height=\"180px\" align=\"center\" valign=\"middle\">".$nome_categorias."</td>";
	 if ($contador % 4==0)
	 {
	   echo "</tr><tr>";
	   while(list(
			 $id_categorias,
			 $nome_categorias,
			 $imagem_categorias
			) =$categorias_query->fetch_row())
	  {
	   $contador2++;
	   echo "<td class=\"borda_categoria\">
			  <a href=\"produtos.php?acao=listar&id_categorias_produtos=".$id_categorias."\">".miniatura_exibe($imagem_categorias, $endereco, $nome_categorias)."</a>
			</td>";
	    if ($contador2 % 4==0)
	    {
		  echo "</tr>
		    	   <tr><td colspan=\"4\"> </td></tr>
			    <tr>
			   ";
	    } //Fecha o if contador2
	  }  //Fecha o segundo while
	 } //Fecha o if contador
	} //Fecha o primeiro while
  echo "</tr>";   
  echo "</table>";
}
?>