Suporte » Ajustando o WordPress » Problema na margem de post com foto

  • Resolvido tsouzsa

    (@tsouzsa)


    Bom, eu dei uma olhada nos outros tópicos por aqui e vi assuntos bem parecidos, mas nenhum que solucionasse meu problema. Pelo menos, ao que entendo de wordpress (o que é quase nada), rs. Então peço desculpas se deixei algo passar.

    Eu gostaria de saber como posso alterar a largura da margem de baixo de uma imagem. Por exemplo:

    http://oi68.tinypic.com/c2p75.jpg

    E na verdade, esse é um anúncio do Google, porém, com imagem fica praticamente a mesma coisa, com uma pequena diferença.

    Em alguns tópicos daqui eu via apenas de lado esquerdo e direito, mas não de baixo.

    Alguém pode me ajudar?

Visualizando 7 respostas - 1 até 7 (de um total de 7)
  • @tsouzsa não sei ao certo qual a imagem que você está se referindo!

    Você quer saber como aumentar o espaço da margem inferior após uma imagem?!

    Preparei um código, dá uma olhada aqui http://scratchpad.io/lamentable-cart-7633
    E/ou olhe a captura de tela: Captura de tela do código

    Espero que ajude!

    Veja se te ajuda:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p.ex1 {
        margin-bottom: 1cm;
    }
    p.ex2 {
        margin-bottom: 2cm;  
    }
    </style>
    </head>
    <body>
    
    <p>Um parágrafo sem margem específica.</p>
    <p class="ex1">Um parágrafo com 1cm de "bottom margin".</p>
    <p>Um parágrafo sem margem específica.</p>
    
    Ou seja: Pra adicionar margem, use: "margin-bottom" em seu código CSS".</p>
    
    </br></br></br>
    
    <a><img src="http://s6.tinypic.com/20qo1tg_th.jpg"></a>
    <p>Espaço depois da imagem, sem margem específica!</p>
    
    </br> 
    
    <p class="ex2"><img src="http://s6.tinypic.com/20qo1tg_th.jpg" ></p>
    Espaço depois da imagem, com 2cm de margem!
    
    </br></br>
    
    Neste campo:     
    </br> 
    margin-bottom: 2cm;
    </br></br>
    Você pode usar 1cm, 10cm, 50px, 100px, etc :)
    
    </body>
    </html>
    
    
    • Esta resposta foi modificada 7 anos, 5 meses atrás por Feliphe Queiróz. Razão: Ajustei a imagem anexa ao post para um link para abrir a imagem em nova guia!
    Criador do tópico tsouzsa

    (@tsouzsa)

    @artenacara, muito obrigado por responder!

    Veja esse exemplo aqui: http://i.imgur.com/w5wdmdW.jpg (atualizei)

    Eu quero tirar esse espaço de baixo do anúncio.

    Sobre sua dica, acho que fiquei um pouco confuso. Eu devo acrescentar esse código que me passou em algum lugar ou você deu só de exemplo? Sou bem leigo ainda, me perdoe.

    Pra adiantar, eu percebi que se eu alterar o seguinte código abaixo na ferramenta inspecionar elemento, a posição da margem muda:

    element.style {
    float: left;
    margin: 10px 5px 5px 0;
    }

    Eu altero onde está o 10px. Só que quando eu adiciono no CSS, não funciona. Eu tô usando o plugin Simple CSS. Outros códigos funcionam direitinho.

    Então, eu só preciso de um código pra adicionar no CSS.

    • Esta resposta foi modificada 7 anos, 5 meses atrás por tsouzsa.
    • Esta resposta foi modificada 7 anos, 5 meses atrás por tsouzsa.

    @tsouzsa agora sim, sua imagem abriu.

    Isso mesmo, você pode “brincar” no inspecionar elemento, fazer modificações e ver ao vivo a magia 😀

    Entendi, você quer deixar a mesma margem na lateral direita da imagem até o texto, embaixo da imagem.

    Jovem, isso é um pouco detalhado! Acredito que pra ajustar esse design (crítico/grid), você tenha que localizar a fonte (local) que lança o estilo junto ao conteúdo da página.

    Essa imagem (anúncio/ads) que você coloca o script direto na página/post ou utiliza um plugin?

    Criador do tópico tsouzsa

    (@tsouzsa)

    Sim, eu tô usando o plugin WP QUADS.

    E olha, caso isso te ajude me ajudar (rs), o site é esse: http://www.sensornerd.com Há como você localizar essa fonte pra mim? Eu já tentei de tudo, pesquisei muita coisa, e nada. Como disse, sou bem leigo, então… ):

    Ok.

    Minha captura de tela
    Atualmente está assim seu anúncio ao texto…

    Mas, em cada post, cada página onde o texto é diferente, o anúncio ao texto se comportará diferente.

    Sua captura de tela
    Essa imagem é de um post diferente do link acima… veja como muda de um pra outro. Realmente o texto começa a direita, deixando uma área bem grande vazia!

    Analisando a disposição do anúncio, eu acredito que este é o padrão para o encaixe da imagem junto ao conteúdo. O texto tem um espaço igual de cima abaixo, isso não dá pra mudar quando chega na parte final da imagem. O texto está ok.

    Estudando a minha captura de tela…
    O que poderia ser feito é descer um pouco a imagem para ajustar ao texto. Mas, cada texto tem um tamanho e isso vai variar de um post pra outro.

    Inclusive, o conteúdo vai variar de um tamanho de tela pra outro, desktop, tablet, smartphone.

    Eu acredito que você vai continuar quebrando a cabeça sem uma solução perfeita.

    Você pode tentar melhorar essa disposição usando o Photoshop ou outro editor (ms paint?), só pra entender como iria ficar.

    Tenta verificar o texto, de uma forma que ele se encaixe legal a imagem de anúncio.

    Criador do tópico tsouzsa

    (@tsouzsa)

    @artenacara, então! Eu acabei de resolver o problema usando o plugin WP QUADS. Na verdade, eu já estava usando ele, mas não conseguia resolver o que queria. Ele só deixava tudo certinho no lado esquerdo e direito. Até que eu mudei o tamanho da margem (no plugin) para 4px e ficou OK!

    O problemão foi que nenhum outro tamanho ficava legal e não tinha testado esse. Loucura! rs

    Mas sobre o que você disse, é isso aí mesmo! Ainda que resolvi esse problema, não ficou exatamente como eu queria e varia de texto.

    Muito obrigado pela ajuda!

    Ótimo! Difícil ficar perfeito.

    Resolvido 😉

Visualizando 7 respostas - 1 até 7 (de um total de 7)
  • O tópico ‘Problema na margem de post com foto’ está fechado para novas respostas.