0

Estoy trabajando en una plantilla de eSports, quiero crear mi propia página pero no entiendo como puedo hacer esta separación. Daré un ejemplo visual (Es una plantilla descarga de Internet);

introducir la descripción de la imagen aquí

Pero, ahora quiero agregar donde dice "Twitch" agregar un texto de enlace en este, por lo que la forma básica de hacerlo, fue agregar un tag a href.

Pero al guardar y probar, esto es lo que me arroja: introducir la descripción de la imagen aquí

Aquí mi inspección de elemento: introducir la descripción de la imagen aquí

Soy muy novato en esto, pero quisiera saber como puedo ignorar el css que toma la etiqueta <a>

Dejaré mi CSS en esta sección exacta:

HTML

<a data-id="0">
  <img class="player-img" alt="player-img" src="images/jugadores/flussen.png">
  <span class="name">
    <b>Flussen</b>
  </span>
  <span class="info-bord">
    <span class="name"><b>Flussen</b> | IGL</span>
    <span class="progress-item">
      <span class="progress-line"></span>
      <span class="bar-label">
        <span class="achievement"><a href="https://www.twitch.tv/flussentl">Twitch</a></span>
        <span class="score"></span>
      </span>
    </span>
    <span class="progress-item">
      <span class="progress-line"></span>
      <span class="bar-label">
        <span class="achievement">Youtube</span>
        <span class="score"></span>
      </span>
    </span>
    <span class="progress-item">
      <span class="progress-line"></span>
      <span class="bar-label">
        <span class="achievement">Twitter</span>
        <span class="score"></span>
      </span>
    </span>
  </span>
</a>

CSS

.esport-team-landing-players .wrap a {
    position: relative;
    display: inline-block;
    margin-left: 0;
    float: left;
    overflow: hidden;
    background-color: #73aed633;
    ;
    width: 228px;
    height: 400px;
    transition: all .2s ease-in-out 0s, visibility 0s linear .3s, z-index 0s linear 10ms
}

.esport-team-landing-players .wrap a>img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.esport-team-landing-players .wrap a>.name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    font-size: 14px;
    padding: 30px 27px;
    font-family: Montserrat;
    line-height: 1;
    text-transform: uppercase;
    background: linear-gradient(to top, rgba(0, 0, 0, .5) 27%, rgba(0, 0, 0, .1) 79%)
}
3
  • 2
    Tu código como texto por favor
    – user128299
    el 19 may. 2020 a las 13:24
  • Lo he agregado, está bien con esa parte?
    – Alex Rios
    el 19 may. 2020 a las 13:37
  • Hola tu puedes hacer eso con css, nada mas tienes que colocar la etiqueta text-decoration:none y listo ya lo tienes nada mas te faltaria adaptarlo a tu pagina. Espero que te sirva. el 19 may. 2020 a las 16:29

1 respuesta 1

2

Inspeccionando la etiqueta <a> con las herramientas de desarrollador que nos proporcionan los navegadores, podrías ver que estilos se le están aplicando a los enlaces y aplicarle los tuyos propios que los pisen o modificar el HTML para que dejen de afectarlos.

En tu caso, la regla que está afectando a tu enlace y que deseas que no se te aplique es .esport-team-landing-players .wrap a. Esta regla está afectando a cualquier enlace que tenga como ancestro primero un elemento con la clase esport-team-landing-players y luego otro con la clase wrap, alcanzando al enlace que no quieres al que se le apliquen esos estilos.

Para evitarlo podrías usar el siguiente selector en vez del mencionado con anterioridad:

.esport-team-landing-players .wrap .players-wrapper > a

De esta manera, solamente le estaría aplicando los estilos a los enlaces que sean hijos directos de un elemento .players-wrapper que además sea hijo de un .wrap y que este a su vez sea hijo de un .esport-team-landing-players.

4
  • Ok, estoy agregando de prueba el a href y trabajando con .esport-team-landing-players .wrap .players-wrapper > a poniendo por ejemplo un color: #fff, me sigue separando todo, solo que con color el enlance, es decir, como en la segunda imagen, se separa del rectangulo y se crea otro, tal vez no he entendido bien, disculpa
    – Alex Rios
    el 19 may. 2020 a las 15:19
  • Entonces existe alguna regla más que está afectando a esa etiquetas <a> y que no has puesto en la pregunta. Lo ideal sería contar con un ejemplo en el que pudiese reproducir lo que te sucede, pero si no puedes montarlo creo que bastaría con que actualizaras tu pregunta con las reglas CSS que estén afectando a esa etiqueta <a> en concreto. Puedo verlas haciendo click derecho y dando a Inspeccionar sobre el elemento.
    – phpMyGuel
    el 19 may. 2020 a las 15:51
  • He agregado una imagen de mi inspección de elemento, realmente aún no entiendo el porque se crea otro rectangulo, por lo que tengo entendido es porque el estilo está en la etiqueta <a>, podría cambiar de <a> a otro, ejemplo <i>, sin perder el estilo? El inspector de elementos indica .esport-team-landing-players .wrap a que es la del diseño, ahora; hay una forma "fácil" de solo crear un a href con un ID único o una etiqueta que ignore todo lo anterior, o algo relacionado? Creo que es una novatada de mi parte, por ser algo simple
    – Alex Rios
    el 19 may. 2020 a las 16:08
  • Le sigue afectando la regla CSS .esport-team-landing-players .wrap a que tienes en soccer.min.css. Búscala en dicho archivo y sustitúyela por la que puse en mi respuesta. Mientras esa regla afecte a la etiqueta <a> se te va a crear ese "rectángulo" que mencionas.
    – phpMyGuel
    el 19 may. 2020 a las 21:58

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.