Lista com imagem e desecrição

[ET Vinny 0]

Pessoal, estou precisando fazer uma listagem, aonde tem uma imagem de tamanho fixo no lado esquerdo, e o texto da direita ocupar todo o resto do espaço sem colocar barra de rolagem horizontal.

Tem como?

CSS abaixo:

 

.itemCategoria
{
  width : 100%;
  height : 75px;
  background-color: #F0F0F0;
}

.itemCategoriaImagem
{
  width : 75px;
  height : 75px;
  float : left;
  clear : left; 
  background: url(../dados/produtos_categorias/quad.png) no-repeat;
}

.itemCategoriaDesc
{
  width : 700px;
  float : left;
  padding: 5px;
  
}

 

Fonte de implementação aqui:

    function retornaCategoriaProduto($aCategoriaID)
    {  
      $qryCategoria = mysql_query("SELECT * FROM CATEGORIAPRODUTO WHERE CATEGORIAID = '$aCategoriaID'");
      $categoria = mysql_fetch_array($qryCategoria);      
    
      return 
        '   <div  class="itemCategoriaImagem"></div>'.
        '   <div  class="itemCategoriaDesc">'.
        '     <span class="textoPadrao"><b>'.$categoria['NOME'].'</b><br></span>'.
        '     <span class="textoPadrao laranja pequeno">'.$categoria['DESCRICAO'].'</span>'.
        '   </div>';
    };

 

abs...

[angelorubin 142]

Boa tarde,

 

Eu simulei algo aqui, mas não tenho certeza se entendi bem oque você precisa, veja se ajuda:

 

PHP

<?php

function retornaCategoriaProduto($aCategoriaID) {
	 
    // $qryCategoria = mysql_query("SELECT * FROM CATEGORIAPRODUTO WHERE CATEGORIAID = '$aCategoriaID'");
    // $categoria = mysql_fetch_array($qryCategoria);      
    
	$categoria [] = array('nome'=>'carro','descricao'=>'ferrari','imagem'=>'http://www.autoweek.com/galleryimage/CW/20120730/CARREVIEWS/730009999/PH/1/1/ferrari-f12-action-nose.jpg');
    $categoria [] = array('nome'=>'carro','descricao'=>'ferrari','imagem'=>'http://www.autoweek.com/galleryimage/CW/20120730/CARREVIEWS/730009999/PH/1/1/ferrari-f12-action-nose.jpg');
    $categoria [] = array('nome'=>'carro','descricao'=>'ferrari','imagem'=>'http://www.autoweek.com/galleryimage/CW/20120730/CARREVIEWS/730009999/PH/1/1/ferrari-f12-action-nose.jpg');

	$contador = count($categoria);
	
	for($i = 0; $i < $contador; $i++){
     ?>
     <div class="itemCategoria">
        <div  class="itemCategoriaImagem">
        	<img src="<?php echo $categoria[$i]['imagem']; ?>" width="100" height="100"/>
        </div>
        <div  class="itemCategoriaDesc">
        	<span class="textoPadrao">
        		<b><?php echo $categoria[$i]['nome']; ?></b>
        	</span>
        	<span class="textoPadrao laranja pequeno">
				<?php echo $categoria[$i]['descricao']; ?>
            </span>
        </div>
      </div>
	<?php
	}
}

retornaCategoriaProduto(1);

?>

CSS

<style type="text/css">
.itemCategoria
{
  width : 100%;
  height : 100px;
}

.itemCategoriaImagem
{
  width : 100px;
  height : 100px;
  float : left;
}

.itemCategoriaDesc
{
  width : 90%;
  height:100px;
  float : left;
  border:1px solid #CCC;
  margin:0 0 0 2px;
}
</style>

Espero que ajude.

[ET Vinny 0]

Na verdade queria isto...
Porém quando uso padding-left, e pego uma resolução menor, ele fica com scroll...

Será que a solução vai ser fazer com um tamanho X, e depois do load da página alterar para o tamanho da tela do usuário?

 

Vou colocar a forma que você passou e testar...

 

att

[ET Vinny 0]

Ainda fazendo outros testes, e sempre com resoluções menores a div da descricação do produto fica embaixo da imagem...
Eu gostaria que sempre fica-se ao lado e se diminuir a largura ele aumente na altura...

Será que é possivel isto?

Olha como fica em resolução baixa:

[angelorubin 142]

Bom dia,

 

Neste caso você precisa de um design responsivo.

 

Veja se isto ajuda - http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica-e-como-ela-funciona