I'm trying to make it like a list of sorted things (with quite a bit of text in each one).
As the typical list seemed very bland to me, I searched the web and found this result that I liked. So I searched for the code, but found nothing.
So trying to do the same, I got stuck and not knowing very well how to continue. I have this for test:
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
font-family: Verdana;
font-size: 12px;
}
.coso {
}
h2::before {
counter-increment: section;
content: counter(section) " ";
background-color: blue;
border-radius:30px;
color: white;
padding-right: 10px;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>Using CSS Counters:</h1>
<div class="coso">
<h2>HTML tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
</div>
</body>
</html>
And when I implement the counters test in my project, a few things happen.
This is the code:
::-moz-selection { /* Code for Firefox */
color: white;
background: #8d33ff;;
}
::selection {
color: white;
background: #8d33ff;;
}
h6::before {
counter-increment: section;
content: counter(section) " ";
background-color: blue;
border-radius:30px;
color: white;
padding-right: 10px;
font-size: 20px;
text-align: center;
}
#contadores {
text-align: left;
font-size: 15px;
}
body {
font-family: Verdana;
background-image: url("https://image.flaticon.com/icons/png/128/1206/1206290.png");
width: 100%;
background-size: 100px 80px;
counter-reset: section;
}
/* Redimensión */
* {
box-sizing: border-box;
}
#contenido2 {
background-color:none;
float:left;
width:100%;
padding:15px;
margin-top:7px;
text-align:center;
}
/* Estructura flex */
.flex-container {
display: flex;
align-items: stretch;
background-color: none;
}
.flex-container > div {
background-color: none;
color: black;
width: 100px;
margin: 5px;
text-align: center;
line-height: 30px;
font-size: 15px;
}
p {
background: rgba(236, 223, 255, 0.5);
}
a,p, h6 {
display: flex;
align-items: center;
}
#contenido2 {
background-color:none;
float:left;
width:100%;
padding:15px;
margin-top:7px;
text-align:left;
}
.receta {
font-size: 25px;
color: DarkSlateBlue;
background: rgba(236, 223, 255, 0.6);
text-align: center;
font-weight: bold;
margin-top: -5px;
margin-bottom: -5px;
}
.contenido {
background: rgba(236, 223, 255, 0.6);
}
.final {
text-align: center;
background: rgba(236, 223, 255, 0.6);
font-size: 20px;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="flex-container" id="contenido2">
<div style="flex-grow: 10">
<h1 class="receta"> Preparación </h1>
<div class="contenido" id="contadores" style="text-align: left; font-family: verdana;">
<h6>
Ponemos en el vaso de la batidora los huevos, la mantequilla, el azúcar, la sal, la leche y batimos todo.
</h6>
<h6>
Incorporamos la harina junto con la levadura y batimos todo de nuevo.
</h6>
<h6>
Dejamos que la mezcla repose unos 20 minutos.
</h6>
<h6>
En una plancha o sartén antiadherente con un trocito de mantequilla o margarina engrasamos la
superficie.
</h6>
<h6>
Vertemos la mezcla en una jarrita y ponemos un poco de la mezcla en la sartén.
</h6>
<h6>
Esperamos hasta que toda la superficie se llene de burbujitas, entonces con una espátula le damos
la vuelta; dejamos que se dore por el otro lado, unos segundos y sacamos.
</h6>
<h6>
Repetimos la operación hasta que se nos acabe la mezcla. Vamos poniendo las tortitas en un plato una encima de otra y tapamos con papel aluminio.
</h6>
</div>
<p class="final"><b> ¡Has terminado! </b></p>
</div>
</div>
</body>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
</script>
</html>
It ignores the one font-size
indicated in the style. I also want the counter to be next to the first line, and not in the middle.
The ending was previously centered, but placing this moved it. It has the defined text-align: center;
but ignores that.
I propose an alternative structure for your HTML since I consider that doing the entire system from within a, in
<h6>
addition to attacking SEO , gives you very little flexibility.To my understanding each element of counter + text is part of a row with two columns (one for the counter and the other for the text) so I have created a
.contador
with two columns inside:.contador-numero
and.contador-texto
.By means of
display: flex
we give.contador
row behavior, so that it treats its children as columns and we would have solved most of the problem.To cause the text to
.final
come out centered, I have forced him to use the rule if it can affect himdisplay: block
instead .display: flex
text-align: center
The other changes I made are purely aesthetic, like giving the counters a more rounded look and having the number in the center of the circle.
You must locate h6::before
On the line
11
locate:And replace
padding-right: 10px
withpadding: 0 10px
, removefont-size: 20px
and addmargin-top: 7px
:That is, leaving this:
Also locate:
And change
align-items: center
toalign-items: flex-start
:In this example, when it does not fit in the line, it jumps to the next one starting from the same position as the before of the section. Just like it is done at https://www.w3schools.com/css/css_counters.asp
Ajusta el padding o el margin del h6 según tu interés. Ten en cuenta que si cambias el font-size del h6 tendrás que modificar también el padding del h6::before