Em continuidade, a reposta de Tobias Mesquita que mostrou ser prático na forma como um List/Grid view se comporta, no que diz à respeito a elementos estilizados com CSS.
Não podia eu, ficar sem compartilhar a minha resposta como sempre faço. E quando o faço, é para deixar claro que alcancei o objetivo.
Neste caso, pondo o exemplo da resposta dada acima sobre teste em alguns navegadores obsoleto, houve algumas falhas(entre um caso e outro, estava o CSS ou Javascript a não funcionar conforme o esperado), já que alguns navegadores de internet não suporta tal semântica moderna.
Cheguei a conclusão de que seria viável escrever um novo código compativel com diversos Navegadores de Internet(antigos e atuais), reaproveitando particularidades do conceito dado na resposta de Tobias Mesquita.
Em função disto, utilizei o Firefox 2.0 como base. Vejamos o código abaixo:
function changeSrc(id){
<!-- A variável "el" esta apontando para a div mestre, pela "TagName". Tendo controle sobre ela o botão de alternância, ondeá faz de certo modo as divs se auto ajustar -->
var el=document.getElementsByTagName('div')[0]; var imagem=document.getElementById(id); if(imagem.alt == "Abrir"){ imagem.src = "http://sl.uploads.im/t/yx4Ig.png"; imagem.alt = "Fechar"; el.className = "grade"; } else { imagem.src = "http://sm.uploads.im/t/sRShv.png"; imagem.alt = "Abrir"; el.className = "lista"; } }
/* Aqui inicializa a estilização do layout "Lista" */ .item img { width:100px; height:100px; position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-50px; } .lista .item { position: relative; margin: 5px; width: 100%; height: 128px; box-shadow: 0px 0px 5px black; border-radius: 3px; } .lista .item .foto { position: absolute; top: 0px; left: 0px; width: 128px; height: 128px; border-right: 1px solid silver; background-color: whitesmoke; } .lista .item .nome { position: absolute; top: 0px; right: 0px; left: 128px; height: 32px; line-height: 32px; padding-left: 5px; border-bottom: 1px solid silver; font-weight: bold; display: block; font-size: 14pt; } .lista .item .desc { position: absolute; top: 40px; right: 0px; bottom: 0px; left: 128px; padding: 5px; display: block; font-size: 12pt; } /* A partir daqui, é a estilização do layout "Grade" */ .grade .item { float: left; position: relative; left: 90px; width: 192px; height: 320px; box-shadow: 0px 0px 5px black; border-radius: 3px; } .grade .item .foto { position: absolute; top: 0px; left: 0px; width: 192px; height: 192px; border-bottom: 1px solid silver; background-color: whitesmoke; } .grade .item .nome { position: absolute; top: 192px; height: 32px; width: 192px; left: 0px; line-height: 32px; padding-left: 5px; border-bottom: 1px solid silver; font-weight: bold; display: block; font-size: 14pt; } .grade .item .desc { position: absolute; top: 222px; bottom: 0px; width: 192px; left: 0px; padding: 5px; display: block; font-size: 12pt; }
<!-- Abaixo é esta a primeira div, logo no início, sem "id" ou "class" alguma. Ela é a div mestre, fará com que as demais em seu interior sejam obrigatoriamente redimensionadas e alojadas -->
<!-- Isto se faz necessário para não precisar acrescentar códigos Javascript à mais no documento HTML, bastando apenas uma única div. -->
<!-- Se não fosse assim, logo teríamos de cria vários ids ou names para cada uma das divs filhos e percorrer com um laço for -->
<div>
<!-- Nesta parte temos a div classificada como lista, que por sua vez nos traz todo o conjuto de divs estilizada dentro do documento HTML -->
<div class="lista">
<!-- Logo abaixo temos a tag img que será nosso único botão que alternar entre a opção Lista e Grade -->
<img id="botao" alt="Abrir" src="http://sm.uploads.im/t/sRShv.png" onclick="changeSrc('botao')" />
<hr>
<!-- As alterações principais são feitas aqui, onde as letras do alfabeto que foram tidas como exemplo, deverão ser subtituídas pela tag image -->
<!-- Nota! - Para a descrição é recomendado no mínimo 170 caracteres(digitos) ou no máximo 177 caracteres(digitos), dentro desta caixa -->
<!-- Uma vez ultrapassado este limite dado, o usuário final terá uma visualização desagradável, texto exposto. -->
<!-- Caso deseje por mais informações, o ideal é ajustar a mesma com novos valores em sua margem, no código CSS -->
<div class="item">
<div class="foto">A</div>
<div class="nome">Titulo</div>
<div class="desc">Descricao</div>
</div>
<div class="item">
<div class="foto">B</div>
<div class="nome">Titulo</div>
<div class="desc">Descricao</div>
</div>
<div class="item">
<div class="foto">C</div>
<div class="nome">Titulo</div>
<div class="desc">Descricao</div>
</div>
<div class="item">
<div class="foto">D</div>
<div class="nome">Titulo</div>
<div class="desc">Descricao</div>
</div>
<div class="item">
<div class="foto">E</div>
<div class="nome">Titulo</div>
<div class="desc">Descricao</div>
</div>
<div class="item">
<div class="foto">F</div>
<div class="nome">Titulo</div>
<div class="desc">Descricao</div>
</div>
<div class="item">
<div class="foto">G</div>
<div class="nome">Titulo</div>
<div class="desc">Descricao</div>
</div>
<div class="item">
<div class="foto">H</div>
<div class="nome">Titulo</div>
<div class="desc">Descricao</div>
</div>
Enfim, quando você projeta com CSS precisa ter a habilidade de analisar o layout e decidir como colocar as div
.
Foi por causa desta minha dificuldade em racionar div
que fiz à pergunta.
Este outro exemplo abaixo, é ainda menor e portátil se comparado ao anterior.
A única diferença entre um e outro, fica por conta da estrutura CSS e Javascript. Veja:
function ativar(tag) {
var el = document.getElementsByTagName('div');
for (var i=0; i < el.length; i++) {
if (el[i].className == "menos") {
document.getElementById("clic").innerHTML = "Grade";
el[i].className = "mais";
} else {
document.getElementById("clic").innerHTML = "Lista";
el[i].className = "menos";
}
}
}
/* Ajusta para o modo Lista(Tabela) */
.mais {
width: auto;
}
/* Ajusta para o modo Grade(Galeria) */
.menos {
width: 128px;
}
/* Estiliza o Menu(botão) */
a:link {
text-decoration: underline;
}
a:visited {
color: navy;
text-decoration: none;
}
a:hover {
color: dodgerblue;
text-decoration: none;
}
a:active {
color: azure;
text-decoration: underline;
background-color: dodgerblue;
}
/* Fim Estilização do Menu */
/* Estilização do Corpo da Página */
* {
margin: 0;
padding: 0;
}
/* Estiliza o Parágrafo da Descrição */
p {
line-height: 20px
}
/* Estiliza os bloco de conteudo */
#bloco {
margin-left: 5%;
float: left;
left: 65%;
}
/* Estiliza os blocos que mantém as figura */
#figura {
background: whitesmoke;
text-align: center;
padding: 20px;
margin: 5px;
float: left;
}
/* Estiliza os blocos que mantém as figura */
#conteudo {
text-align: left;
padding: 0px;
margin: 5px;
left: 35%;
}
<center>
<a href="javascript:void(0)" onclick="ativar(this)" id="clic">Lista</a>
</center>
<hr color="royalblue" size="1" width="100%" />
</br>
<div id="bloco">
<div id="figura">
<a href="http://lorempixel.com/128/96/">
<img src="http://lorempixel.com/128/96/" border="0" />
</a>
</div>
<!-- /figura -->
<div id="conteudo">
<h3>Titulo 1 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
</div>
<!-- /conteudo -->
</div>
<!-- /bloco -->
<div id="bloco">
<div id="figura">
<a href="http://lorempixel.com/128/96/">
<img src="http://lorempixel.com/128/96/" border="0" />
</a>
</div>
<!-- /figura -->
<div id="conteudo">
<h3>Titulo 2 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
</div>
<!-- /conteudo -->
</div>
<!-- /bloco -->
<div id="bloco">
<div id="figura">
<a href="http://lorempixel.com/128/96/">
<img src="http://lorempixel.com/128/96/" border="0" />
</a>
</div>
<!-- /figura -->
<div id="conteudo">
<h3>Titulo 3 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
</div>
<!-- /conteudo -->
</div>
<!-- /bloco -->
<div id="bloco">
<div id="figura">
<a href="http://lorempixel.com/128/96/">
<img src="http://lorempixel.com/128/96/" border="0" />
</a>
</div>
<!-- /figura -->
<div id="conteudo">
<h3>Titulo 4 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
</div>
<!-- /conteudo -->
</div>
<!-- /bloco -->
<div id="bloco">
<div id="figura">
<a href="http://lorempixel.com/128/96/">
<img src="http://lorempixel.com/128/96/" border="0" />
</a>
</div>
<!-- /figura -->
<div id="conteudo">
<h3>Titulo 5 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
</div>
<!-- /conteudo -->
</div>
<!-- /bloco -->
<div id="bloco">
<div id="figura">
<a href="http://lorempixel.com/128/96/">
<img src="http://lorempixel.com/128/96/" border="0" />
</a>
</div>
<!-- /figura -->
<div id="conteudo">
<h3>Titulo 6 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
</div>
<!-- /conteudo -->
</div>
<!-- /bloco -->
<div id="bloco">
<div id="figura">
<a href="http://lorempixel.com/128/96/">
<img src="http://lorempixel.com/128/96/" border="0" />
</a>
</div>
<!-- /figura -->
<div id="conteudo">
<h3>Titulo 7 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
</div>
<!-- /conteudo -->
</div>
<!-- /bloco -->
<div id="bloco">
<div id="figura">
<a href="http://lorempixel.com/128/96/">
<img src="http://lorempixel.com/128/96/" border="0" />
</a>
</div>
<!-- /figura -->
<div id="conteudo">
<h3>Titulo 8 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
</div>
<!-- /conteudo -->
</div>
<!-- /bloco -->
<div id="bloco">
<div id="figura">
<a href="http://lorempixel.com/128/96/">
<img src="http://lorempixel.com/128/96/" border="0" />
</a>
</div>
<!-- /figura -->
<div id="conteudo">
<h3>Titulo 9 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
</div>
<!-- /conteudo -->
</div>
<!-- /bloco -->
<div id="bloco">
<div id="figura">
<a href="http://lorempixel.com/128/96/">
<img src="http://lorempixel.com/128/96/" border="0" />
</a>
</div>
<!-- /figura -->
<div id="conteudo">
<h3>Titulo 0 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
</div>
<!-- /conteudo -->
</div>
<!-- /bloco -->
O código em si esta bem comentado e são auto-explicativo, não havendo qualquer dúvida, termino por aqui.