Visualizzazione dei risultati da 1 a 10 su 15

Visualizzazione discussione

  1. #1
    Utente di HTML.it L'avatar di Rickycast
    Registrato dal
    Apr 2007
    residenza
    CHIERI (TO)
    Messaggi
    263

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

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

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.