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

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -