html - a width and height 100% and text still at the bottom right - possible? -


i'm creating tiled nav , need fill tile, text still located @ bottom right position. however, when make width:100% , height:100% (in relation li), text jumps top left of area. know why happens, think understand whole idea, don't know how force jump bottom right while still filling tile.

here's code:

    #menu { width: 900px; float: right; display: block; margin:0; padding:0; }   #menu ul{ list-style:none; display: block; margin:0; padding:0; }  #menu ul li{ display:inline-block; width: 146.5px; height: 146.5px; background-color: #1ba1e2; position: relative; }  #menu ul li a{ text-decoration: none; color: #fff; display: block; padding-right:5px; padding-top:5px; width: 100%; height: 100%; 

and html:

      <div id="menu">            <ul>                 <li><a href="#">pies</a></li>                 <li><a href="#">kot</a></li>                 <li><a href="#">czołg</a></li>                 <li><a href="#">ryba</a></li>                 <li><a href="#">yea</a></li>                 <li><a href="#">umc</a></li>             </ul>       </div> 

make li display: table-cell instead of inline-block; , use vertical-align: bottom

demo

#menu ul li {     width: 146.5px;     height: 146.5px;     background-color: #1ba1e2;     position: relative;     vertical-align: bottom;     display:table-cell;     text-align: right;     border: 1px solid #000; } 

note: css lil messy clean bit


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -