2

Estoy tratando de hacer como una lista de cosas ordenadas (Con bastante texto en cada una).

Como la típica lista me parecía muy sosa, busqué por la web y encontré este resultado que me gustó. Entonces busqué el código, pero no encontré nada.

Así que intentando hacerlo igual, me quedé atascada y sin saber muy bien cómo seguir. Tengo esto de prueba:

<!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>

Y al implementar la prueba de los contadores en mi proyecto, ocurren algunas cosas.

Este es el código:

::-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>

No hace caso al font-size indicado en el estilo. También quiero que el contador esté a la par de la primera línea, y no en medio.

El final antes estaba centrado, pero al colocar esto se movió. Tiene definido el text-align: center; pero no hace caso a eso.

10
  • 1
    Se puede ver en el segundo snippet @JonathanOrta
    – Lucía
    Commented el 6 feb. 2020 a las 9:05
  • 3
    Creo que el problema principal es que tienes demasiado lío en la organización del código CSS, en el nombrado de los elementos, etc. Hay reglas que se superponen, que redundan, que se dicen y se contradicen. Todo eso tienes que tomarlo en cuenta. Por poner un ejemplo, en CSS un id (que empieza por #) tiene prioridad sobre una clase (que empieza por .). Dado que los estilos se aplican en cascada, si primero aplicas un estilo sobre una clase y a continuación aplicas sobre un id que usa esa clase, sobre-escribes las reglas sobre ese elemento, perdiendo en rendimiento...
    – A. Cedano
    Commented el 6 feb. 2020 a las 9:40
  • 1
    ... eso ocurre en tu código y es en parte debido a que no tienes bien organizados los elementos. Otro problema es la mezcla que haces poniendo estilos in line, como aquí por ejemplo: <div class="contenido" id="contadores" style="text-align: left; font-family: verdana;"> ... Hacer eso va contra el espíritu de CSS. ¿Por qué no aplicas esas reglas desde el CSS? Lo que quiero decir con esto es que la organización es fundamental cuando trabajas con CSS. Si no te armas un lío y empiezas a dar palos de ciego y tu código se convierte en un spaghetti.
    – A. Cedano
    Commented el 6 feb. 2020 a las 9:42
  • 1
    Sí @Iria pero tengo entendido que no se debe abusar de esa regla, por lo tanto trato de evitarla
    – Lucía
    Commented el 6 feb. 2020 a las 10:20
  • 1
    @Iria es importante evitar en la medida de lo posible el uso de !important (ver aquí).
    – A. Cedano
    Commented el 6 feb. 2020 a las 10:53

3 respuestas 3

2

Te propongo una estructura alternativa para tu HTML ya que considero que hacer todo el sistema desde dentro de un <h6> además de atentar contra el SEO, te da muy poca flexibilidad.

A mi entender cada elemento de contador + texto forma parte de una fila con dos columnas (una para el contador y la otra para el texto) por lo que he creado un .contador con dentro dos columnas: .contador-numero y .contador-texto.

Por medio de display: flex le damos a .contador comportamiento de fila, para que trate a sus hijos como columnas y ya tendríamos solucionada la mayor parte de la problemática.

Para provocar que el texto de .final saliese centrado, le he obligado a usar display: block en vez de display: flex de esa manera la regla text-align: center si que puede afectarle.

Los demás cambios que hice son meramente estéticos, como darle a los contadores un aspecto más redondeado y con el número en el centro del círculo.

/****** Nuevas estructura ******************************************/
h1.receta {
  margin-bottom: 20px;
}

.contador {
  display: flex;
  margin-bottom: 10px;
}

.contador-texto p {
  display: flex;
  align-items: start;
  margin: 0px;
}

.contador-numero p {
  margin: 10px 0 0 0;
}

.contador-numero p:before {
  counter-increment: section;
  content: counter(section) " ";
  background-color: blue;
  border-radius:50%;
  color: white;
  font-size: 20px;
  text-align: center;
  padding: 7px 15px;
  max-width: 45px;
  max-height: 45px;
  margin-right: 10px;
  position: relative;
  top: -3px;
}



/********************************************************************/




::-moz-selection { /* Code for Firefox */
  color: white;
  background: #8d33ff;;
}

::selection {
  color: white;
  background: #8d33ff;;
}

#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;
    font-weight: bold;
    display: block;
}
<!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;">
			<div class="contador">
        <div class="contador-numero">
          <p></p>
        </div>
        <div class="contador-texto">
          <p>Ponemos en el vaso de la batidora los huevos, la mantequilla, el azúcar, la sal, la leche y batimos todo.</p>
        </div>
      </div>
      
      <div class="contador">
        <div class="contador-numero">
          <p></p>
        </div>
        <div class="contador-texto">
          <p>Incorporamos la harina junto con la levadura y batimos todo de nuevo.</p>
        </div>
      </div>
      
		  <div class="contador">
        <div class="contador-numero">
          <p></p>
        </div>
        <div class="contador-texto">
          <p>Dejamos que la mezcla repose unos 20 minutos.</p>
        </div>
      </div>
      
      <div class="contador">
        <div class="contador-numero">
          <p></p>
        </div>
        <div class="contador-texto">
          <p>En una plancha o sartén antiadherente con un trocito de mantequilla o margarina engrasamos la superficie.</p>
        </div>
      </div>
      
      <div class="contador">
        <div class="contador-numero">
          <p></p>
        </div>
        <div class="contador-texto">
          <p>Vertemos la mezcla en una jarrita y ponemos un poco de la mezcla en la sartén.</p>
        </div>
      </div>
      
      <div class="contador">
        <div class="contador-numero">
          <p></p>
        </div>
        <div class="contador-texto">
          <p>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.</p>
        </div>
      </div>
      
      <div class="contador">
        <div class="contador-numero">
          <p></p>
        </div>
        <div class="contador-texto">
          <p>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.</p>
        </div>
      </div>
		</div>	
			<p class="final">¡Has terminado!</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>

