html - Scrambled menu when resizing -
when browser page full size, menu centered in middle page (that's correct position) when resizing window, menu isn't visible anymore except scrolling max right of site. looked responsiveness problem, failed solve it. ideas??
html:
<div id="menu" class="menu"> <ul class="headlines"> <li id="item1"onclick="checklist(this)"><button onclick="myfunction()">aa</button></li> <li id="item2"><button onclick="myfunction2()">a </button></li> <li id="item3">b </li> <li id="item4">c </li> <li id="item5">d </li> <li id="item6">e </li> <li id="item7">f </li> </ul> </div>
css:
lu, li{ list-style-type: none; font-size: 1.5em; height: 40px; width: 150px; text-align: right; border-style: none; } .menu{ width:150px; height: 350px; } .menu li{ position: relative; top:150px; bottom: 0; left: 725px; right: 0; margin: auto; border-style:none; }
add margin:0 auto;
in .menu
remove left: 725px;
.menu li
see fiddle: https://jsfiddle.net/sachinkk/61caplqy/
lu, li{ list-style-type: none; font-size: 1.5em; height: 40px; width: 150px; text-align: right; border-style: none; } .menu{ width:150px; height: 350px; margin:0 auto; } .menu li{ position: relative; top:150px; bottom: 0; right: 0; margin: auto; border-style:none; }
<div id="menu" class="menu"> <ul class="headlines"> <li id="item1"onclick="checklist(this)"><button onclick="myfunction()">aa</button></li> <li id="item2"><button onclick="myfunction2()">a </button></li> <li id="item3">b </li> <li id="item4">c </li> <li id="item5">d </li> <li id="item6">e </li> <li id="item7">f </li> </ul> </div>
Comments
Post a Comment