Assign height of the CSS ol, so that the text does not evolve the number

Navigation
0

I need to make a list of topics with the numbering on the side, I used html to do this, but I can not make it look like the image below

I'mdoingthis

.numeros_cases, ol{
    list-style:none;
    counter-reset:item;
}
.numeros_cases, ol li{
    counter-increment:item;
}
.numeros_cases, ol li:before {
    content: counter(item);
    color: #f7931e;
    margin-right: 20px;
    font-size: 60px;
}
.numeros_cases, li{
	margin-top:20px;
	width:auto;

}

.numeros_cases {
    width: 100%;
    margin: 0 auto;
    color: #000;
    font-size: 27px;
    line-height: 35px;
}
.titulo_borda_cases {
    text-transform: uppercase;
    text-align: center;
    font-size: 36px;
    font-family: Raleway;
    font-weight: 300;
    border-bottom: 1px solid #f7931e;
    padding-bottom: 15px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 30px;
    padding-top: 50px;
    
}
.titulo_cases {
    text-transform: uppercase;
    text-align: center;
    font-size: 24px;
    font-family: Raleway;
    font-weight: 300;
}
<ol class="numeros_cases">
   <li>O fator <strong>“personalização” </strong>no segmento foi identificado como <strong>oportunidade </strong>de agregar valor ao produto explorando como “novidade”.</li>
   <li>Explorar as <strong>Cores </strong>das garrafas que comunicam com o público-alvo (predominância feminina).</li>
   <li>CO nome deveria remeter ao consumidor a sensação de algo <strong>moderno </strong>e de qualidade superior com um viés de <strong>produto “importado”</strong>.</li>
</ol>
    
asked by anonymous 01.12.2017 / 13:25

1 answer

1

You can do a combination of several styles in element <ol> and <li> , such as position: absolute; , position: relative; , left , top , margin-top .

I had to redo your code because there was a lot of redundancy, for example:

Instead of .numeros_cases, ol{ , just .numeros_cases{ , since this class is already <ol> .

Let's get down to business. Here's what you'd like with optimized code: 

html, body{ background: #555;  }

.numeros_cases{
    list-style:none;
    counter-reset:item;
    position: relative;
    margin: 0 auto;
    color: #000;
    font-size: 27px;
    line-height: 35px;

    padding-left: 50px;
}
.numeros_cases li{
   counter-increment:item;
   margin-top:20px;
   width: 100%;
   
   position: relative;
   color: #fff;
}
.numeros_cases li:before {
   content: counter(item);
   color: #f7931e;
   font-size: 60px;
   
   position: absolute;
   left: -50px;
   line-height: 50px;
   width: 50px;
   height: 50px;
   top: 50%;
   margin-top: -25px;
}

.titulo_borda_cases {
    text-transform: uppercase;
    text-align: center;
    font-size: 36px;
    font-family: Raleway;
    font-weight: 300;
    border-bottom: 1px solid #f7931e;
    padding-bottom: 15px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 30px;
    padding-top: 50px;
    
}
.titulo_cases {
    text-transform: uppercase;
    text-align: center;
    font-size: 24px;
    font-family: Raleway;
    font-weight: 300;
}
<ol class="numeros_cases">
 	<li>O fator <strong>“personalização” </strong>no segmento foi identificado como <strong>oportunidade </strong>de agregar valor ao produto explorando como “novidade”.</li>
 	<li>Explorar as <strong>Cores </strong>das garrafas que comunicam com o público-alvo (predominância feminina).</li>
 	<li>CO nome deveria remeter ao consumidor a sensação de algo <strong>moderno </strong>e de qualidade superior com um viés de <strong>produto “importado”</strong>.</li>
</ol>
    
01.12.2017 / 17:38
Header with array and modal How to correct validation messages?