Ir para conteúdo

POWERED BY:

Arquivado

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

O8oO

[Resolvido] Margem automática

Por , em PHP

Recommended Posts

O8oO    0

O8oO
Postado

Olá! Estou querendo aumentar a largura da minha loja. Ficando na tela toda (sem espaços nas laterais) em resolução 1024. Mas, eu coloco margem em 317px. E quando coloco em margem auto ele fica sem margem. Gostaria saber como faço para os produtos ocuparem 100% do espaço na horizontal (com espaço entre eles somente) ?

 

Minha loja

http://migre.me/cIxQg

 

Abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Genuino    4

Thiago Genuino
Postado

Tem uma classe chamanda .content no seu CSS

Altere o width para 100%

 

E você terá que olhar seu código php para corrigir os produtos, que somente entram 3 por linha

recomendo tirar a difinição de 3 por linha e adicionar float:left; no css dos items

Compartilhar este post

Link para o post
Compartilhar em outros sites

O8oO    0

O8oO
Postado

Thiago.

 

Você não entendeu muito bem rsrs. Mais vamos lá. Eu quero que o site fique em no máximo 1000px de width. Mas os produtos tem uma margem na direita fixa de 317px, sendo assim, o último produto da linha (o 3º) fica com um espaço entre ele e o limite de 1000px. ou seja, ele acaba antes dos 1000px por esta margem ser fixa.

 

O que eu quero:

Um produto aparecer no canto esquerdo (sem nenhuma margem), um aparecer no meio, e o da direita encostar no limite da direita. sem nenhuma margem à direita dele.

 

AQUI TEM UMA ILUSTRAÇÃO DO QUE EU QUERO... O DE CIMA É O QUE EU QUERO, E O DE BAIXO É COMO ESTÁ AGORA

 

ilustra.jpg

 

Grato.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Genuino    4

Thiago Genuino
Postado

coloco embaixo da chamada .produto {} do seu CSS?

 

Pode ser seu navegador tb, alguns não funcionam com nth-

A solução correta (que funcionaria em todos) seria no código PHP a cada 3 registros você implementar o margin-right diretamente na DIV

 

<div class="produto" style="margin-right:0px;"> ....

Compartilhar este post

Link para o post
Compartilhar em outros sites

O8oO    0

O8oO
Postado

Mas como eu implemento este código a cada 3 divs?

 

Tendo em mente que este é o meu código da div produto.

<div class="produto">
     <div class="img"><a href="produto.php?id=<?php echo $row_home['id']; ?>"><img border="0" src="<?php echo $objDynamicThumb1->Execute(); ?>" width="150" height="136" /></a></div>
     <br />
     <div class="nome"><a style="text-decoration:none; color:#000;" href="produto.php?id=<?php echo $row_home['id']; ?>"><?php echo $row_home['nome']; ?></a></div>
     <div align="justify" style="vertical-align:bottom;"><a href="produto.php?id=<?php echo $row_home['id']; ?>"><img src="img/detalhe.png" width="72" height="28" border="0" /></a>  <img src="img/buy.png" width="72" height="28" /><br />
     </div>
   </div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

hinom    5

hinom
Postado

layout_1.html

<html>
<title>css test</title>
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/layout_1.css" />
</head>
<body>
<div class="l_main">
<div class="l_left">left</div>
<div class="l_center">center</div>
<div class="l_right">right</div>
</div>
</body>
</html>

 

 

 

styles.css

*{
   margin:0px auto;
   padding:0px;
   border:0px;
   border-spacing:0px;
   border-collapse:collapse;
   color:#000000;
   font-family:Helvetica, Verdana, Arial, sans-serif;
   font-weight:normal;
   font-size:16px;
}
html, body{ width:100%; height:100%; text-align:center;}

form{margin:0px; display: inline;}

 

 

layout_1.css

