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";
}
}
}