Adattare sito a diverse risoluzioni

**giog86** · 05-06-2017, 09:25

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;


}

**KillerWorm** · 05-06-2017, 11:11

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.

**giog86** · 05-06-2017, 11:36

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%?

**giog86** · 05-06-2017, 11:56

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

**giog86** · 05-06-2017, 12:46

Non mi offendo mica. Anzi grazie per la pazienza. Quello che devo cercare per iniziare quindi è tutto ciò che riguarda il responsive design?

**giog86** · 05-06-2017, 17:33

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?

**giog86** · 05-06-2017, 17:45

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?

**KillerWorm** · 05-06-2017, 19:06

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.

Discussione: Adattare sito a diverse risoluzioni

Strumenti discussione

Ricerca discussione

Visualizza

Adattare sito a diverse risoluzioni

Tag per questa discussione

Permessi di invio