Problema com alinhamento
olá...
Estou com um problema que n sei como resolver... ja tentei de tudo mas fica sempre mal. É o seguinte
este codigo apresenta um carrinho de compras com 3 linhas e 4 colunas, ou seja 3 linhas cada uma com 4 produtos, descriçao etc... o que ta a acontecer é que se o titulo do produto for maior que os 20 caracteres e mais largo que o tamanho da imagem, toda a estrutura fica desproporcional. Queria que cada produto ficasse dentro de um espaço com 200px e que caso o nome fosse maior que isso, em vez de alargar o quadrado de 200px, que passe para a linha de baixo. já consegui uma vez fazer isso limitando com uma div, mas ficava feio o visual porque os botões ficavam desalinhados. outra coisa é que no firefox fica um produto ao lado do outro e no explorer aparecem um abaixo do outro. Alguem me pode ajudar a resolver isto? obrigado!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<style type="text/css"><!--
.pag {
font-family:Verdana, Arial;
font-size: 12px;
background-color:#ffffff;
width: 800px;
text-decoration:none;
}body {
background:#fff;
font:12px Verdana, Arial text-align:center;
}
#produtos{
width:800px;
border:0px solid #333;
text-align:left;
margin:0 auto;
}#produtos ul{
margin:0px 0px 0px 0px;
padding:0 0px;
}#produtos ul li{
list-style:none;
display:inline;
float:left;
margin:0px 0px 0px 0px;
border:0px solid #ccc;
text-align:center;
}#produtos produto{
font:16px Arial;
font-weight:bold;
color:#006699;
}#produtos titulopreço{
font:10px Arial;
font-weight:bold;
color:#666;
}#produtos preço{
font:16px Arial;
font-weight:bold;
color:red;
}#produtos referencia{
font:10px Arial;
font-weight:bold;
color:#666;
}
#alinha {
width: 200px;
bottom: 0px;
left: 0px;background-color: #f3f3f3
}
-->
</style>
<?
require("../Produtos/conexao.php");
###################################################################################
// Inicia a Paginação
###################################################################################
if($_SERVER['REQUEST_METHOD']=='GET'){
$pg = isset($_GET['pg']) ? (int)(htmlentities($_GET['pg'])) : 1;
($pg <= 0) ? $pg = 1 : NULL;
$inicio = ($pg * 12) - 12;
$select = mysql_query("SELECT * FROM produtos ORDER BY id_produtos LIMIT 12") or die(mysql_error());###################################################################################
// Inicia o conteúdo da página
###################################################################################
echo "
<center>
<img src='../Produtos/Imagens/BannerLoja.png' border='0'>
<br>
<br>
<table cellpadding='5' cellspacing='1' width='800'>
<tr>
";
$sql = "SELECT * FROM produtos ORDER BY id_produtos LIMIT $inicio,12" or die(mysql_error());
$procura = mysql_query($sql) or die(mysql_error());while($itens = mysql_fetch_assoc($procura)){
echo '
<div id=produtos>
<ul>
<li>
<div id=alinha>
<produto>'.$itens['produto'].'</produto>
<br>
<referencia>Ref: '.$itens['referencia'].'</referencia>
<center>
<a href="detalhes.php?id_produtos='.$itens['id_produtos'].'"><img width="150" height="100" border="0" src="../Produtos/Produtos/'.$itens['imagens'].'"></a>
<br><br>
<preço><b>€ '.number_format($itens['preco'], 2, ',', '.').'</b></preço>
<center>
<a href="../Produtos/carrinho.php?accao=add&id_produtos='.$itens['id_produtos'].'"><img src="../Produtos/Imagens/BotAdicionar.png" border="0"></a><br>
<br>
</div>
</li>
</ul>
</div>
';
}
?>
</tr>
</table><?
}
###################################################################################
// Fim do conteudo da página
###################################################################################
mysql_free_result($select);
$conta_reg = mysql_query("SELECT COUNT(*) AS id_produtos FROM produtos LIMIT 12") or die(mysql_error());
$total_reg = mysql_result($conta_reg,0,id_produtos);
$paginas = ceil($total_reg/12);
mysql_free_result($conta_reg);
?>
<hr size="1" color="green" width="800">
<table cellpadding="5" cellspacing="1" width="800">
<tr>
<td align="left">
<a href="?pg=1"><img src="../Produtos/Imagens/BotPrimeiraPagina.png" border="0"></a>
</td>
<td class="pag" align="center"><?
for($i = $pg-LINKS; $i <= $pg-1; $i++){
($i <= 0) ? false : print '<a href="?pg='.$i.'">'.$i.'</a>';
}
print '<a href="#">'.$pg.'</a>';
for($i = $pg+1; $i <= $pg+12; $i++){
($i > $paginas) ? false : print '<a href="?pg='.$i.'">'.$i.'</a>';
}
?>
</td>
<td align="right"><a href="?pg=<? print $paginas; ?>"><img src="../Produtos/Imagens/BotUltimaPagina.png" border="0"></a></td>
</tr>
</table><?
###################################################################################
// Fim da paginação e da tabela
###################################################################################
?>
</body>
</html>
<hr size="1" color="green" width="800">
<a href="../Produtos/carrinho.php"><img src="../Produtos/Imagens/BotCarrinho.png" border="0"></a>
</body>
</html>Discussão (3)
Carregando comentários...