[gitec] Portlet Parlamentares

Adriano camaramg2 em gmail.com
Quinta Junho 30 10:28:19 BRT 2016


Leandro, aproveitando da sua boa vontade e dos seus conhecimentos, que dica
vc poderia me dar para que esta página (
http://www.careacu.mg.leg.br/institucional/presidentes) fique com uma
responsividade adequada, principalmente qdo visualizada através de um
smartphone?

No CSS está assim:

/********** Presidentes **********/
.presidentes { display: table; }
.presidente {
  float: left; width: 20%;
  text-align: center;
}

Obrigado.

2016-06-30 9:46 GMT-03:00 Adriano <camaramg2 em gmail.com>:

> Já alterei...
> Obrigado Leandro.
>
> 2016-06-30 9:32 GMT-03:00 Leandro Roberto Silva <
> leandroroberto.br em gmail.com>:
>
>> Adriano,
>> fiz a customização direto no firefox e esqueci de testar no crhome... a
>> responsividade no crhome não está funcionando com esperado... troque a
>> propriedade box-sizing para "box-sizing: border-box;"... acho que
>> resolverá...
>>
>>
>>
>> Em qui, 30 de jun de 2016 às 07:55, Adriano <camaramg2 em gmail.com>
>> escreveu:
>>
>>> Obrigado pela ajuda de todos!
>>> Leandro, show de bola sua dica!
>>>
>>> 2016-06-29 15:10 GMT-03:00 Leandro Roberto Silva <
>>> leandroroberto.br em gmail.com>:
>>>
>>>> Olá Adriano,
>>>>
>>>> mude as classes para:
>>>>
>>>> *  .vereadores {*
>>>> *    display: block;*
>>>> *    text-align: center;*
>>>> *  }*
>>>> *  .vereador {*
>>>> *    max-width: 20%;*
>>>> *    display: inline-block;*
>>>> *    margin-bottom: 1em;*
>>>> *    padding: 2px;*
>>>> *    box-sizing: padding-box;*
>>>>
>>>> *    opacity: 0.8;                    ** /***opcional*/*
>>>> *    transition: opacity 0.3s ease;   ** /***opcional*/*
>>>> *  }*
>>>> *  .vereador:hover {                  ** /***opcional*/*
>>>> *    opacity: 1;                       /***opcional*/*
>>>> *  }                                  ** /***opcional*/*
>>>> *  .vereador img {*
>>>> *    width: 100%;*
>>>> *  }*
>>>>
>>>> retire: os BR que existem dentro de cada classe vereador, ou insira as
>>>> linhas abaixo:
>>>> .vereador br {
>>>>     display: none;
>>>> }
>>>> ou deixe também... rsrs... é de sua escolha deixá-los... (se preferir
>>>> deixá-los, vc pode retirar a linha ali em cima: "margin-bottom: 1em")
>>>>
>>>> ps: As linhas que estão com * /***opcional*/ * são inclusivas, se
>>>> retirar uma, vc deve retirar todas...
>>>>
>>>>
>>>>
>>>>
>>>> Em qua, 29 de jun de 2016 às 13:37, Fabiano de Almeida <
>>>> informatica em telemacoborba.pr.leg.br> escreveu:
>>>>
>>>>> Para evitar o efeito cascata tão bem salientado pelo amigo Ângelo,
>>>>> você pode usar CSS inline. Não é tão produtivo, mas é uma alternativa.
>>>>>
>>>>> 2016-06-29 10:13 GMT-03:00 Angelo Marcondes de Oliveira Neto <
>>>>> angelomarcondes em gmail.com>:
>>>>>
>>>>>> Adriano,
>>>>>>
>>>>>> Para centralizar algo você deve utilizar CSS.
>>>>>> Mas lembre-se que, o seu portal vai ser visualizado em várias telas
>>>>>> então é interessante que você estude e simule estas visualizações.
>>>>>> Mas lembre-se que CSS quer dizer* Cascading Style Sheets* ou seja
>>>>>> Folha de estilo em CASCATA.
>>>>>> CASCATA, CASCATA, Efeito CASCATA
>>>>>> <https://pt.wikipedia.org/wiki/Efeito_domin%C3%B3>.
>>>>>> Sendo assim, depois da brincadeira chata, com a cascata, utilize as
>>>>>> alterações CSS com atenção e sempre em um portal de destes para não
>>>>>> comprometer o portal em produção.
>>>>>> Para aprender mais sobre CSS e a HTML eu indico a
>>>>>> http://www.w3schools.com/
>>>>>>
>>>>>> Abraços
>>>>>>
>>>>>> Angelo Marcondes de Oliveira Neto. <angelomarcondes em gmail.com>
>>>>>> http://angelomarcondes.blogspot.com - portifólio de serviços.
>>>>>> angelomarcondes em gmail.com
>>>>>> (34) 91414287
>>>>>> Carneirinho - MG
>>>>>>
>>>>>>
>>>>>> Em 22 de junho de 2016 08:25, Adriano <camaramg2 em gmail.com> escreveu:
>>>>>>
>>>>>>> Bom dia,
>>>>>>>
>>>>>>>
>>>>>>> Queria saber como faço para colocar as fotos dos vereadores de forma
>>>>>>> que fiquem *centralizadas dentro do portlet* (5 fotos na linha de
>>>>>>> cima e 4 na linha de baixo).
>>>>>>>
>>>>>>>
>>>>>>> Portlet: Parlamentares 2013/2016 <http://www.careacu.mg.leg.br/>
>>>>>>>
>>>>>>>
>>>>>>> Criei este portlet da seguinte forma:
>>>>>>>
>>>>>>>
>>>>>>> <h2 style="text-align: center; font-family: Verdana;"
>>>>>>> data-mce-style="text-align: center; font-family: Verdana;">Parlamentares
>>>>>>> 2013/2016</h2>
>>>>>>>
>>>>>>> <div class="vereadores">
>>>>>>>
>>>>>>> <div class="vereador"><a class="external-link"
>>>>>>> href="institucional/parlamentares/show_window?url=
>>>>>>> http://sapl.careacu.mg.leg.br/consultas/parlamentar/parlamentar_mostrar_proc?cod_parlamentar=139%26iframe=1"
>>>>>>> target="_self" title=""><img class="image-inline"
>>>>>>> src="resolveuid/90b7e4f540984126be223e88ca9ed9e8" /><br /></a></div>
>>>>>>>
>>>>>>> <div class="vereador"><a class="external-link"
>>>>>>> href="institucional/parlamentares/show_window?url=
>>>>>>> http://sapl.careacu.mg.leg.br/consultas/parlamentar/parlamentar_mostrar_proc?cod_parlamentar=1%26iframe=1"
>>>>>>> target="_self" title=""><img class="image-inline"
>>>>>>> src="resolveuid/020fb998ceca4f28bc5983014ff4a2d0" /><br /></a></div>
>>>>>>>
>>>>>>> <div class="vereador"><a class="external-link"
>>>>>>> href="institucional/parlamentares/show_window?url=
>>>>>>> http://sapl.careacu.mg.leg.br/consultas/parlamentar/parlamentar_mostrar_proc?cod_parlamentar=140%26iframe=1"
>>>>>>> target="_self" title=""><img class="image-inline"
>>>>>>> src="resolveuid/5b1d4af6416746f2be4add96bbe9e020" /><br /></a></div>
>>>>>>>
>>>>>>> <div class="vereador"><a class="external-link"
>>>>>>> href="institucional/parlamentares/show_window?url=
>>>>>>> http://sapl.careacu.mg.leg.br/consultas/parlamentar/parlamentar_mostrar_proc?cod_parlamentar=3%26iframe=1"
>>>>>>> target="_self" title=""><img class="image-inline"
>>>>>>> src="resolveuid/a0e5c83cf4434e7397a82690efeddcaa" /><br /></a></div>
>>>>>>>
>>>>>>> <div class="vereador"><a class="external-link"
>>>>>>> href="institucional/parlamentares/show_window?url=
>>>>>>> http://sapl.careacu.mg.leg.br/consultas/parlamentar/parlamentar_mostrar_proc?cod_parlamentar=112%26iframe=1"
>>>>>>> target="_self" title=""><img class="image-inline"
>>>>>>> src="resolveuid/e817c9bf1b6247599ec4d6950b92ba49" /><br /></a></div>
>>>>>>>
>>>>>>> <div class="vereador"><a class="external-link"
>>>>>>> href="institucional/parlamentares/show_window?url=
>>>>>>> http://sapl.careacu.mg.leg.br/consultas/parlamentar/parlamentar_mostrar_proc?cod_parlamentar=141%26iframe=1"
>>>>>>> target="_self" title=""><img class="image-inline"
>>>>>>> src="resolveuid/22e82b4cc94b47c68edec85961928f60" /><br /></a></div>
>>>>>>>
>>>>>>> <div class="vereador"><a class="external-link"
>>>>>>> href="institucional/parlamentares/show_window?url=
>>>>>>> http://sapl.careacu.mg.leg.br/consultas/parlamentar/parlamentar_mostrar_proc?cod_parlamentar=133%26iframe=1"
>>>>>>> target="_self" title=""><img class="image-inline"
>>>>>>> src="resolveuid/b91936832604458cb98bace45b9d4572" /><br /></a></div>
>>>>>>>
>>>>>>> <div class="vereador"><a class="external-link"
>>>>>>> href="institucional/parlamentares/show_window?url=
>>>>>>> http://sapl.careacu.mg.leg.br/consultas/parlamentar/parlamentar_mostrar_proc?cod_parlamentar=138%26iframe=1"
>>>>>>> target="_self" title=""><img class="image-inline"
>>>>>>> src="resolveuid/bd129583bb7a4cf7bea72957b0b23a4a" /><br /></a></div>
>>>>>>>
>>>>>>> <div class="vereador"><a class="external-link"
>>>>>>> href="institucional/parlamentares/show_window?url=
>>>>>>> http://sapl.careacu.mg.leg.br/consultas/parlamentar/parlamentar_mostrar_proc?cod_parlamentar=8%26iframe=1"
>>>>>>> target="_self" title=""><img class="image-inline"
>>>>>>> src="resolveuid/2b7059c206f941a7a229ee1e8f0b0c64" /><br /></a></div>
>>>>>>>
>>>>>>> E acrescentei no arquivo css:
>>>>>>>
>>>>>>> /********** Vereadores **********/
>>>>>>> .vereadores { display: table; }
>>>>>>> .vereador {
>>>>>>>   float: left; width: 20%;
>>>>>>>   text-align: center;
>>>>>>> }
>>>>>>>
>>>>>>> ​Obrigado.​
>>>>>>>
>>>>>>> --
>>>>>>> Adriano de Castro
>>>>>>> ​​
>>>>>>> www.careacu.mg.leg.br
>>>>>>>
>>>>>>> --
>>>>>>> Histórico do grupo:
>>>>>>>
>>>>>>> http://colab.interlegis.leg.br/search/?type=thread&order=latest&list=gitec
>>>>>>>
>>>>>>> Regras de participação:
>>>>>>> http://colab.interlegis.leg.br/wiki/ComoParticiparComunidade
>>>>>>>
>>>>>>> Para administrar ou excluir sua conta visite:
>>>>>>> https://listas.interlegis.gov.br/mailman/listinfo/gitec
>>>>>>>
>>>>>>
>>>>>>
>>>>>> --
>>>>>> Histórico do grupo:
>>>>>>
>>>>>> http://colab.interlegis.leg.br/search/?type=thread&order=latest&list=gitec
>>>>>>
>>>>>> Regras de participação:
>>>>>> http://colab.interlegis.leg.br/wiki/ComoParticiparComunidade
>>>>>>
>>>>>> Para administrar ou excluir sua conta visite:
>>>>>> https://listas.interlegis.gov.br/mailman/listinfo/gitec
>>>>>>
>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> Fabiano de Almeida
>>>>> C.M. Telêmaco Borba - PR
>>>>> --
>>>>> Histórico do grupo:
>>>>>
>>>>> http://colab.interlegis.leg.br/search/?type=thread&order=latest&list=gitec
>>>>>
>>>>> Regras de participação:
>>>>> http://colab.interlegis.leg.br/wiki/ComoParticiparComunidade
>>>>>
>>>>> Para administrar ou excluir sua conta visite:
>>>>> https://listas.interlegis.gov.br/mailman/listinfo/gitec
>>>>
>>>> --
>>>> att.
>>>> Leandro Roberto Silva
>>>> Câmara Municipal de Jataí
>>>>
>>>> --
>>>> Histórico do grupo:
>>>>
>>>> http://colab.interlegis.leg.br/search/?type=thread&order=latest&list=gitec
>>>>
>>>> Regras de participação:
>>>> http://colab.interlegis.leg.br/wiki/ComoParticiparComunidade
>>>>
>>>> Para administrar ou excluir sua conta visite:
>>>> https://listas.interlegis.gov.br/mailman/listinfo/gitec
>>>>
>>>
>>>
>>>
>>> --
>>> Adriano de Castro
>>> www.careacu.mg.leg.br
>>> --
>>> Histórico do grupo:
>>>
>>> http://colab.interlegis.leg.br/search/?type=thread&order=latest&list=gitec
>>>
>>> Regras de participação:
>>> http://colab.interlegis.leg.br/wiki/ComoParticiparComunidade
>>>
>>> Para administrar ou excluir sua conta visite:
>>> https://listas.interlegis.gov.br/mailman/listinfo/gitec
>>
>> --
>> att.
>> Leandro Roberto Silva
>> Câmara Municipal de Jataí
>>
>> --
>> Histórico do grupo:
>> http://colab.interlegis.leg.br/search/?type=thread&order=latest&list=gitec
>>
>> Regras de participação:
>> http://colab.interlegis.leg.br/wiki/ComoParticiparComunidade
>>
>> Para administrar ou excluir sua conta visite:
>> https://listas.interlegis.gov.br/mailman/listinfo/gitec
>>
>
>
>
> --
> Adriano de Castro
> www.careacu.mg.leg.br
>



-- 
Adriano de Castro
www.careacu.mg.leg.br
-------------- Próxima Parte ----------
Um anexo em HTML foi limpo...
URL: <http://listas.interlegis.gov.br/pipermail/gitec/attachments/20160630/393145b3/attachment.html>


Mais detalhes sobre a lista de discussão GITEC