2
  • ¡Gracias por tu respuesta! ¿Habría alguna forma de hacer que el número quede alineado con la primera línea de texto? Probé con align-items:flex-start pero sale algo descolocado
    – Lucía
    Commented el 6 feb. 2020 a las 9:53
  • 1
    Podrías ajustar el top que le di a .contador-numero p:before para dejarlo a tu gusto ^^
    – phpMyGuel
    Commented el 6 feb. 2020 a las 9:55
1

Debes ubicar h6::before

En la línea 11 ubique:


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;
}

Y reemplace padding-right: 10px por padding: 0 10px, elimine font-size: 20px y agregue margin-top: 7px:

Es decir, dejando esto:

h6::before {
  counter-increment: section;
  content: counter(section) " ";
  background-color: blue;
  border-radius:30px;
  color: white;
  padding: 0 10px;
  text-align: center;
}

Ubicar también:

a,p, h6 {
  display: flex;
  align-items: center;
}

Y cambie align-items: center por align-items: flex-start:

a,p, h6 {
  display: flex;
  align-items: flex-start;
}
1
  • Eso solucionó el centrar el número, pero aún así el texto se ve a la mitad en vez de el número alineado con la primera línea de texto, y tampoco hace caso al tamaño de letra que le defino
    – Lucía
    Commented el 6 feb. 2020 a las 9:30
1

En este ejemplo cuando no cabe en la línea salta a la siguiente empezado desde la misma posción que el before de la sección. Al igual que se hace en 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

.container {
  // background-color: green;
  // color: white;
  counter-reset: section;
}

h6 {
  font-size: 24px;
  line-height: 1;
  margin: 8px auto;
}

h6::before {
  counter-increment: section;
  content: counter(section);
  display: inline-block;
  color: red;
  background: blue;
  border: 5px solid blue;
  padding: 9px 15px;
  margin-right: 16px;
  border-radius: 50%;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <h6>Ponemos en el vaso de la batidora los huevos.</h6>
    <h6>Ponemos en el vaso de la batidora los huevos, la mantequilla, el azúcar, la sal, la leche y batimos todo.</h6>
    <h6>Ponemos en el vaso de la batidora los huevos, la mantequilla, el azúcar, la sal, la leche y batimos todo.</h6>
    <h6>Ponemos en el vaso de la batidora los huevos, la mantequilla, el azúcar, la sal, la leche y batimos todo.</h6>
  </div>
</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.