div.l_center, div.l_left, div.l_right
{width:33%;display:inline;text-align:center;}
div.l_left{background-color:#cccccc;float:left;}
div.l_right{text-align:right; float:right;background-color:#cccccc;}
div.l_main{width:100%;height:100%;background-color:#999999;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Genuino    4

Thiago Genuino
Postado

Mas como eu implemento este código a cada 3 divs?

 

Tendo em mente que este é o meu código da div produto.

<div class="produto">
     <div class="img"><a href="produto.php?id=<?php echo $row_home['id']; ?>"><img border="0" src="<?php echo $objDynamicThumb1->Execute(); ?>" width="150" height="136" /></a></div>
     <br />
     <div class="nome"><a style="text-decoration:none; color:#000;" href="produto.php?id=<?php echo $row_home['id']; ?>"><?php echo $row_home['nome']; ?></a></div>
     <div align="justify" style="vertical-align:bottom;"><a href="produto.php?id=<?php echo $row_home['id']; ?>"><img src="img/detalhe.png" width="72" height="28" border="0" /></a>  <img src="img/buy.png" width="72" height="28" /><br />
     </div>
   </div>

 

 

Copie o código desde o WHILE, FOR ou FOREACH que deve ter acima por favor

Compartilhar este post

Link para o post
Compartilhar em outros sites

O8oO    0

O8oO
Postado

hinom, percebi que em cada div tem uma classe. No meu código, ele repete, não é coluna por coluna :/

 

Thiago, aqui está.

<?php do { ?>
 <div style="width:175px; float:left; padding-right:11%;">
   <div class="produto">
     <div class="img"><a href="produto.php?id=<?php echo $row_home['id']; ?>"><img border="0" src="<?php echo $objDynamicThumb1->Execute(); ?>" width="150" height="136" /></a></div>
     <br />
     <div class="nome"><a style="text-decoration:none; color:#000;" href="produto.php?id=<?php echo $row_home['id']; ?>"><?php echo $row_home['nome']; ?></a></div>
     <div align="justify" style="vertical-align:bottom;"><a href="produto.php?id=<?php echo $row_home['id']; ?>"><img src="img/detalhe.png" width="72" height="28" border="0" /></a>  <img src="img/buy.png" width="72" height="28" /><br />
     </div>
   </div>

 </div>
 <?php } while ($row_home = mysql_fetch_assoc($home)); ?>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Genuino    4

Thiago Genuino
Postado

Tenta ai

 

   <?php
   $i=0;
   do {
       $i++;
       if ($i == 4) $i=1;
   ?>
 <div style="width:175px; float:left; padding-right:<?php echo ($i == 3 ? '0' : '16'); ?>%;">
   <div class="produto">
     <div class="img"><a href="produto.php?id=<?php echo $row_home['id']; ?>"><img border="0" src="<?php echo $objDynamicThumb1->Execute(); ?>" width="150" height="136" /></a></div>
     <br />
     <div class="nome"><a style="text-decoration:none; color:#000;" href="produto.php?id=<?php echo $row_home['id']; ?>"><?php echo $row_home['nome']; ?></a></div>
     <div align="justify" style="vertical-align:bottom;"><a href="produto.php?id=<?php echo $row_home['id']; ?>"><img src="img/detalhe.png" width="72" height="28" border="0" /></a>  <img src="img/buy.png" width="72" height="28" /><br />
     </div>
   </div>

 </div>
 <?php } while ($row_home = mysql_fetch_assoc($home)); ?>

Compartilhar este post

Link para o post
Compartilhar em outros sites

O8oO    0

O8oO
Postado

Thiago valeu! Muito bom, funcionou perfeitamente. Adaptei ele: Ao invés de margem de 16% coloquei só 155px pois eu quero deixa-lo alinhado em uma linha de 1000px. Mas com certeza irei utiliza-lo em outra loja em 100%.

 

Valeeeeuuu ! Ajudou bastante!

http://migre.me/cIxQg

 

 

hinom, valeu a ajuda tbm !

 

 

Forte abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito