Como colocar 3 anúncios de link do adsense lado a lado desse jeito ?
2 Respostas
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 usafloat: 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;
}
-
veja no código fonte desta página se o uso de tabela foi para dados tabulares– user60252Commented 16/01/2017 às 15:20
-
-
essa aqui mesmo– user60252Commented 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– user60252Commented 16/01/2017 às 15:40
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>