Estou desenvolvendo um tema no Wordpress e na index eu teria 6 quadrados de destaque logo abaixo do topo e da barra de navegação. A parte do Wordpress não é o problema, mas sim como estes destaques ficariam dispostos:
- Seriam 4 colunas para 3 linhas e 6 itens que seriam definidos na página administrativa do Wordpress nas propriedades do tema
- Sempre seriam 6 itens, nem mais, nem menos
- Cada item de destaque poderia ter 6 tamanhos diferentes
Agora vem os problemas:
Definindo os itens e os destaques pelo painel ainda não é a questão, a dificuldade que estou tendo é com o posicionamento. Coloquei todos os ítens com um float:left no CSS (se colocasse right não faria diferença, só inverteria a ordem), o código mais ou menos assim:
<ul id="navigation"> <li class="highlight"><a href="#" class="triplov">Kylie Minogue</a></li> <li class="highlight"><a href="#" class="unico">Item 4</a></li> <li class="highlight"><a href="#" class="unico">Item 2</a></li> <li class="highlight"><a href="#" class="duplov">Camisa Jeans?</a></li> <li class="highlight"><a href="#" class="duplov">Gossip<br />Music For Man</a></li> <li class="highlight"><a href="#" class="triploh">São Paulo</a></li> </ul>
Para resolver pensei em colocar um div para segurar os itens menores e assim formar uma coluna com o tamanho da coluna do lado direito e funcionou!
<ul id="navigation"> <li class="highlight"><a href="#" class="triplov">Kylie Minogue</a></li> <div id="segurador"> <li class="highlight"><a href="#" class="unico">Item 4</a></li> <li class="highlight"><a href="#" class="unico">Item 2</a></li> </div> <li class="highlight"><a href="#" class="duplov">Camisa Jeans?</a></li> <li class="highlight"><a href="#" class="duplov">Gossip<br />Music For Man</a></li> <li class="highlight"><a href="#" class="triploh">São Paulo</a></li> </ul>
Agora vem a grande dúvida:
Como isso vai ser dinâmico, a ordem das colunas vai ser definida a cada vez que o administrador quiser mudar os destaques, ou seja, eu tenho que deixar tudo "solto" para depois dependendo da combinação de classes seguidas colocar os workarounds. Como faço para filtrar quando houver de duas ou mais <li><a class="unico"></a></li> seguidas uma da outra e colocá-las dentro do Div com a id #segurador?
Sei que eu também teria quase o mesmo tipo de problema também para as linhas verticais, mas conseguindo solucionar esta parte, já está ótimo!
Não quero colocar o <div> antes de cada item com essa classe, seria apenas quando as classes se repetissem logo atrás da outra.
A outra solução seria já que eu utilizarei uma página de setup dessa parte de destaques eu usar position:absolute e algo WYSIWYG com o PHP e formulários, mas eu acho que isso daria mais trabalho do que usar como já estou usando, além de que jogo todos os estilos no CSS e as únicas coisas que ficariam inline seriam as imagens de background para o efeito de hover que eu estou utilizando, já com posicionamento absoluto o código final ficaria meio "sujo" sem semântica nnehuma.
Ou, existe algo ***mágico*** que faça todos os floats se encaixarem nos buracos a medida que colidem?
Edição feita por: Sprite, 19/08/2009, 15:02.
