Visualizzazione dei risultati da 1 a 8 su 8
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2017
    Messaggi
    8

    Adattare sito a diverse risoluzioni

    Buongiorno,
    vorrei capire come mai se visualizzo il sito nel mio pc (schermo 15 pollici ) si vede benissimo, se poi però lo apro con uno schermo da 20 pollici si sfalsa tutto. Il bottone menu non rimane al suo posto ma si centra, il div ( #div_table) si espande non lasciando alcun margine a destra ( cosa che invece ho impostato ) ma a sinistra sì. Ho provato ad impostare le misure e le posizioni in percentuale ma non cambia nulla. Inoltre quando apro il menu a scomparsa cliccando sul bottone il menu che si sta aprendo fa uno sfarfallio e crea momentaneamente una scroll bar verticale ed orizzontale che poi scompare quando il menu si è aperto. Avete qualche suggerimento?

    Questo è il codice html (body):

    codice:
    
    <body>
    <div class="fader"></div>
    
    
    <button id="bottone">MENU</button>
    
    
    
    
    <ul id="ul_nav" style="height:80%">
        <button id="bottone_ul">X</button>
        <li id="li_nav"><a href="">HOME</a>
        <li id="li_nav"><a href="" >...</a>
        <li id="li_nav"><a href="" >...</a>
        <li id="li_nav"><a href="" >...</a>
        <li id="li_nav"><a href="" >...</a>
        <li id="li_nav"><a href="" >PHOTOGALLERY</a>
        <li id="li_nav"><a href="" >CONTATTI</a>
        <li id="li_nav"><a href="https://www.facebook.com/profile.php?id=100010242035070"><img src="images/fb.jpg" style="align: center; height:30px; width:30px"></a></li>
    </ul>
    
    
    <div id="div_table" style="height: 850px">
    
    
    
    
    
    
    </div>
    
    
    
    
    
    
    
    
    </body>
    
    Questo invece è il foglio di stile:

    codice:
    html,body{
        height: 100%;
        width: 100%;
    }
    
    .fader
    {
        top: 0%;
        bottom: 0%;
        left: 0%;
        right: 0%;
        height: 98.7%;
        width: 99.3%;
        border: 5px solid black;
        background-size: cover;
        position: fixed;
        background-repeat: no-repeat;
    }
    
    
    
    #bottone
    {
        position: absolute;
        top: 0.7%;
        left: 96%;
        padding-left: 2.5px;
        height: 50px;
        width: 50px;
        background-color: black;
        outline: none;
        cursor: pointer;
        color: white;
        font-weight: bold;
    
        outline-style:none;
    }
    
    
    a:link
    {
        color: white;
    }
    
    a:visited
    {
        color: white;
    }
    
    #ul_nav
    {
        position: absolute;
        top: -2.5%;
        right: 0.4%;
        height: 555px;
        list-style: none;
        font-weight: bold;
        color: white;
        background-color: black;
        opacity: 0.9;
        padding-top: 90px;
        padding-right: 50px;
        display: none;
        z-index: 1;
    }
    
    #li_nav
    {
        text-align: center;
        line-height: 60px;
    }
    
    #bottone_ul
    {
        position: absolute;
        top: 5px;
        right:210px;
        height: 30px;
        font-size: 30px;
        background-color: transparent;
        border: none;
        cursor: pointer;
        color: white;
    }
    
    #div_table
    {
        position: absolute;
        top: 40%;
        left: 30% ;
        right:30%;
        height: 750px;
        width: 30%;
        border: 5px solid olive;
        background-color: white;
        padding-left: 150px;
        padding-top: 40px;
        padding-bottom: 40px;
    
    
    }
    Ultima modifica di giog86; 05-06-2017 a 09:28

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Avete qualche suggerimento?
    Ciao, noto alcuni errori strutturali nel codice HTML, che lo rendono non valido (come ti ha fatto notare anche _Marco_87). Per tale motivo ogni browser cerca di "interpretare", come può, il codice. Questo significa che avrai comunque una renderizzazione instabile della pagina, a prescindere dalle impostazioni CSS e da tutto il resto.

    Suggerisco di validare il codice prima di qualsiasi altra cosa. Puoi utilizzare un validatore online, ad esempio questo.

    Gli errori principali da correggere sono questi:
    - id duplicati. Ogni id deve essere univoco all'interno di uno stesso documento HTML.
    - elemento <button> figlio di <ul>. Un elemento <ul> dovrebbe contenere esclusivamente elementi <li> come figli diretti.
    - gli elementi <li> sarebbe meglio chiuderli tutti per una questione di leggibilità del codice, anche se alcune versioni di HTML ti consentono di omettere la chiusura.

    Una volta validato il codice possiamo parlare di CSS.

    Tra i link utili CSS, sotto la voce Validatori, al capitolo 5, puoi trovare altri validatori.
    Ultima modifica di KillerWorm; 05-06-2017 a 11:16
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2017
    Messaggi
    8
    id duplicati in che senso? In realta quel bottone_ul è la x da cliccare per chiudere il menu a cascata. Sarebbe opportuno creare un div contenitore che contenga tutti i contenuti della pagina impostando height e width a 100%?

  4. #4
    Utente di HTML.it
    Registrato dal
    May 2017
    Messaggi
    8
    si si certo la sto riscrivendo da capo. Quindi se ho il body che contiene tutti gli elementi posso assegnare a questi ultimi una posizione relativa ed usando le percentuali per posizionarli giusto? in questo modo si la pagina si adatterebbe a diverse risoluzioni? Leggendo altri post anche su altri siti ho capito questo anche se comunque tanti dicono cose diverse sul web

  5. #5
    Utente di HTML.it
    Registrato dal
    May 2017
    Messaggi
    8
    Non mi offendo mica. Anzi grazie per la pazienza. Quello che devo cercare per iniziare quindi è tutto ciò che riguarda il responsive design?

  6. #6
    Utente di HTML.it
    Registrato dal
    May 2017
    Messaggi
    8
    Ciao, di nuovo��...
    Ho dato un occhiata agli articoli da voi suggeritimi sopra e anche a questo[URL="http://html.it/articoli/il-posizionamento-con-i-css-2"]. Da quest' ultimo ho letto che giocando con i posizionamenti assoluti e relativi si può creare uno scheletro HTML che si adatti alle diverse risoluzione. Può essere una soluzione accettabile?

  7. #7
    Utente di HTML.it
    Registrato dal
    May 2017
    Messaggi
    8
    Ciao, di nuovoðŸ˜...
    Ho dato un occhiata agli articoli da voi suggeritimi sopra e anche a questo[URL="http://html.it/articoli/il-posizionamento-con-i-css-2"]. Da quest' ultimo ho letto che giocando con i posizionamenti assoluti e relativi si pu� creare uno scheletro HTML che si adatti alle diverse risoluzione. Pu� essere una soluzione accettabile?

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Da quest' ultimo ho letto che giocando con i posizionamenti assoluti e relativi si può creare uno scheletro HTML che si adatti alle diverse risoluzione. Può essere una soluzione accettabile?
    Dipende esattamente da ciò che vuoi ottenere.
    Devi comunque tener conto di diversi aspetti: quella guida ha più di 10 anni e di responsive design ancora non se ne parlava. Ad ogni modo è buono apprendere delle nozioni fondamentali come il posizionamento CSS che ti aiuta a capire alcuni meccanismi riguardo la realizzazione di un layout. Questo però non basta per affrontare il discorso responsive. Dovrai in tal caso consultare qualche altra guida a riguardo, come l'uso di media queries, l'impostazione di breakpoints, ecc. _Marco_87 te ne ha linkata una, io posso suggerirti di dare uno sguardo sempre tra i link utili CSS, dove al capitolo 2 trovi altri riferimenti riguardo il posizionamento e altre nozioni fondamentali, mentre al 3 trovi vari link sul responsive desing.


    [Mod]

    Dal momento che ti mancano delle basi ti consiglierei di affrontare un passo alla volta e ti invito a chiedere eventuale aiuto sul forum, là dove incontri difficoltà, aprendo singole discussioni per i vari specifici casi; tenendo presente che la richiesta che hai posto qui riguarda diverse problematiche ed è inopportuno e difficile trattarle tutte in una sola discussione, sebbene il tutto possa riguardare in generale il discorso responsive.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Tag per questa discussione

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