4

Como colocar 3 anúncios de link do adsense lado a lado desse jeito ?

exemplo

1
  • Você possui o código de algum anúncio?
    – LocalHost
    Commented 15/01/2017 às 1:16

2 Respostas 2

4

Tabelas são recomendados para dados tabulares e display: flex; funciona só em navegadores mais modernos, veja http://caniuse.com/#search=flex

Para alinhar lado a lado basta float:

Nota: Se estiver usando Adblock ou µBlock ou outro similar, pode ser que bloqueie esse exemplo abaixo, Isso ocorre devido a classe adsbygoogle, que é usada pelo AdSense. Para testar basta desligar temporariamente o adblock (ou similar) ou colocar o domínio para exceção.

/*faz a altura do elemento propagandas seguir a altura das propagandas, necessário para se usar junto com float*/
.propagandas::after {
    clear: both;
    content: " ";
    height: 0px;
    display: block;
}

.propagandas {
    width: 600px; /*OBSERVE: o width deve ser a soma da largura dos .adsbygoogle*/
}

/*primeira propaganda e configurações para as demais, como largura e altura*/
.propagandas .adsbygoogle {
    width: 200px;
    height: 200px;
    float: left;
    background-color: #f00; /*remova as cores, é somente para entender*/
}

/*troca a cor do segundo, use esse seletor para customizar o segundo elemento*/
.propagandas .adsbygoogle:nth-child(2) {
    background-color: #fc0; /*remova as cores, é somente para entender*/
}

/*troca a cor do ultimo*/
.propagandas .adsbygoogle:last-child {
    float: right;
    background-color: #00f; /*remova as cores, é somente para entender*/
}
<div class="propagandas">
   <ins class="adsbygoogle" 
        data-ad-client="ca-pub-xxxxxxxx"
        data-ad-slot="yyyyyy"></ins>
  
   <ins class="adsbygoogle" 
        data-ad-client="ca-pub-xxxxxxxx"
        data-ad-slot="yyyyyy"></ins>
  
   <ins class="adsbygoogle" 
        data-ad-client="ca-pub-xxxxxxxx"
        data-ad-slot="yyyyyy"></ins>
</div>

Nota: O elemento 1 e 2 usam float: left;, já o ultimo elemento usa float: right; devido a algumas situações que quando usado o zoom do navegador ou Quirks Mode e Standards Mode (Standards Mode equivale ao Quirks Mode do Internet Explorer, geralmente ocorre em navegadores diferentes do IE) o elemento acada indo para baixo.

Note que é possivel adicionar mais elementos, basta ajustar o width: deste seletor:

.propagandas {
    width: <Coloque aqui a medida da soma da largura de todos elementos>px;
}

Ajuste aqui a largura e altura dos banners:

.propagandas .adsbygoogle {
    width: <Coloque aqui a largura padrão dos banners>px;
    height: <Coloque aqui a altura padrão dos banners>px;
    float: left;
    background-color: #f00;
}

Se quiser ajustar a largura de um banner especifico, use o :nth-child(), por exemplo, se tiver 5 banners e quiser que o quarto banner tenha medida diferente:

.propagandas .adsbygoogle:nth-child(4) {
    width: <Coloque aqui a largura do banner especifico>px;
    height: <Coloque aqui a altura do banner especifico>px;
}
6
  • veja no código fonte desta página se o uso de tabela foi para dados tabulares
    – user60252
    Commented 16/01/2017 às 15:20
  • @LeoCaracciolo a página pt.stackoverflow.com?
    – Syzoth
    Commented 16/01/2017 às 15:21
  • essa aqui mesmo
    – user60252
    Commented 16/01/2017 às 15:26
  • 1
    @LeoCaracciolo vc quer compara um sistema feito em 2008 para algo feito na época de hoje, você quer afirmar realmente que só porque um site grande usou é "algo bom". Desculpe devo lhe informar que você pode usar sim, mas não o foco do uso é outro, conforme o w3.org/TR/html401/struct/tables.html#h-11.1 (w3.org é "consorcio" que gerencia as recomendações de uso do HTML para os navegadores se adaptarem), espero que entenda que é uma critica construtiva e não uma ofensa. Se aprender a receber criticas na hora certa com certeza irá evoluir. Até.
    – Syzoth
    Commented 16/01/2017 às 15:32
  • a questão não é "algo bom" é algo que funciona e sempre vai funcionar e para quem está iniciando nada como começar do b a ba
    – user60252
    Commented 16/01/2017 às 15:40
1

Veja se desta forma te ajuda:

#ad {
  height: 100%;
  min-height: 100%;

  /* habilita o flex nos filhos diretos */
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;

  /* centraliza na horizontal */
  -ms-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
}
<div id="ad">
<table>
<td><img width="200" src="http://www.wowcubo.com.br/img/icon-anunciogoogle.png"/></td>
<td><img width="200" src="http://www.wowcubo.com.br/img/icon-anunciogoogle.png"/></td>
<td><img width="200" src="http://www.wowcubo.com.br/img/icon-anunciogoogle.png"/></td>
</table>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .