Imagens não seguem alinhamento

[Guilherme Monteiro 0]

Bom dia pessoas, to quebrando a cabeça a dias e não entendo pq as imagens não seguem a sequencia, as vezes em uma linha ao invés de 4 não sei pq ficam alguns espaços vazios e pula p outra linha, assim como na imagem, é um site dinamico, não sei oq fazer mais.

 

 

[Maujor 144]

@Guilherme Monteiro

 

Impossível responder sua dúvida sem examinar HTMl e CSS.
Mas, não poste os códigos.

Para solicitar esclarecimentos sobre códigos não transcreva seus códigos aqui no fórum, use uma interface online para mostrar os códigos FUNCIONANDO.
Visite https://jsfiddle.net/ cole os códigos nos campos salve e poste o link juntamente com a sua dúvida.
É muito mais rápido, eficiente e fácil de se analisar e postar a solução.
Se você postar código estará transferindo para quem quer ajudar a tarefa "chata" de criar o arquivo.
A tarefa é sua que está interessado na solução, portanto use o JSFIDDLE ou outra ferramenta online e eu ou alguém que gosta de prestar ajuda neste fórum iremos analisar.

Boa sorte

[Guilherme Monteiro 0]

Vou postar sim, agradeço.

 

[dougtop 31]

Oi amigo, antes mesmo de postar o código (que será muito útil), tente verificar se todos os elementos (os boxes com as imagens) estão com a mesma altura e a propriedade float: left no css. Essa é apenas uma das formas de conseguir o resultado que você pretende.

 

Um outro jeito é trabalhar com a propriedade flexbox (display: flex;), também em css. Aqui tem um link que explica ela: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

Espero ter ajudado. Abraços.

[snowstormdelivery 19]

@dougtop

 

Penso que ele tá com esse problema, mesmo. Mas, parece que as alturas estão todas idênticas.

Dessa maneira, acredito que, pelo menos, o margin do terceiro item está diferente.

No entanto, como o @Maujor lembrou, temos que ver o código. Vamos esperar!

[Maujor 144]

Olá @dougtop e a quem interessar possa:

Como você é novato no fórum (2 posts) vou passar umas dicas sobre postagens.

1. Seja direto e objetivo: quem pergunta deseja resolver o que foi perguntado, então evite introduções e comentários de caráter social ou que nada têm a ver com a dúvida e que só servem para ocupar espaço. (fórum não é chat de bate papo).
2. Foco na pergunta: Aponte a solução ou o caminho para solucionar o que foi perguntado. Se não foi solicitado  adotar uma solução alternativa, não fique fazendo sugestões e muito menos comparações e análises de diferentes técnicas.
3. Seu perfil no fórum: não poste conteúdos apenas para aumentar o número de seus posts. Fórum é lugar para ajudar e esclarecer dúvidas e não para fazer promoção pessoal.
4. Regras: Todo fórum tem suas regras de conduta. Localize o link para elas e leia as regras com atenção.
5. Moderadores: Observe como os Moderadores postam no fórum. É um ótimo local para aprender mais sobre postagens.

Um forte abraço de um vovô e siga em frente ajudando a comunidade.

 

 

[Guilherme Monteiro 0]

Antes de postar o código vou rever as propriedades das fotos sim, para não perder tempo e conferir o alinhamento no css. Se estiver td ok (que acredito pois já revi tantas vezes) vou tentar a solução do flexbox, se nada disso funcionar posto o código, agradeço pela ajuda.

[Guilherme Monteiro 0]

18 horas atrás, dougtop disse:

Oi amigo, antes mesmo de postar o código (que será muito útil), tente verificar se todos os elementos (os boxes com as imagens) estão com a mesma altura e a propriedade float: left no css. Essa é apenas uma das formas de conseguir o resultado que você pretende.

 

Um outro jeito é trabalhar com a propriedade flexbox (display: flex;), também em css. Aqui tem um link que explica ela: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

Espero ter ajudado. Abraços.

 

Doug salvei novamente todas as imagens e não mudou nada, conferi todos os codigos e estão iguaizinhos, tentei usar o flex mas nada muda esse alinhamento, cara não sei oq fazer mais...rs

 

15 horas atrás, Joao_Lucaas disse:

@dougtop

 

Penso que ele tá com esse problema, mesmo. Mas, parece que as alturas estão todas idênticas.

Dessa maneira, acredito que, pelo menos, o margin do terceiro item está diferente.

No entanto, como o @Maujor lembrou, temos que ver o código. Vamos esperar!

 

João  dei uma checada em todas as margens tbem, td idêntico, não consigo compreender o pq dessa mudança apenas nessa linha, parece coisa do demo.

 

[snowstormdelivery 19]

@Guilherme Monteiro Cadê o código CSS e HTML?

[dougtop 31]

33 minutos atrás, Guilherme Monteiro disse:

 

Doug salvei novamente todas as imagens e não mudou nada, conferi todos os codigos e estão iguaizinhos, tentei usar o flex mas nada muda esse alinhamento, cara não sei oq fazer mais...rs

 

 

