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

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -

php - Accessing static methods using newly created $obj or using class Name -