HTML - CSS che non esegue "display: block" e altre anomalie

**Rickycast** · 29-09-2022, 18:37

Buongiorno.
Ho ripreso a scrivere stringhe in HTML dopo molto tempo e ovviamente mi sono arrugginito, così, ovviamente, sono caduto in diversi errori.
Uno però non me lo so spiegare: un <div> richiama una “class” che contiene la proprietà “display:block” ma quando la pagina viene aperta è come se non avessi scritto “display:block”.
Per fare in modo che la pagina venga visualizzata come voglio, devo aggiungere nel <div>, prima della “class”, il “tag” “style: display:block”.
È possibile che venga ignorata una proprietà inserita in un CSS? E per quale ragione può accadere?
Ovviamente se invece di richiamare la “class” scrivo tutto dentro a “style” il problema non si pone.
L’evento si verifica quando utilizzo una procedura “js” per fare scomparire e riapparire due elenchi di immagini scorrevoli (realizzato con “Slick”).
Però se non aggiungo style=”display: block”, e faccio “Click” sul testo “PRODOTTI” la sequenza “ATREZZATURE” non mostra le immagini; ma facendo click su un pallino qualsiasi e aspettando un attimo rivedo le immagini come devono essere. Ovviamente non va bene ma è quanto meno strano.

Altra cosa strana. In “sequenza.css “, nella classe bckgrndSlick ho inserito la proprietà “width: 100%;” poi per qualche misteriosa ragione mi è rimasto sulla stessa stringa un */ che non so come sia capitato lì. Provate a cancellarlo e poi aprite la pagina.
Sono anche stato fortunato, perché era proprio l’effetto che volevo, ma non so spiegarmi perché funzioni.

P.S.: i File di esempio sono venuti in .jpg anziché in .png; dovrete cambiare l'estensione.

Aspetto con molta curiosità le spiegazioni che spero qualcuno mi sappia dare.
Saluti,

codice:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mostra-nascondi-sequenza</title>
  
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://kit.fontawesome.com/39a3783737.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="slick.css">    
    <link rel="stylesheet" type="text/css" href="slick-theme.css">
    <link rel="stylesheet" type="text/css" href="sequenza.css" rel="stylesheet">
    
</head>
<body>
    
<div id="chimici" style="display:block;" class="pszscor">
    <a href="#" onClick="ShowAndHide('chimici','attrezz');return(false)" class="txtscor">PRODOTTI</a>
        <div class="bckgrndSlick">
        <div class="rgtCover"></div>
        <div class="lftCover"></div>
        <div class="center slider">
            <div><a href="#"><img class="zSldr" src="Attrezature.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Attrezature.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Attrezature.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Attrezature.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Attrezature.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Attrezature.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Attrezature.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Attrezature.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Attrezature.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Attrezature.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Attrezature.png"></a></div>
        </div>
    </div>
</div>

<div id="attrezz" style="display:block;" class="pszscor">
    <a href="#" onClick="ShowAndHide('chimici','attrezz');return(false)" class="txtscor">ATTREZZATURE</a>
    <div class="bckgrndSlick"> 
        <div class="rgtCover"></div>
        <div class="lftCover"></div>
        <div class="center slider">
            <div><a href="#"><img class="zSldr" src="Prodotti.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Prodotti.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Prodotti.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Prodotti.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Prodotti.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Prodotti.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Prodotti.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Prodotti.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Prodotti.png"></a></div>
            <div><a href="#"><img class="zSldr" src="Prodotti.png"></a></div>
        </div>
    </div>
</div>

    <script src="sequenza.js" type="text/javascript" charset="utf-8"></script> 
    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
    <script src="slick.js" type="text/javascript" charset="utf-8"></script>
    <script src="slickLoc.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>

File "sequenza.css"

codice:

/* GLOBAL STYLES
-------------------------------------------------- */

html {
    background-color:#FFFFFF;
}

body {
    min-height: 100vh;
    /*min-height:100%;*/
    width: 100%;
    position:absolute;
    top:0;
    margin:0;
    background-color:#FFFFFF;
}
        
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.mainFont-a{
    font-family:"Segoe UI", Verdana, Arial, Helvetica;
}

.mainFont-b{
    font-family:"Segoe UI Light", Verdana, Arial, Helvetica
}

div#attrezz{display:none}

.txtscor{    
    color: rgba(255, 255, 255, 0.6);
    position:relative; 
    text-decoration:none; 
    top: -8px; 
    font-size:26px;
    }
    
.txtscor:hover{
    color: rgba(255, 255, 255, 1);
    }

.slick-prev:before,
.slick-next:before {
    color: black;
}

.slick-slide {
    transition: all ease-in-out .3s;
    opacity: .75;
    margin: 0 -5px 0 -5px;
}
    
.slick-active {
    opacity: .75;
}

.slick-current {
    opacity: 1;
}

.slider{                
    width: 100%;
    margin: 10px 0;
}

.slick-slide img {        
    width: 90%;
}
    
.pszscor{
    display:block; 
    position:absolute; 
    text-align:center; 
    background-color:#000000; 
    color:#FFFFFF;
    width:100%; 
    height:25px; 
    top:50px;    
    }
    
.rgtCover {                                    
    position:absolute; 
    width:44.45%; 
    height:76%; 
    top:7.78%;
    right: 0;
    background-color:transparent;
    z-index:90;
}    
    
.lftCover {                                    
    position:absolute; 
    width:44.85%;
    height:76%;
    top:7.7%;
    left: 0;
    background-color:transparent;
    z-index:90;
}    

.zSldr {
    z-index:80;
}    

.bckgrndSlick {                                
    position:absolute;
    top: 100%;                                
    margin: 0px;                            
    padding: 0px;                            
    left: 0px;                                
    right: 0px;                                
    background-color:#000000;                
    width: 100%;                            */            /* PROVATE A TOGLIERE L'ASTERISCO E LA BARRA DESTRA <--- SU QUESTA RIGA E APRITE LA PAGINA */
    height: 20.4%;                            
    z-index: 10;                            
}

File "sequenza.js"

codice:

// JavaScript Document

function ShowAndHide(id1,id2){
if(document.getElementById){
    el1=document.getElementById(id1);
    el2=document.getElementById(id2);
    if(el1.style.display=="none"){
        el1.style.display="block";
        el2.style.display="none";
        }
    else{
        el1.style.display="none";
        el2.style.display="block";
        }
    }
}

Discussione: HTML - CSS che non esegue "display: block" e altre anomalie

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione discussione

HTML - CSS che non esegue "display: block" e altre anomalie

Permessi di invio