[Resolvido] Bordas..

[Good 4]

Bom gente.. eu fiz um sistema de fotos, em que, devem ser mostrados uma borda.

 

Só que, para cada tipo de usuário é uma cor diferente. Na hora do cadastro, o usuário escolhe o que será.

 

E então, ele pode fazer upload de imagens, só que, deve ser mostrado uma borda para diferenciar a foto do tipo do usuário...

 

Segue o código:

 

CSS:

.uname{font-size:11px;line-height:12px;text-align:center;padding:0 3px 3px}
.thumbbox{float:left;width:78px;margin-right:1px;overflow:hidden}

PHP:

while($amigo_fetch = mysql_fetch_assoc($amigos)){

    $color_friend = usuario($us_sql['id'],$us_sql['tipo'],1);

    echo "<div style=\"border: 2px solid #$color_friend; width: 71px; height: 71px; overflow: hidden;\" class=\"ac2 picthumb2\">";

      echo "
      <div class=\"thumbbox\" id=\"fr_1\" style=\"\">
      <a  href=\"perfil.php?tipo=$us_sql[tipo]&id=$us_sql[id]\">
      <img src=\"upload/$phto\" width=\"100\"/>
      </div>
      <p align=\"center\">
      $nome_usuario[0]
      </p>
      </a>
      </div>
      ";

 

Aí o problema é o seguinte, na hora do upload, ele faz os cálculos de redimensionamentos, etc. Aí, quando é mostrado usando o while, as bordas são definidas para um dimensão que eu escolhi. Aí, como as fotos não serão das mesmas dimensões, a imagem fica com um espaço em branco dentro da borda. EX.: Tem a imagem lá, algumas ficam completando a borda, e já outras, ficam sobrando espaços para serem preenchidos.

 

Aí o que eu queria era saber como fazer para a borda preencher toda a imagem, podendo alterar a borda de acordo com o tamanho da imagem. Acho que deu pra entender.

 

OBS.: Eu peguei um pouco do CSS e html do orkut, pq eu não sabia como fazer e ninguém me ajudava. Se a imagem fosse sem a borda, eu não precisaria estar pedindo ajuda agora. Mas o problema é que o cliente pediu com a borda e eu não estou sabendo mexer.

[William Bruno 1501]

Se você já redimensionou a imagem, para que o container se ajuste ao conteudo, basta não definir dimensões para ele

O overlflow, height e width não seriam necessários nesse caso, e a borda ficará exatamente em volta do elemento, se você aplicar ela diretamente na imagem.

[Dee 0]

você pode deixar o comprimento como: width:auto e height:auto, ou não colocar como disse o William

[Good 4]

Mas só que eu fiz uma caixa CSS, para colocar as imagens nela. Aí eu o width e height para cada imagem, para ficar bem alinhado dentro da caixa em CSS, etc.

 

Aí se eu tirar o width e height, as imagens ficam todas desalinhadas.. só se eu fizer igual ao orkut, coloca uma imagem de fundo, só q eu não sei fazer, vou tentar, e daqui a pouco eu posto aqui se consegui ou não.. ¬¬

[Good 4]

Pronto, só que agora estou com um problema.

 

Código CSS:

 

.boxgrid{background:url(img/Fotos/thumb.gif)}
.boxgrid{overflow:hidden;margin-right:-5px;zoom:1}
.boxgrid{background:none}

.thumbbox{background:#FFF}
.thumbbox{float:left;width:87px;margin-right:5px;overflow:hidden}
.thumbbox{height:100px;width:78px;margin-top:1px;margin-bottom:1px;margin-right:1px}

.thumb{height:80px;overflow:hidden;text-align:center;margin-bottom:1px}
.thumb img{margin-top:3px}
.thumb img{margin-top:0}

.boxmid{overflow-x:hidden;overflow-y:hidden}
.boxmid{padding-top:2px;padding-left:-1px}
.boxmid{background-color:#fff}


.picthumb2{float:left;margin-top:2px;margin-bottom:2px;margin-left:3px;width:85px;height:71px;background-position:50% 50%;background-repeat:no-repeat;overflow:hidden}
.ac2{text-align:center}

Código PHP:

 

<table border="0" width="100%" class="module"> 
<tr> 
  <td class="boxmid"> 

<div class="boxgrid"> 
<div style="border: 2px solid #EA0075; overflow: hidden;" class="ac2 picthumb2">
<div class="thumbbox">
<div class="thumb">
<a href="fotos.php?fotoid=12"><img src="upload/fotos/p/thumb_1911091258678121.jpg">
</a>
</div>
</div>
</div>

  </td>
</tr>
</table>

 

Aí quando as fotos são exibidas, ao invés dela fica com as bordas sobre a imagem, ela fica sobre o quadrado determinado para que as imagens não fiquem desalinhadas... O problema está na segunda DIV declarada. Se retirar ela, vai ficar aparecendo tudo alinhado.

[Good 4]

Estou mostrando até uma foto de como está sendo exibida...

 

a borda deveria ficar entre a foto, pois eu criei um retângulo para deixar as fotos alinhadas. Igual ao orkut, só que o orkut não usa bordas nas fotos... aí eu preciso de que seja com bordas...

 

 

 

vlw

[Good 4]

Ow.. ajuda ae gente!

 

 

só falta isso pra eu terminar..

[Good 4]

Olha.. como ninguém tentava me ajudar.. eu passava de uma duas horas tentando solucionar o meu problema.. e isso pode até ter virado comédia.. pois eu passei durante uns 3 dias, de uma a duas horas tentando solucionar..

 

aí, eu com raiva digitei um float:left; (de umas 1 da tarde)! Aí eu atualizei o código, mas quando fui no navegador, ele não atualizou o site (isso acontece de vez em quando aqui.. e olha que é no localhost).. aí fui dormir.. quando eu fui entrar no pc de novo lá pras 6 da tarde quando eu acordei fui direto pro pc.. aí atualizei de novo o site no navegador e deu certo.. e tudo isso é por causa de um simples float:left;

 

¬¬

 

dá raiva isso..

 

 

TÓPICO FECHADO! JÁ CONSEGUI AQUI! VLW PARA OS QUE TENTARAM ME AJUDAR!