2

Como posso fazer para ter um resultado parecido com isso?

inserir a descrição da imagem aqui

Preciso adicionar aquelas linhas como na imagem, e deixar Tags (que é uma imagem) alinhado com o texto, como no exemplo.

<div>
   <img src="<?php echo IMAGEPATH; ?>services/tag.jpg">
   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor lorem,
    efficitur sed gravida sed, congue id magna. Vestibulum tincidunt eu sapien 
    eu dapibus. Mauris eget laoreet augue, quis sodales dolor. 
   </p>
</div>
5
  • As linhas serão imagens, correto? @GWER 6/05/2015 às 18:11
  • @williamhk2 As linhas não. Não sei se é possível fazer isso sem que seja uma imagem...
    – GWER
    6/05/2015 às 18:13
  • vou responder considerando que são imagens, ai caso eu ache aqui um metodo para fazer isto usando css eu altero a resposta. 6/05/2015 às 18:21
  • Beleza, no aguardo!
    – GWER
    6/05/2015 às 18:25
  • 1
    Opa @GWER, reparei que nenhuma das respostas coloca as margens que tu mensionou, porém acredito que respondem a questão principal que é o alinhamento da imagem, então segue um link pra tu estudar algumas possibilidades no CSS: paulund.co.uk/creating-different-css3-box-shadows-effects Dê uma olhadinha no efeito 7. ;)
    – KaduAmaral
    6/05/2015 às 19:57

3 Respostas 3

7

GWER, tentei fazer o mais próximo do que você precisa. Estou colocando o código CSS abaixo. Sobre a margem, você pode colocar uma imagem. Se isso não for possível, encontrei um conteúdo sobre bordas com gradiente no Stack (em inglês) que pode te ajudar.

.tudo {
    width: 600px;
}
.tudo img {
    float: left;
}
.tudo p {
    padding-left: 140px;
}
<div class="tudo">
   <img src="http://multnix.com/stack/tags.png">
   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor lorem,
    efficitur sed gravida sed, congue id magna. Vestibulum tincidunt eu sapien 
    eu dapibus. Mauris eget laoreet augue, quis sodales dolor.         
   </p>
</div>

3

@GWER Você pode tentar colocar a imagem numa coluna e o texto em outra por assim dizer... Sendo que as colunas seriam divs, assim:

<div>
    <div id="col1" style="float:left; height:200px;">
        <img src="<?php echo IMAGEPATH; ?>services/tag.jpg">
    </div>
    <div id="col2" style="float:left">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor lorem, efficitur sed gravida sed, congue id magna. Vestibulum tincidunt eu sapien 
eu dapibus. Mauris eget laoreet augue, quis sodales dolor. 
        </p>
    </div>
</div>

Sendo que na "#col1", você coloca o height necessário(não exatamente os 200px que coloquei) pra que o texto não invada a área abaixo da imagem Tags. Entende?

Acho que assim vai resolver o problema. Testa e me avisa.

1

Coloque um style="float:left" na imagem. se quiseres um espaçamento maior entre imagem e texto coloque ume padding neste style (lembrando que ele deve estar em um css a parte, fiz na propria tag pra ficar mais legível e compacto).

<div>
   <img src="<?php echo IMAGEPATH; ?>services/tag.jpg" style="float:left">
   <p style="padding-left:70px"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor lorem,
    efficitur sed gravida sed, congue id magna. Vestibulum tincidunt eu sapien 
    eu dapibus. Mauris eget laoreet augue, quis sodales dolor. 
   </p>
</div>
2
  • Valeu pela resposta Ricardo! Mas com o float mesmo assim parte do texto vai para baixo da imagem...
    – GWER
    6/05/2015 às 18:26
  • Somente se a janela for muito pequena.
    – Ricardo
    6/05/2015 às 18:26

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 .