0

Tengo el siguiente código html que se muestra en una parte de las entradas de WordPress

#descarga {
    position: relative;
}

.overlay{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(255,255,255,0.8) url("https://i.sstatic.net/ZdcUt.gif") center no-repeat;
}

fieldset.fieldbox {
    display: block;
    margin-left: 3px;
    padding-top: 2px;
    text-shadow: 2px 2px 3px rgba(150, 150, 150, 0.75);
    border-top: 4px solid #464646;
    border-bottom: 4px solid #464646;
    border-left: 4px solid #464646;
    border-right:  4px solid #464646;
    border-radius: 5px;
}

div.enlaces_box, .enlaces_box span, .enlaces_box a, .enlaces_box img, .enlaces_box b, .enlaces_box i, .enlaces_box ul, .enlaces_box li {
    margin: 0px;
    padding: 0px;
    border: 0px;
    font-size: 100%;
    vertical-align: baseline;
}

.enlaces_box {
    float: left;
    width: 100%;
    margin: 0px 0px -1px;
    background: rgb(38, 43, 54);
}

.enlaces_box ul {
    list-style: none;
}

.enlaces_box li, .enlaces_box ul {
    margin: 0px;
    list-style: none;
}

.enlaces_box ul.enlaces li.elemento {
    width: 100%;
    float: left;
    padding: 8px 0px;
    color: rgb(140, 140, 156);
    border-bottom: 1px solid rgb(0, 0, 0);
    font-size: 13px;
}

.enlaces_box ul.enlaces li.headers {
    color: rgb(255, 255, 255);
    font-size: 12px;
    background: rgb(30, 34, 43);
    padding: 10px 0px;
    border-bottom: 0px;
    margin-bottom: 9px;
    font-family: sans-serif;
    font-weight: 600;
    border-radius: 3px;
}

.enlaces_box ul.enlaces li.elemento:last-child {
    border-bottom: 0px;
}

.enlaces_box ul.enlaces li.elemento span {
    width: 25%;
    float: left;
    padding: 5px 2%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.enlaces_box ul.enlaces li.elemento span.a select {
    width: 100%;
    text-align: center;
    text-align-last: center;
}

.enlaces_box {
    text-align: center;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.enlaces_box ul.enlaces li.elemento span.b i.fab  {
    font-size: 24px;
    margin-right: 8px;
    margin-top: 2px;
}

#mensaje-fuentes {
    text-align: center;
}

#link-fuente {
    text-align: center;
}

.fas fa-caret-down::before {
    content: "\f0d7";
}

.enlaces_box a {
    text-decoration: none;
    transition: all 0.1s ease-in-out 0s;
    color: rgb(122, 136, 157);
}

.enlaces_box ul.enlaces li.elemento a {
    color: rgb(150, 157, 174);
}

.fas fa-download::before {
    content: "\f019";
}

.enlaces_box ul.enlaces li.elemento span b {
    font-size: 25px;
    color: rgb(89, 138, 245);
}

.enlaces_box ul.enlaces li.elemento .a img {
    width: 31px;
    display: block;
    margin: auto;
}

fieldset.fieldbox {
    display: block;
    margin-left: 3px;
    padding-top: 2px;
    text-shadow: 2px 2px 3px rgba(150, 150, 150, 0.75);
    border-top: 4px solid #464646;
    border-bottom: 4px solid #464646;
    border-left: 4px solid #464646;
    border-right:  4px solid #464646;
    border-radius: 5px;
}

div.datos-tecnicos-box, .datos-tecnicos-box span, .datos-tecnicos-box a, .datos-tecnicos-box img, .datos-tecnicos-box b, .datos-tecnicos-box i, .datos-tecnicos-box ul, .datos-tecnicos-box li {
    margin: 0px;
    padding: 0px;
    border: 0px;
    font-size: 100%;
    vertical-align: baseline;
}

.datos-tecnicos-box {
    float: left;
    width: 100%;
    margin: 0px 0px -1px;
    background: rgb(38, 43, 54);
}

