Visualizzazione dei risultati da 1 a 7 su 7
  1. #1

    Qualche dubbio su CSS-GRID

    Ciao a tutti,
    anzitutto mi presento, sono un abituale visitatore di html.it ma nuovo qui sul forum,
    sono francesco ho 32 anni e sono un perito informatico col pallino dell web developing.
    Avendo iniziato ben piu di 10 anni fa, mi ci sono rituffato solo nell'ultimo periodo e ovviamente quasi tutto quello che conoscevo è diventato quasi obsoleto .
    Uno fra tutti il layouting di un sito internet, all'epoca ero un utilizzatore delle tabelle, adesso ho scoperto un mondo chiamato css-grid.
    Un pò piu facile da rendere responsive e con tante feature interessanti.
    Arrivo al punto, ho provato a creare un layout semplice, cerco di "disegnarvelo":

    |header | header |
    | main | main |
    |footer |footer |

    una volta impostato, ho provato a sostituire uno degli |header| con un |menu| tramite un toggleClass (associato ad un evento onclick) che imposta la classe col layout che cambia solo la prima riga in questo modo:
    | header | menu |

    Il tutto sembra funzionare, senonchè quando switcho da un layout all'altro l'area menu mi compare alla fine della pagina...
    Qualcuno sarebbe in grado di spiegarmi per bene come ragiona questa tecnologia in questi casi?
    Mi aspetterei che se un area particolare non è presente nel grid-template non dovrebbe essere proprio visualizzata o sbaglio?
    Spero di essere stato chiaro e vi ringrazio se vorrete darmi qualche risposta.
    Ciao!

  2. #2
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    130
    Ciao, forse dipende dal fatto che menu non sia in postition:absolute, è possibile vedere il codice in questione ?

  3. #3
    Quote Originariamente inviata da ninja72 Visualizza il messaggio
    Ciao, forse dipende dal fatto che menu non sia in postition:absolute, è possibile vedere il codice in questione ?
    ciao!
    la classe menu ho già provato a settarla in absolute ma così facendo appare a prescindere dal click :\
    ti passo il codice dell'intera pagina

    [*URL]https://pastebin.pl/view/9bdb9711[/URL]

    mentre la pagina in sè: https://stdiofrenz.altervista.org/grid_prova.html

    grazie mille!

  4. #4
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,777
    Quote Originariamente inviata da Frenzarectah Visualizza il messaggio
    [*URL]https://pastebin.pl/view/9bdb9711[/URL]
    ciao,

    il mio malwarebyte si irrita tentando di accedere a quell'indirizzo.
    posta il codice su forum o scegli un altro repositorio


  5. #5
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    ciao,

    il mio malwarebyte si irrita tentando di accedere a quell'indirizzo.
    posta il codice su forum o scegli un altro repositorio

    Ciao, ti posto l'intero codice della pagina.
    codice:
    <!DOCTYPE html>
    <html lang="it">
    <head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>stdiofrenz - il web a portata di mano</title>
    <meta name="description" content="">
    <meta name="author" content="Frenz">
    <link href='https://fonts.googleapis.com/css?family=Lato:400,300italic,300,100italic,100,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <!--[if lt IE 9]>
    <script src="//im.altervista.org/site_index/html5shiv.js"></script>
    <![endif]-->
    <style type="text/css">
    .box-container{
        border:1px black solid;
        display: grid;
        grid-template-areas: "header ."
                             "main main"
                            "footer footer";
        grid-template-rows:300px 500px 90px;
        grid-template-columns: 100%;
        grid-gap:5px;
    }
    .box-container1{
        border:1px blue solid;
        display: grid;
        grid-template-areas:"header menuzzo"
                            "main main"
                            "footer footer";
        grid-template-rows:300px 500px 90px;
        grid-template-columns: 92% 8%;
        grid-gap:5px;
    }
    .head{
    grid-area: header;
    border:1px yellow solid;
    margin: 2px;
    background-image:url("/image/head.jpeg");
    background-size: cover;
    color: white; 
    }
    .menu{
    grid-area: menuzzo;
    opacity:1;
    z-index: 100;
    border:1px blue solid;
    background-color: blue;
    }
    .corpo{
    grid-area: main;
    border:1px red solid; 
    }
    .foot{
    grid-area: footer;
    border:1px green solid;
    }
    #button-menu{
    position:relative;
    top:-80px;
    width:20px;
    height:20px;
    float:right;
    }
    #logo{
    margin: auto;
    width:30%;
    position: relative;
    top:20%;
    right:33%;
    left:33%;
    }
    
    #logs{
     margin:auto;
     position: relative;
     top: 30%;
    }
    @media only screen and (max-width:870px){
    img#logo{
    position: relative;
    left:35%;
    right:35%;
    }
    .box-container{
    grid-template-rows:100px;
    grid-gap:2px;
    }
    #button-menu{
    position:relative;
    top:-30px;
    width:20px;
    height:20px;
    float:right;
    }
    /*div#menu-mobile{
    float:right;
    width:20px;
    height:20px;
    display:block;
    }*/
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.0.js" type="text/javascript"></script> 
    <script type="text/javascript">
    $(document).ready(function(){
    $("#logo").hide();
    $("#logo").fadeIn(2000); //logo che appare
    $("#button-menu").click(function(){
    $(".menu").css("display","none");
    $("body").toggleClass("box-container1");
    $(".menu").toggle("slow");
    //$(".menu").animate({opacity: "1"},"slow");
    });
    });
    </script>
    </head>
    <body class="box-container">
       <div class="head">header
          <div id="logs">
             <img id="logo" src="/image/log.png">
             <img id="button-menu" src="http://stdiofrenz.altervista.org/image/menu.png">
          </div>
       </div>
       <div class="menu">menuz</div>
       <div class="corpo">body</div>
       <div class="foot">futer</div>
    </body>
    </html>
    grazie!

  6. #6
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    130
    Fondamentalmente non sono molto convinto sul fatto di gestire il layout con una griglia css preferisco ancora gestire le varie parti con i contenitori div, ti riporto un'idea molto spartana su come potresti gestire il menu anche se non sono molto convinto del modo operandi.

    codice:
    <!DOCTYPE html>
    <html lang="it">
    
    <head>
       <meta charset="utf-8">
       <meta content="width=device-width, initial-scale=1.0" name="viewport">
       <title>stdiofrenz - il web a portata di mano</title>
       <meta name="description" content="">
       <meta name="author" content="Frenz">
       <link
          href='https://fonts.googleapis.com/css?family=Lato:400,300italic,300,100italic,100,400italic,700,700italic,900,900italic'
          rel='stylesheet' type='text/css'>
       <!--[if lt IE 9]>
    <script src="//im.altervista.org/site_index/html5shiv.js"></script>
    <![endif]-->
       <style type="text/css">
          html, body {
             margin: 0;
             padding: 0;
          }
    
          .box-container {
             width: 100%;
             height: 100vh;
             display: grid;
             grid-template-areas: "header menu"
                "main menu"
                "footer menu";
             grid-template-rows: 300px auto 90px;
             grid-template-columns: 100%;
             grid-gap: 0;
             column-gap: 0;
          }
    
          .head {
             border-bottom: 1px solid black;
             grid-area: header;
             background-image: url("http://stdiofrenz.altervista.org/image/head.jpeg");
             background-size: cover;
             color: white;
          }
    
          .menu {
             position: absolute;
             height:100vh;
             right: 15px;
             width: 150px;
             display: none;
             grid-area: menu;
             opacity: 1;
             z-index: 100;
             background-color: rgba(0,0,0, .5);
          }
    
          .corpo {
             grid-area: main;
          }
    
          .foot {
             grid-area: footer;
             background-color: gray;
          }
    
          #button-menu {
             position: relative;
             top: -80px;
             width: 20px;
             height: 20px;
             float: right;
          }
    
          #logo {
             margin: auto;
             width: 30%;
             position: relative;
             top: 20%;
             right: 33%;
             left: 33%;
          }
    
          #logs {
             margin: auto;
             position: relative;
             top: 30%;
          }
    
       </style>
       <script src="https://code.jquery.com/jquery-3.5.0.js" type="text/javascript"></script>
       <script type="text/javascript">
          $(document).ready(function () {
             $("#logo").hide();
             $("#logo").fadeIn(2000); //logo che appare
             $("#button-menu").click(function () {
                $(".menu").toggle("slow");
             });
          });
       </script>
    </head>
    
    <body class="box-container">
       <div class="menu">
          menuz
       </div>
       <div class="head">header
          <div id="logs">
             <img id="logo" src="http://stdiofrenz.altervista.org/image/log.png">
             <img id="button-menu" src="http://stdiofrenz.altervista.org/image/menu.png">
          </div>
       </div>
       <div class="corpo">body</div>
       <div class="foot">footer</div>
    </body>
    
    </html>

  7. #7
    grazie per le risposte ninja72, questa soluzione è funzionante, ma l'avevo già provata prima di sperimentare le grid, di fatto, in questo caso non vengono utilizzate neanche, è un semplice div in posizione assoluta che viene reso visibile dal click.
    Adesso mi sta venendo un dubbio però, se è così semplice fare una cosa coi div piuttosto che css-grid, conviene davvero implementarlo come sistema di layouting?
    Come ho già scritto, sto cercando di barcamenarmi nel fare web 2.0...
    lasciando stare i vari CMS, per uno a cui piace crearli da artigiano, consigliate quindi l'approccio div + positioning del caso?

  8. #8
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    130
    Il discorso è che nel tuo caso il layout è molto semplice/spartano dunquè non ha molto senso utilizzare le potenzialità della griglia css. Sul web recentemente lo consigliano ed è compatibile con la maggior parte dei browser anche quelli mobile, forse è ora di aggiornarsi, parlo per me ovviamente

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 © 2020 vBulletin Solutions, Inc. All rights reserved.