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.
#
) 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...<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.!important
(ver aquí).