How to separate text icon in a <div>

Asked

Viewed 1,834 times

2

I’m creating an element for my site (which is responsive), but I can’t leave the elements apart. Below are some prints:

How are you:

Como está

How I want it to stay:

Como eu quero que fique.

EXAMPLE - Jsfiddle

html css

2 answers

4


You can simplify the code a little by using the image as a div background, and adding a padding (internal spacing) larger side where the image will be.

In the example below, note that the class has been added passo1 at the div, eliminating the redundant element hierarchy, as well as defining a 100px padding in the third line of the CSS, in the left margin. Additionally, the background image was positioned in the class definition .passo1:

HTML:

<div class="flx-full-width tres-passos passo1">
   <h3>Escolha um dos Planos</h3>
   <p>
      Escolha um Plano que mais se adapta a você. 
      Quantidade de domínios, contas de e-mail,
      espaço ou banco de dados,
      de acordo com o que você precisa.
   </p>
   <p>
      Aumentei o texto para você ter uma noção do que acontece
      ao ter um texto mais longo. 
      Aumentei o texto para você ter uma noção do que acontece
      ao ter um texto mais longo. 
   </p>
</div>

CSS:

.flx-full-width {
   box-sizing: border-box;
   padding: 10px 25px 13px 100px;
   margin-bottom: 20px;
}
.tres-passos {
   color:#69717A;
   border:1px solid #e9ecef;
   font: normal 16px Tahoma;
}
.tres-passos h3{
   font:normal 18px tahoma; margin:0; color:#00AFEF;
}
.passo1 {
   background: #f8f9fc url("http://testetabela.esy.es/1.png") no-repeat 12px 50%;
}

Example in JS Fiddle

  • Excellent @Bacco solved the problem! D

  • Could you take a look at this topic?: http://answall.com/questions/15480/como-deixarum-elemento-responsive

  • 1

    @Alexandrelopes to speak the truth, I think that yesterday I had already pointed out the solution, which is media query. With media queries you indicate separate parts of CSS for different resolutions, so it could be 100% wide in the parts that are encavalando, when the resolution is less than 800px, for example. Unfortunately today I have no way to stop what I am doing to help, but take a look at this question, which is the best way: http://answall.com/questions/12050/como-fazer-um-site-que-se-ajuste-entre-970px-e-1300px

  • 1

    In short, after your current css, you add this: @media (max-width: 800px) { and puts changes in CSS that will be valid for mobile. For example, take the float of an element, put 100% and clear=Both in the field that is breaking, etc. Just repeat the elements that will stir, with the new properties. You don’t need to put the whole CSS there, only what changes.

  • Thanks for the tip, now I will spend a year to be able to make work...

2

I created a solution with some modifications in your example, check if it solves your problem, and if you watch it, check the updated example.

  • @Alexandrelopes, yes, I realized here, is that my resolution is a little higher than yours, and I thought it had worked, I will check here.

  • No problem, what counts is the intention :D Just trying to help me, I’m happy. : P

  • Oops, now yes, you hit the nail on the head!

  • I couldn’t adjust your example, I want the icon to be right in the middle vertically, but it’s not. http://jsfiddle.net/AlexandreBR/hnjuB/7/

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.