João  dei uma checada em todas as margens tbem, td idêntico, não consigo compreender o pq dessa mudança apenas nessa linha, parece coisa do demo.

 

 

Dá uma olhada nesse código que fiz simulando sua página: https://jsfiddle.net/dougtop/73bnaf3a/1/

 

[dougtop 31]

Obrigado pelas dicas @Maujor vulgo "Dinossauro das CSSs" rs [corrigido]

[Maujor 144]

@dougtop

 

Mais uma dica:

Quando postar aqui no fórum não use o botão + Citar somente para responder a alguém.
Basta você começar sua resposta com @Nome para responder a uma pessoa.

O botão + Citar somente deve ser usado para ressaltar um trecho do post que seja importante para se entender o texto que vem depois da citação.

[Guilherme Monteiro 0]

@Maujorvivendo e aprendendo.

 

@dougtop o seu ficou perfeito, é isso mesmo que preciso... eu posso colar todo o código da minha pagina aqui direto, não tem problema?

[Guilherme Monteiro 0]

Entendi como usa o JSFiddle https://jsfiddle.net/guieka/8veohfpq/

 

a pagina é essa http://www.foxlaser.com.br/gravacao_laser_vidro_cristal.html

[Maujor 144]

Para solicitar esclarecimentos sobre códigos não transcreva seus códigos, use uma interface online para mostrar os códigos FUNCIONANDO.
Visite https://jsfiddle.net/ cole os códigos nos campos salve e poste o link juntamente com a sua dúvida.
É muito mais rápido, eficiente e fácil de se analisar e postar a solução.

 

 

 

 

[Guilherme Monteiro 0]

@Maujor ta feito sim senhor.

[Maujor 144]

@Guilherme Monteiro

1-) Vi no JSFiddle que a página da sua dúvida está em http://www.foxlaser.com.br/gravacao_laser_vidro_cristal.html

Porque você não forneceu este link quando postou a dúvida em lugar de postar uma imagem que de nada adianta?
Evitaria toda essa troca de posts e tomada de tempo dos que se dispõem a ajudar.

2-) Analisando a página notei que está com erros de marcação HTML e é quase certo que o problema será resolvido com a simples correção da marcação HTML.

 

 

 

[dougtop 31]

16 minutos atrás, Guilherme Monteiro disse:

a pagina é essa http://www.foxlaser.com.br/gravacao_laser_vidro_cristal.html

 

Percebi que sua página está demorando muito para carregar as imagens. Sugiro que você trabalhe com thumbnails, que são miniaturas das imagens que você quer mostrar. Não faz sentido você fazer o usuário esperar o carregamento dessas imagens se ele ainda nem precisou de fato vê-las maiores. Ficaria assim:

 

<a href="http://www.foxlaser.com.br/img/gravacao_a_laser_em_vidro_brasao.jpg">
  	<!-- aqui é uma imagem com 220px x 165px exportada através do recurso do photoshop "Salvar para a web" com qualidade 60 ou 70. Seu site carregaria bem mais rápido.-->
    <img src="img/gravacao_a_laser_em_vidro_brasao_thumb.jpg" alt="Gravacao brasao casamento"> 
</a>

Abraços, doug.

[Guilherme Monteiro 0]

@Maujor uma coisa de cada vez, primeiro eu postei a imagem, você me ensinou como deveria fazer (usando o JSFiddle e aproveitei p colocar o link tbem) ai eu usei esse recurso, não da p voltar atrás no erro cometido depois q aprendemos o certo, o erro já existiu pois não sabia qual o melhor elemento usar, não é verdade? Agora eu aprendi e acredito que o assunto esteja resolvido, sim?

 

Erro de marcação de html seria algum ; ou " que esqueci de colocar?

 

@doug agradeço a dica, vou usar sim.

 

[Maujor 144]

@Guilherme Monteiro

Maravilha.
A ideia é aprender como postar dúvidas e fico feliz que você tenha entendido. Agradeço sua compreensão.

Resumindo: A madeira ideal de se responder uma dúvida é quando a página com a dúvida está online e você posta o link.
Se não, use uma ferramenta online para criar a página e poste o link. As mais usadas são:

https://jsfiddle.net/  e https://codepen.io/pen/

 

Notas:

1-) Naquelas ferramentas você não precisa usar DOCTYPE e nem a seção HEAD da página.
Cole apenas a marcação HTML que está dentro do elemento BODY.

 

2-) Para inserir imagens na HTML daquelas ferramentas use um servidor gratuito de imagens .
Existem vários. Veja alguns em: http://www.ecologytheme.com/top-10-image-placeholder-services/

3-) Nas ferramentas é possível criar links para bibliotecas javascript e arquivos CSS. Pesquise nas ferramentas como fazer.

 

Para descobrir erros de marcação HTML  use o validador do W3C: https://validator.w3.org/nu/

Para descobrir erros nas CSS   use o validador do W3C: https://jigsaw.w3.org/css-validator/