Cómo cambiar el nombre de la clase .circulos en CSS y HTML

  • Autor Autor WebmasterKing
  • Fecha de inicio Fecha de inicio
WebmasterKing

WebmasterKing

Kappa
Verificación en dos pasos activada
Verificado por Binance
¡Usuario popular!
Hola!! Necesito una ayudita.

Tengo este codigo funcionando bien
HTML:
Insertar CODE, HTML o PHP: 
</style>


<div class="circulos">
    <div class="circulo">
        <h2>30</h2>
    </div>
    <div class="circulo">
        <h2>22</h2>
    </div>
    <div class="circulo">
        <h2>25</h2>
    </div>
</div>

</body>
</html>
CCS:

Insertar CODE, HTML o PHP: 
.circulos {
    width: 500px;
    display: flex;
}

.circulo {
    width: 60px;
    height: 60px;
    color: #737373;
    border-radius: 50%;
    background-color: #efefff;
    border: 0px solid #efefff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    margin-bottom: 5px;
}

.circulo:nth-child(6){
    color: #ffffff;
    background-color: #6f70ff;
    border: 0px solid #0100fe;
}

.circulo:nth-child(7){
    color: #ffffff;
    background-color: #ff6162;
    border: 0px solid #ff6162;
}

.circulo > h2 {
    font-size: 25px;
    font-weight: bold;
    font-family: sans-serif;
    margin: 0px;
}
.circulos {
    width: 300px;
    display: flex;
    flex-wrap: wrap;
}

PERO CUANDO INTENTO CAMBIAR EL NOMBRE .circulos EN TODO EL CCS Y HTML, PARA HACER ALGUNOS CAMBIOS DE COLORES Y MANTENER LA PRODPIEDADES DEL PRIMER CODIGO EN OTRAS COLUNNAS SE ME PONE ASI:
Screenshot_445.webp


COMO SE SOLUCIONA ESTO?
 
Problema de cache o hay alguna clase que tiene algo asi como .clase .circulos{
estilos
}
 
Queres cambiar la clase circulo por circulos? No entiendo bien.
 
No entendi
 
a la clase llamada color le estas dando un width de 300px y en la misma clase que la llamas en aguna otra parte de tu css tiene un height de 60px, no puedes tener un circulo perfecto si el width y el height son distintos
 

Adjuntos

  • Captura de pantalla 2022-01-10 a las 16.15.01.webp
    Captura de pantalla 2022-01-10 a las 16.15.01.webp
    13,1 KB · Visitas: 16
samuelsuteras dijo:
a la clase llamada color le estas dando un width de 300px y en la misma clase que la llamas en aguna otra parte de tu css tiene un height de 60px, no puedes tener un circulo perfecto si el width y el height son distintos
Hacer clic para expandir...
Uff no entendi es que no se nada de codigo puede enviarmelo con la correcciones por favor?
 
