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):
Questo invece è il foglio di stile: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>
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; }
Rispondi quotando
