[Resolvido] Chrome Img Css

[Alvaro Jr 2]

Olá queria saber uma solução mais mais simples para esse erro no

Chrome

 

 

Pensei em por as imagen em div cada uuma mais nao vale apena

depois tentei por padding nao deu certo

depois tentei definir damanha das img height e width tbm nao deu certo

 

se tive alguma solução rapida e funcional pra madito Chrome =)

[André do Vale 76]

Cara, como está sua marcação HTML e a formatação CSS deste trecho?

 

Dica: ao flutuar elementos, uma maneira de ajustar o espaçamento estranho dos blocos, e do pai destes, é trabalhar corretamente com a propriedade "display", ok?

[Alvaro Jr 2]

Aqui ta o codigo

HTML

 

<div id="page1">

   <div id="col_left">


                   <div id="texto_galeria_cabecalho"><strong>NOSSOS MELHORES MOMENTOS</strong></div>

                  <div id="box_galeria"> 

        <!--Photo Gallery começa -->         

        <div id="vlightbox">



        <a class="vlightbox"a href="galeria_1/data/images/foto_1.JPG " title="Alunos do Projovem Trabalhador">
        <img src="galeria_1/data/thumbnails/foto_1.JPG" alt= width="120" width="118" height="80" border="0"/></a>

        <a class="vlightbox" href="galeria_1/data/images/foto_2.jpg" title="Educação Infantil">
        <img src="galeria_1/data/thumbnails/foto_2.jpg" alt= width="120" width="118" height="80" border="0"/></a>

        <a class="vlightbox" href="galeria_1/data/images/foto_3 .jpg" title="Aulas de Natação">
        <img src="galeria_1/data/thumbnails/foto_3 .jpg"alt= width="120" width="118" height="80" border="0"/></a>

        <a class="vlightbox" href="galeria_1/data/images/foto_4.jpg" title="Telecentro 1">
        <img src="galeria_1/data/thumbnails/foto_4.jpg" alt= width="120" width="118" height="80" border="0"/></a>

        <a class="vlightbox" href="galeria_1/data/images/foto_5.JPG" title="Educação Infantil para crianças de 04 e 05 anos">
        <img src="galeria_1/data/thumbnails/foto_5.JPG"alt= width="120" width="118" height="80" border="0"/></a>

        <a class="vlightbox" href="galeria_1/data/images/foto_6.jpg" title="Sala de aula">
        <img src="galeria_1/data/thumbnails/foto_6.jpg" alt= width="120" width="118" height="80" border="0"/></a>

        <a class="vlightbox" href="galeria_1/data/images/foto_7.JPG" title="Curso de empregabilidade e empreendedorismo">
        <img src="galeria_1/data/thumbnails/foto_7.JPG" alt= width="120" width="118" height="80" border="0"/></a>

        <a class="vlightbox" href="galeria_1/data/images/foto_8.JPG" title="Café da manhã  dos alunos do Projovem Trabalhador">
        <img src="galeria_1/data/thumbnails/foto_8.JPG"  alt= width="120" width="118" height="80" border="0"/></a>

        <a class="vlightbox" href="galeria_1/data/images/foto_9.JPG" title="Projovem Trabalhador">
        <img src="galeria_1/data/thumbnails/foto_9.JPG"  alt= width="120" width="118" height="80" border="0"/></a>

        <a class="vlightbox" href="galeria_1/data/images/foto_10.JPG" title="Educação Infantil ">
        <img src="galeria_1/data/thumbnails/foto_10.JPG" alt= width="120" width="118" height="80" border="0"/></a>

        <a class="vlightbox" href="galeria_1/data/images/foto_11.jpg" title="Telecentro 2">
        <img src="galeria_1/data/thumbnails/foto_11.jpg"  alt= width="120" width="118" height="80" border="0"/></a>

        <a class="vlightbox" href="galeria_1/data/images/foto_12.JPG" title=" Projovem Trabalhador">
        <img src="galeria_1/data/thumbnails/foto_12.JPG"  alt= width="120" width="118" height="80" border="0"/></a>

         <a class="vlightbox" href="galeria_1/data/images/foto_13.JPG" title=" ">
        <img src="galeria_1/data/thumbnails/foto_13.JPG"  alt= width="120" width="118" height="80" border="0"/></a>

                 <a class="vlightbox" href="galeria_1/data/images/foto_14.jpg" title=" ">
        <img src="galeria_1/data/thumbnails/foto_14.jpg"  alt= width="120" width="118" height="80" border="0"/></a>

                 <a class="vlightbox" href="galeria_1/data/images/foto_15.jpg" title=" ">
        <img src="galeria_1/data/thumbnails/foto_15.jpg"  alt= width="120" width="118" height="80" border="0"/></a>

                 <a class="vlightbox" href="galeria_1/data/images/foto_16.jpg" title=" ">
        <img src="galeria_1/data/thumbnails/foto_16.jpg"  alt= width="120" width="118" height="80" border="0"/></a>

                 <a class="vlightbox" href="galeria_1/data/images/foto_17.jpg" title=" ">
        <img src="galeria_1/data/thumbnails/foto_17.jpg"  alt= width="120" width="118" height="80" border="0"/></a>

                 <a class="vlightbox" href="galeria_1/data/images/foto_18.jpg" title=" ">
        <img src="galeria_1/data/thumbnails/foto_18.jpg"  alt= width="120" width="118" height="80" border="0"/></a>

                 <a class="vlightbox" href="galeria_1/data/images/foto_19.jpg" title=" ">
        <img src="galeria_1/data/thumbnails/foto_19.jpg"  alt= width="120" width="118" height="80" border="0"/></a>

        <a class="vlightbox" href="galeria_1/data/images/foto_20.jpg" title=" ">
        <img src="galeria_1/data/thumbnails/foto_20.jpg"  alt= width="120" width="118" height="80" border="0"/></a>         

                 <a class="vlightbox" href="galeria_1/data/images/foto_21.jpg" title=" ">
        <img src="galeria_1/data/thumbnails/foto_21.jpg"  alt= width="120" width="118" height="80" border="0"/></a>

                 <a class="vlightbox" href="galeria_1/data/images/foto_23.jpg" title=" ">
        <img src="galeria_1/data/thumbnails/foto_23.jpg"  alt= width="120" width="118" height="80" border="0"/></a>

        <a class="vlightbox" href="galeria_1/data/images/foto_24.jpg" title=" ">
        <img src="galeria_1/data/thumbnails/foto_24.jpg"  alt= width="120" width="118" height="80" border="0"/></a>

                 <a class="vlightbox" href="galeria_1/data/images/foto_25.jpg" title=" ">
        <img src="galeria_1/data/thumbnails/foto_25.jpg"  alt= width="120" width="118" height="80" border="0"/></a>

                 <a class="vlightbox" href="galeria_1/data/images/foto_26.jpg" title=" ">
        <img src="galeria_1/data/thumbnails/foto_26.jpg"  alt= width="120" width="118" height="80" border="0"/></a>

                 <a class="vlightbox" href="galeria_1/data/images/foto_27.jpg" title=" ">
        <img src="galeria_1/data/thumbnails/foto_27.jpg"  alt= width="120" width="118" height="80" border="0"/></a>

                 <a class="vlightbox" href="galeria_1/data/images/foto_28.jpg" title=" ">
        <img src="galeria_1/data/thumbnails/foto_28.jpg"  alt= width="120" width="118" height="80" border="0"/></a>

                 <a class="vlightbox" href="galeria_1/data/images/foto_29.jpg" title=" ">
        <img src="galeria_1/data/thumbnails/foto_29.jpg"  alt= width="120" width="118" height="80" border="0"/></a>

                 <a class="vlightbox" href="galeria_1/data/images/foto_30.jpg" title=" ">
        <img src="galeria_1/data/thumbnails/foto_30.jpg"  alt= width="120" width="118" height="80" border="0"/></a>

                 <a class="vlightbox" href="galeria_1/data/images/foto_31.gif" title=" ">
        <img src="galeria_1/data/thumbnails/foto_31.gif"  alt= width="120" width="118" height="80" border="0"/></a>        

	 <script src="galeria_1/engine/js/visuallightbox.js" type="text/javascript"></script>
     	 </div>

        <!--Photo Gallery termina -->

        </div>
        </div>
        </div>

 

CSS

 

 
.vlightbox img{
border:2px solid #09F;
border-style:dotted;
padding:4px 5px 6px 7px;
margin:auto;
}



#adjustment_page{
height:100%;}
#page1{
border-radius: 6px;
box-shadow: 0px 5px 20px 2px rgba(0,0,0,0.1);
height:100%;
margin-top:25px;}

#box_galeria{height:100%;}

[André do Vale 76]

Cara, por este trecho que você passou, a formatação funcionou mais ou menos bem. Sugiro somente acrescentar algo como:

 

a.vlightbox {
display: inline-block;
margin: 3px;
float: left;
}

 

:thumbsup:

[Alvaro Jr 2]

Obrigado rs ! vou tentar isso ai

eu demorei porque eu terminei bom parte do site e deixei esse problema ai por ultimo !! kkk igual prova do enem =)

 

André obrigado ai pela ajuda

deu certinho