Buenos dias colega, no esta tomando los cambios (segun el link que pasaste https://donlotery.com/elementor-929/ )
Si usas el inspector del navegador, no tenes las clases.. por algun motivo no se imprime ni el div que contiene a los circulos con la clase "circulos", ni cada clase "circulo". Estas guardando bien los cambios? problemas de internet / internet lento? ... la manera de borrar cache es con ctrl+shift + supr , mas herramientas, borrar datos de navegacion, "todos los tiempos"
 
Amigo tienes que cambiar la clase que engloba a los items, cámbialo por ejemplo a .colors y aplícale un display:flex y los .color ponle un witch y height de 60px

1641827836842.webp
 
El problema numero 1 es que tienes 1 contenedor padre y 3 hijos (los circulos verdes)

pero el padre tiene la misma clase que los hijos, donde ya vamos mal.


el padre se tiene que llamar colors y cada hijo color

Insertar CODE, HTML o PHP: 
.colors{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}

.color{
    width: 60px;
    height: 60px;
    color: #FFF;
    border-radius: 50%;
    background-color: #48A413;
    border: 0 solid #efefff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    margin-bottom: 5px;
}
Hacer clic para expandir...
 

Adjuntos

  • Captura de pantalla 2022-01-10 a las 16.18.59.webp
    Captura de pantalla 2022-01-10 a las 16.18.59.webp
    5,5 KB · Visitas: 20
WebmasterKing dijo:
Voy a ver como lo hago ya que no se bregar con esto xD
Hacer clic para expandir...
Cambia la clase que engloba a los divs color
1641828058442.webp


y esa nueva clase colócale el estilo display:flex luego de eso vas a la clase color y ponles un witch y height de 60px

No se si me he explicado bien 😀
 
La clase que encierra los ítems redondos es la misma que el div que los contiene, cambialos por ejemplo:
Insertar CODE, HTML o PHP: 
color2.{width: 60px; height: 60px; color: #737373; border-radius: 50%; background-color: #efefff; border: 0 solid #efefff; display: flex; justify-content: center; align-items: center; margin-right: 5px; margin-bottom: 5px;}
 
iniciopublic dijo:
La clase que encierra los ítems redondos es la misma que el div que los contiene, cambialos por ejemplo:
Insertar CODE, HTML o PHP: 
color2.{width: 60px; height: 60px; color: #737373; border-radius: 50%; background-color: #efefff; border: 0 solid #efefff; display: flex; justify-content: center; align-items: center; margin-right: 5px; margin-bottom: 5px;}
Hacer clic para expandir...
Lo logre pero queda en fila hacia abajo no hacia los lados como los demas mira: https://donlotery.com/elementor-929/
Wizatek dijo:
Cambia la clase que engloba a los divs color Ver el archivo adjunto 668159

y esa nueva clase colócale el estilo display:flex luego de eso vas a la clase color y ponles un witch y height de 60px

No se si me he explicado bien 😀
Hacer clic para expandir...

Lo hice y mira como se ve: https://donlotery.com/elementor-929/ se hace una fila hacia abajo no hacia los lados como las demas

@samuelsuteras mira como se e ahora hacia abajo y no hacia los lados: https://donlotery.com/elementor-929/
 
WebmasterKing dijo:
Lo logre pero queda en fila hacia abajo no hacia los lados como los demas mira: https://donlotery.com/elementor-929/


Lo hice y mira como se ve: https://donlotery.com/elementor-929/ se hace una fila hacia abajo no hacia los lados como las demas

@samuelsuteras mira como se e ahora hacia abajo y no hacia los lados: https://donlotery.com/elementor-929/
Hacer clic para expandir...
Cambia esto:
Insertar CODE, HTML o PHP: 
<div class="color">
    <div class="color">
        <h2>30</h2>
    </div>
    <div class="color">
        <h2>22</h2>
    </div>
    <div class="color">
        <h2>25</h2>
    </div>
</div>

Por esto:

Insertar CODE, HTML o PHP: 
<div class="color">
    <div class="colores">
        <h2>30</h2>
    </div>
    <div class="colores">
        <h2>22</h2>
    </div>
    <div class="colores">
        <h2>25</h2>
    </div>
</div>

Agrega este nuevo css:

Insertar CODE, HTML o PHP: 
.colores {
    width: 60px;
    height: 60px;
    color: #737373;
    border-radius: 50%;
    background-color: #efefff;
    border: 0 solid #efefff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    margin-bottom: 5px;
}
 
iniciopublic dijo:
Cambia esto:
Insertar CODE, HTML o PHP: 
<div class="color">
    <div class="color">
        <h2>30</h2>
    </div>
    <div class="color">
        <h2>22</h2>
    </div>
    <div class="color">
        <h2>25</h2>
    </div>
</div>

Por esto:

Insertar CODE, HTML o PHP: 
<div class="color">
    <div class="colores">
        <h2>30</h2>
    </div>
    <div class="colores">
        <h2>22</h2>
    </div>
    <div class="colores">
        <h2>25</h2>
    </div>
</div>

Agrega este nuevo css:

Insertar CODE, HTML o PHP: 
.colores {
    width: 60px;
    height: 60px;
    color: #737373;
    border-radius: 50%;
    background-color: #efefff;
    border: 0 solid #efefff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    margin-bottom: 5px;
}
Hacer clic para expandir...
Sigue saliendo vertical con tu codigo amigo quiero que la linea salga horizontal
 
WebmasterKing dijo:
Sigue saliendo vertical con tu codigo amigo quiero que la linea salga horizontal
Hacer clic para expandir...
Es por que no hiciste los cambios que te mostré

Veo la misma clase en el div :

Insertar CODE, HTML o PHP: 
<div class="color">
    <div class="color">
        <h2>30</h2>
    </div>
    <div class="color">
        <h2>22</h2>
    </div>
    <div class="color">
        <h2>25</h2>
    </div>
</div>
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

WebmasterKing
¿Cómo hacer esta linea Horizontal?
Respuestas
6
Visitas
348
WebmasterKing
WebmasterKing
Turbo
Cómo crear dos cajas juntas con CSS y HTML - Tutorial ultra básico
Respuestas
3
Visitas
3K
Puko
Puko
__Cc__
  • Cerrado
Cómo cambiar color de títulos en entradas de WordPress
Respuestas
5
Visitas
656
__Cc__
__Cc__
Atrás
Arriba