html - Avoid Items in List to shift -
i trying create dynamic unordered list built 3 list items there maybe either 1 or 2 items in list. problem when there 1 or 2 items in ul contents shifted up. how can avoid ?
html:
<html><head> <title>dashboard</title> </head> <body> <div id="wrapper"> <div id="coldow"> <div id="collef"> <ul id="days"> <div id="colrig"> <ul class="format" id="schedule1"> <li> event 3</li> <li>test space</li> <li>fit everthing , beyond</li> </ul> <ul class="format" id="schedule2"> <li> event 3</li> <li>test space</li> <li>fit everthing , beyond</li> </ul> <ul class="format" id="schedule3"> <li> event 3</li> <li>test space</li> <li>fit everthing , beyond</li> </ul> </div><!-- bottom right time --> </div> </div>
css:
body { padding:0; margin:0; background-color:#000; font-size:100%; } #wrapper { margin-left:auto; margin-right:auto; width:100%; height:100%; max-width:2560px; max-height:1440px; } #coldow { width:55.46%; /* 710/1280 */ float:left; height:88.75%; /* 710/800 */ } #collef { width:35.21%; /* 250/710 */ float:left; height:100%; } #days { list-style-type:none; padding-left:0px; } #days li { font-size:2.25em; color:#fff; font-family:'lato',sans-serif; font-weight:lighter; margin:0 0 168px; background:#575757; display:block; text-align:center; height:40px; margin-top:6px; margin-bottom: 168px; } #colrig { /* background:#fff; */ width:63.09%; float:right; height:100%; } .format { /* background:red; */ margin-top: 46px; padding-bottom: 6px; } .format li { color:#fff; font-family:'lato',sans-serif; font-weight:lighter; font-size:1.5em; /* font-size: 1.846em; */ height: 52px; }
if remove first occurrence of "event3" items shifted up
markup
<div class="event-listing"> <ul> <li> <a>list 1</a> <ul> <li> <a>event 3 </a> </li> <li> <a>test space </a> </li> <li> <a>fit , beyond </a> </li> </ul> </li> <li> <a>list 2</a> <ul> <li> <a>event 3 </a> </li> <li> <a>test space </a> </li> <li> <a>fit , beyond </a> </li> </ul> </li> <li> <a>list 3</a> <ul> <li> <a>event 3 </a> </li> <li> <a>test space </a> </li> <li> <a>fit , beyond </a> </li> </ul> </li> </u> </div>
css
.event-listing ul li { list-style: none; }
this understood menu. let me know if im wrong
Comments
Post a Comment