In continuity, the Tobias Mesquita response that proved to be practical in the way a List / Grid view behaves, with respect to stylized elements with CSS .
I could not, without sharing my answer as I always do. And when I do, it's to make it clear that I've reached the goal.
In this case, putting the example of the answer given above test on some obsolete browsers, there were some flaws (between one case and another, it was CSS or Javascript not working as expected), since some internet browsers supports such modern semantics.
I came to the conclusion that it would be feasible to write a new code compatible with several Internet browsers (old and current), reusing features of the concept given in Tobias Mesquita .
Because of this, I used Firefox 2.0 as a base. Let's look at the code below:
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>
Anyway, when you design with CSS you need to have the ability to analyze the layout and decide how to put div
.
It was because of this my difficulty in rationing div
that I asked the question .
This other example below is even smaller and portable compared to the previous one.
The only difference between the two is the CSS and Javascript structure. See:
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 -->
The code itself is well-commented and self-explanatory, there being no doubt, I end up here.