📣 Seu anúncio aqui? Anuncie no ForoBeta

Como mudar o nome da classe .circulos em CSS e HTML

  • Autor Autor WebmasterKing
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
WebmasterKing

WebmasterKing

Kappa
Verificación en dos pasos activada
Verificado por Binance
Usuário popular!
Hola!! Necesito una ayudita.

Tengo este codigo funcionando bien
HTML:
Inserir CODE, HTML ou 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:

Inserir CODE, HTML ou 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?
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Continuar com o Google Criar conta com e-mail
Leva 30 segundos · você volta a este tópico ao terminar
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
 

Anexos

  • 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: 27
samuelsuteras disse:
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
Clique 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
 
Wizatek disse:
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

Ver o anexo 668151
Clique para expandir...
Voy a ver como lo hago ya que no se bregar con esto xD
 
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

Inserir CODE, HTML ou 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;
}
Clique para expandir...
 

Anexos

  • 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: 30
WebmasterKing disse:
Voy a ver como lo hago ya que no se bregar con esto xD
Clique 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:
Inserir CODE, HTML ou 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 disse:
La clase que encierra los ítems redondos es la misma que el div que los contiene, cambialos por ejemplo:
Inserir CODE, HTML ou 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;}
Clique para expandir...
Lo logre pero queda en fila hacia abajo no hacia los lados como los demas mira: https://donlotery.com/elementor-929/
Wizatek disse:
Cambia la clase que engloba a los divs color Ver o anexo 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 😀
Clique 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 disse:
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/
Clique para expandir...
Cambia esto:
Inserir CODE, HTML ou 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:

Inserir CODE, HTML ou 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:

Inserir CODE, HTML ou 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 disse:
Cambia esto:
Inserir CODE, HTML ou 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:

Inserir CODE, HTML ou 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:

Inserir CODE, HTML ou 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;
}
Clique para expandir...
Sigue saliendo vertical con tu codigo amigo quiero que la linea salga horizontal
 
WebmasterKing disse:
Sigue saliendo vertical con tu codigo amigo quiero que la linea salga horizontal
Clique para expandir...
Es por que no hiciste los cambios que te mostré

Veo la misma clase en el div :

Inserir CODE, HTML ou 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>
 
Você precisa estar logado ou cadastrado para responder aqui.

Tópicos similares

Johan Sibulo
Como mudar o nome da minha página do Facebook facilmente?
Respostas
4
Visitas
44
lucasz12
lucasz12
WebmasterKing
Como fazer esta linha Horizontal?
Respostas
6
Visitas
348
WebmasterKing
WebmasterKing
pek96x
Como mudar o nome de titular na minha conta do TikTok e vendê-la?
Respostas
1
Visitas
184
Perro dudoso
Perro dudoso
Dandani
Como mudar o nome do proprietário da conta bônus Reels?
Respostas
2
Visitas
203
latotona
latotona
JoyBoy
Como mudar o nome da minha Fan Page no Facebook?
Respostas
12
Visitas
447
pumuki
pumuki
Voltar
Topo