.datos-tecnicos-box ul {
    list-style: none;
}

.datos-tecnicos-box li, .datos-tecnicos-box ul {
    margin: 0px;
    list-style: none;
}

.datos-tecnicos-box ul.datos-tecnicos li.elemento {
    width: 100%;
    float: left;
    padding: 8px 0px;
    color: rgb(140, 140, 156);
    border-bottom: 1px solid rgb(0, 0, 0);
    font-size: 13px;
}

.datos-tecnicos-box ul.datos-tecnicos li.headers {
    color: rgb(255, 255, 255);
    font-size: 12px;
    background: rgb(30, 34, 43);
    padding: 10px 0px;
    border-bottom: 0px;
    margin-bottom: 9px;
    font-family: sans-serif;
    font-weight: 600;
    border-radius: 3px;
}

.datos-tecnicos-box ul.datos-tecnicos li.elemento:last-child {
    border-bottom: 0px;
}

.datos-tecnicos-box ul.datos-tecnicos li.elemento span {
    float: left;
    padding: 5px 2%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datos-tecnicos-box ul.datos-tecnicos li.elemento span.a {
    width: 20%;
}

.datos-tecnicos-box ul.datos-tecnicos li.elemento span.b {
    width: 26.5%;
}

.datos-tecnicos-box ul.datos-tecnicos li.elemento span.c {
    width: 14%;
}

.datos-tecnicos-box ul.datos-tecnicos li.elemento span.d {
    width: 20.5%;
}

.datos-tecnicos-box ul.datos-tecnicos li.elemento span.e {
    width: 19%;
}

.datos-tecnicos-box {
    text-align: center;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.datos-tecnicos-box ul.datos-tecnicos li.elemento span.a i.fab {
    font-size: 24px;
    margin-right: 8px;
    margin-top: 2px;
}


.datos-tecnicos-box a {
    text-decoration: none;
    transition: all 0.1s ease-in-out 0s;
    color: rgb(122, 136, 157);
}

.datos-tecnicos-box ul.datos-tecnicos li.elemento a {
    color: rgb(150, 157, 174);
}

.fas fa-download::before {
    content: "\f019";
}
<fieldset id="descarga" class="fieldbox">
<div class="loading overlay"></div>
    <div class="enlaces_box">
        <ul class="enlaces">
            <li class="elemento headers">
                <span class="a">SERVIDOR <i class="fas fa-caret-down"></i></span><span class="b">SO <i class="fas fa-caret-down"></i></span><span class="c">FORMATO <i class="fas fa-caret-down"></i></span>
            </li>
            <li id="li1" class="elemento">
                <span class="a"><select id="iv1" class="select_host"><option value ="">Elija Servidor</option><option value="ClickNUpload.co">ClickNUpload.co</option></select></span><span class="b"><i class="fab fa-windows"></i> 32 Bits</span><span class="c">Instalable</span>
            </li>
        </ul>
    </div>
</fieldset>

Lo que deseo es que se sobreponga el loader, cuando yo aplique el código CSS con las reglas que lo ubican centrado, encima del DIV con la clase "enlaces_box" (con Javascript yo lo agrego o lo retiro a mi gusto, ya que el loader no va a aparecer siempre). Como pueden ver actualmente me vi obligado a usar un DIV con las clases "loading" y "overlay", quiero prescindir de él para tener el código "mas limpio", en su lugar reutilizar el DIV "enlaces_box" que ya tengo (además quiero que el loader se centre en el contenido de este DIV), además el efecto de opacidad y la imagen "centrada" se aplique solamente al DIV con la clase "overlay" (no a todo el body de la página como se observa en el Snippet).

1 respuesta 1

0

Ya lo solucioné. Lo de eliminar el DIV, veo que no se va a poder, pero no es tan importante.

Solo, agregué este estilo al Fieldset:

Agregué

#descarga {
    position: relative;
}

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.