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;
}