Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

SaulMendes

Configuração básica de CSS?

Recommended Posts

Galera, preciso de uma ajuda bem básica, ate ignorante da minha parte.

 

Tenho este código:

<div class="wrapper">
<div class="imagem"><a href="EXEMPLO"><img src="EXEMPLO" alt="" /></a></div>
</div>
E este Css
body {
  white-space: nowrap;
}

.wrapper {
  width: 100%;
  height: 100%;
}
.wrapper .imagem {
  display: inline-block;
  width: 33%;
  padding: 0;
  margin: 0;
}
.wrapper .imagem img {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

 

Preciso grudar essas imagens.

 

DlpoZTF.png

 

Tenho o seguinte código para juntar as imagens.

.imagem {float:left !important;}

Mas não sei como configurar este código no meu. Sei que deve ser fácil mas estou meio perdido.

 

Ps: Acredito que este código vai juntar left mas não vai juntar com o rodapé. No entanto aceito qualquer tipo de ajuda.
Abraço e obrigado.

 

 

 

Resultado que pretendo ter:

sS9n5FJ.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu não sei como adicionar este código

.imagem {float:left !important;}

No código que eu já tenho, não sei onde adicionar.

Sei que é ignorante mas eu não estou sabendo fazer.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tem assim:

.wrapper .imagem {
display: inline-block;
width: 33%;
padding: 0;
margin: 0;
}

coloca assim

.wrapper .imagem {
float: left;
width: 33%;
padding: 0;
margin: 0;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

SaulMendes,

Você pode resolver esse problema de N maneiras, vamos a algumas delas abaixo.

Remover os white-spaces do código HTML:

<!-- O que é -->
<div>
   <img>
   <img>
   <img>
</div>

<!-- Como deve ficar -->
<div>
   <img><img><img>
</div>

Você pode conferir essa solução em funcionamento aqui no JSFiddle.

 

Se as suas tags estiverem ainda em linhas separadas, mas você não quer deixá-las todas na mesma linha, você pode comentar ou fechar a tag anterior na linha posterior.

Ex.:

<!-- Comentar -->
<ul>
   <li></li><!--
   --><li></li><!--
   --><li></li>
</ul>

<!-- Fechar tag -->
<ul>
   <li></li
   ><li></li
   ><li></li>
</ul>

Você também pode ver esse código funcionando no JSFiddle.

 

Em alguns casos, você também pode definir a propriedade display: block; ela costuma remover os espaços indesejados e é de extrema importância na criação de e-mail marketing, mas você perderá o inline, a não ser que estruture de outra forma no CSS.

Você também pode usar outra propriedade CSS3 que descarta esse espaçamento. Veja abaixo o exemplo:

.sua-classe {
   white-space-collapsing: discard;
   /* OU */
   white-space-collapsing: nowrap;
}

Além de todas essas soluções, você pode pegar a sua imagem e negativa a margem esquerda.
Ex.:

.sua-classe {
   margin-left -4px;
}

Obs.: Eu não esqueci dos dois pontos depois do margin-left. É que provavelmente a seção de comentários entende que os dois pontos mais o sinal de negativo possa ser um emoticon ou algo do gênero, então ele deixa em branco. Mas não esqueça de colocar os dois pontos na hora de fazer.

 

Última solução:

Você também pode adicionar a propriedade font-size: 0; a classe pai de toda a estrutura.

Teste essas soluções, se nada funcionar, voltaremos a nos falar aqui.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Quase resolvido com o seguinte código

<ul>
   <li></li><!--
   --><li></li><!--
   --><li></li>
</ul>

http://i.imgur.com/bxNZ8hH.png

 

Ficou este espaço do lado, sendo que as imagens tem um tamanho bom que poderia completar com o

.wrapper {
  width: 100%;
  height: 100%;
}

Sabes também alguma alternativa para forçar o footer se juntar a imagem ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Com este ccs era pra ter ficado fullscreen, não ?

body {
  white-space: nowrap;
}

.wrapper {
  width: 100%;
  height: 100%;
}
.wrapper .imagem {
  display: inline-block;
  width: 33%;
  padding: 0;
  margin: 0;
}
.wrapper .imagem img {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boa, já é uma coisa a menos.

 

/* ESPAÇO DIREITO */

Nesse caso, o height: 100%; do wrapper não funciona. O que pode funcionar nesse caso é o height: 100vh; tente e me diga o resultado (até porque era pra estar pegando toda a página). Lembre-se de adicionar o box-sizing: border-box; aos wrappers e imagens.

 

Ainda não tenho uma solução 100% pronta pra esse detalhe, preciso analisar melhor.

 

/* ESPAÇO DO FOOTER */

Só negativar o margin-top com -7px, -10px, por ai...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Da uma olhada.

<div class="wrapper">
<div class="imagem">
<a href="https://c3u.com.br/rudydasilva"><img src="https://c3u.com.br/wp-content/uploads/2013/12/skatistas_rudy1.jpg" alt="" /></a><!--
--><a href="https://c3u.com.br/luanandre"><img src="https://c3u.com.br/wp-content/uploads/2013/12/skatistas_luan1-1.jpg" alt="" /></a><!--
--><a href="https://c3u.com.br/diegodesouza"><img src="https://c3u.com.br/wp-content/uploads/2013/12/skatistas_diego1.jpg" alt="" /></a>
</div></div>

Tem alguma coisa errada ? Se eu adicionar o box-sizing não vai perder o responsivo do wrapper?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bem, dei uma olhada agora de manhã e consegui resolver de forma bem simples até. Usei um valor que normalmente usamos pra definir largura de colunas.

Vamos lá:
Sempre que você anular alguns white-spaces entre os inline-blocks, se você não estiver usando nenhum framework, é muito provável que essa falta some com a largura da página para aquele container. Como são três imagens (três colunas) e dois white-spaces, no caso, a soma desses espaços se daria por 0,6666666666%.

Considerando que a sua largura pra classe .imagem esteja como 33%, é só modificá-la para 33,3333333333%.

Ex.:

.wrapper .imagem {
   display: inline-block;
   width: 33,3333333333%;
   padding: 0;
   margin: 0;
}

Eu deixei um exemplo pronto com o seu próprio código no JSFiddle. Veja que eu também tirei os comentários do HTML e adicionei um font-size: 0; para a classe .wrapper, assim não terá a necessidade de tirar a indentação do HTML.

 

Resolvido?

 

 

Observação:
Você está usando links diretos para as imagens ou está usando o <?php get_attachment_directory_uri(); ?>?

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.