13 replies to this topic

[Julinho]

Daeh galera. Comessei a me enteressar a pouco tempo pro tableless e gostaria de um auxilio.
Fiz uma galeria de imagens no qual as thumbs caem dentro de um div. Só que por algum motivo uma das minhas página deu problema. Tipow eu tenho 3 thumbs por linha, funcionou sempre muito bem mais hj deu problema. Aconteceu que em uma linha tem 3 em outra tem 1 e uma terceira (que não deveria existir 3 linhas) com 2, sendo que as thunbs são todas do mesmo tamanho. O que pode ser?
Link para a visualização do problema: LINK

[bimonti]

Não abriu o site aqui não ... deve ser minha net ... nem jogar um CS eu to cnoseguindo.

[Julinho]

Eu já meio que achei o problema, ele está num padding-top que insiro nas imagens horizontais. Sem ele não dá problema, com ele dá. Detalhe que foi a unica forma que consegui centralizar a imagem. Se alguém souber outra forma...

[bimonti]

Você quer centralizar na vertical ?

E quando insere o padding ele quebra pra linha de baixo ?

A propósito, como se trata de estilos, mandei pra CSS.

Edit ------------->

A treta está nesta parte circulada em vermelho:
 treta.gif   14.52KB   5 downloads

Como o elemento tem espaço para se encaixar na coluna de cima, ele o faz ...

No seu caso, seria melhor se você criar uma espécie de caixa com um tamanho padrão, e colocar as fotos dentro.

Edição feita por: bimonti, 26/07/2007, 10:05.

[Julinho]

Na boa esse meu sistema tá usando drogas. Uhauhauha, pq se eu tiro o padding dah foto horizontal dah problema na página 0 e seu eu coloco dá problema na pagina 1. uhauhaua.
Kra como eu poderia criar essa caixa ou evitar esse tipow de problema e ainda centralizar na verical? Com essa caixa poderei dar padding top sem ter problemas?
Atualmente meu CSS é:

.container{
	width: 320px;
}
.div_imagem{
	float:left;
	width:96px;
	height: 96px;
	background-image: url(images/fundo_thumb.jpg);
	padding: 3px;
	background-repeat: no-repeat;
	vertical-align: middle;
}
.div_imagem1{
	float:left;
	width:96px;
	height: 96px;
	background-image: url(images/fundo_thumb.jpg);
	background-repeat: no-repeat;
	vertical-align: middle;
}

Com esse dá o problema na pagina 0(primeira).

[Raphaell]

Opa brother, entra aí:

http://forum.wmonlin...?showtopic=2651

Abraços !

[Julinho]

Uhm boa, agora entendi como funciona umas coisas que eu não sabia. Só tenho uma dúvida, eu usava dois styles diferentes para as imagens vericais e horizontais. Sendo que a unica diferença era que as horizontais tinham um padding para colocalas ao centro. Porque elas ficavam com tamanhos diferentes? E como posso centralizalas sem usar padding?

Edição feita por: Julinho, 26/07/2007, 11:49.

[Raphaell]

Tente, margin: auto;.

Abraço !

[bimonti]

Acho assim, isso é uma lista de imagens, então usa uma lista desordenada (mais ou menos):

<ul>
  <li><img /></li>
</ul>

ul{
  list-style-type:none;
  list-style-position:inside;
}
ul li{
  width:100px;
  height:100px;
  display:block;
  float:left;
}
ul li img{
  margin:auto;
}

Por ae...

[Julinho]

Não funcionou naum kra

[savior]

Julinho.

Tableless não é usar somente divs, compreendeu totalmente errado o propósito do negócio >.<.
A para variar tenta pedir ajuda, dando ctrl+c ctrl +v sem mudar o código. Diego Eis ensina que tableless é arte de deixar o site leve, código semântico e organizado.
Coisa que não vi ali.

Para loops assim sempre uso tabelas mesmo.
Dão conta do serviço direitinho e nada impede de você estilizar elas via css.

Recomendo você ler muito nesse site antes de sair fazendo este tipo de tópico: www.tableless.com.br

[Raphaell]

Só completando o que o savior disse, Tableless é uma metodologia que aborda sim o uso das divs para criação dos blocos de conteúdo, mais não só se baseia naquilo, o Tableless, também ajuda muito os SE's(Search Engines), pois dá mais facilidade para os Bots, acessarem seu site e assim subir o rank dele. O tableless, tem de ser organizado e semântico, somente isso.

[bimonti]

"Down his chosen road he rides to saves the world."
The accolade


Tableless é igual chifre .. é uma coisa que colocam na "SUA" cabeça ... rs

Entendam o principal, tableless não é em nenhum momento abrir mão do uso de tabelas. É uma questão de semântica. Qual a finalidade das tabelas ? Exibir dados tabulares (aposto que essa ninguém sabia..). Você só deve abrir mão das tabelas ao montar os layouts. Nada de fazer uma tabela com 3 colunas, e colocar os menus nos cantos e conteúdo no meio. Esses são blocos de conteúdo e devem ser utilizados elementos para esta finalidade. Um layer. Na verdade uma div, layer é coisa do NN.

O código do julinho não estava errado, cada um interpreta como quiser. Eu sugeri o uso de listas porque entendo a disposição citada como uma lista de imagens em pré-seleção.

Agora, eu não coloquei o código pronto, perfeito em sua essência. É somente a base, é necessário implementá-lo de acordo. Eu não sei as medidas do seu layout, não coloquei margin ou padding justamente por isso. Tenho certeza absoluta que esse código é plausível, já utilizei-me de marcação semelhante com sucesso para exibição de produtos em um site de e-commerce.

Agora, se faltou vontade nada podemos fazer. Se não funcionou, poste um screenshot do problema, ou seja específico quanto a dúvida/problema. Um simples "não funcionou", me leva a crer que não funcionou de fato, mas o problema morre ali.

Ajude-se a ser ajudado.

[Julinho]

bimonti eu concordo com o que você fala além de entender pouco dos divs e CSS. Eu acabei pesquisando sobre, com as informações que vocês me passaram. Mais pelo jeito já caih no primeiro buraco dele. Ou seja A LENDA DO HOMEM QUE CONSEGUIA CENTRALIZAR VERTICALMENTE NO DIV. eheheheh. Quanto ao resto consegui resolver alterando algumas coisas que havia inserido no meu CSS sem saber o que fazia, e soh agora sei.