Avisos
Vaciar todo

Problema con modulo de pestañas + tienda divi  

 
Fernando
 Fernando
Usuario activo

Buenas tenemos un modulo de pestañas al que hemos metido diferentes artículos de la tienda de divi, el problema viene a la hora de darle forma a esas pestañas, lo hemos hecho mediante css pero por algún motivo que desconocemos la zona derecha de la pestaña sale sin marcar, como que desaparece... adjuntamos imagen

 

Aquí se puede ver la página en directo: Calendarios 2025 personalizados para empresas (nimar.es)

problema css

este es el código que añadimos:

/* Estilos tabs ov-divi */
.ov-tabs {
background-color: transparent; /* Fondo transparente */
}

.ov-tabs .et_pb_tabs_controls {
display: flex;
flex-wrap: nowrap; /* Mantiene las pestañas en una sola línea */
justify-content: center; /* Alineación central de las pestañas */
overflow: visible; /* Asegura que todo el contenido sea visible */
}

.ov-tabs .et_pb_tabs_controls li {
display: inline-block;
background-color: white; /* Fondo blanco */
border: 2px solid gray; /* Borde gris */
border-right: none; /* Elimina el borde derecho para evitar el doble borde */
color: black; /* Texto negro */
padding: 5px 15px; /* Altura reducida con más espacio horizontal */
margin-right: 15px; /* Aumenta la separación entre pestañas */
cursor: pointer;
transition: all 0.3s ease; /* Transición suave */
min-width: auto; /* Ancho ajustado al contenido */
position: relative; /* Asegura que el borde se mantenga visible */
border-radius: 30px; /* Bordes redondeados */
}

.ov-tabs .et_pb_tabs_controls li:hover {
border-color: black; /* Borde negro al pasar el ratón */
}

.ov-tabs .et_pb_tabs_controls li.et_pb_tab_active {
background-color: black; /* Fondo negro al seleccionarla */
color: white; /* Texto blanco al seleccionarla */
border-color: black; /* Borde negro al seleccionarla */
z-index: 1; /* Asegura que la pestaña activa esté sobre las demás */
border-right: 2px solid black; /* Mantiene el borde derecho de la pestaña activa */
border-radius: 30px; /* Bordes redondeados también para la pestaña activa */
}

/* Asegura que el borde derecho no desaparezca */
.ov-tabs .et_pb_tabs_controls li:not(:last-child) {
border-right: 2px solid black; /* Añade un borde negro entre pestañas */
border-radius: 30px; /* Bordes redondeados entre pestañas también */
}

/* Ajuste del ancho de la pestaña acorde con el texto */
.ov-tabs .et_pb_tabs_controls li {
width: auto;
white-space: nowrap;
}

Contenido solo visible a usuarios registrados

Citar
Respondido : 01/10/2024 11:43 am