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"; } } }
Rispondi quotando
Originariamente inviata da Rickycast
se il software è "addestrato" bene, fa tutto ciò che gli chiedi... il problema principale sta nel "saperlo addestrare" 
