javascript - Cross Browser Fill Navigation Menu -


what's best way fill out navigation cross browser. seems every browser has it's different definition of padding when comes navigation, how websites fill out navigation completely, when comes navigation animations?

for example, if have container holding navigation set @ 1000px - how can dynamically fill 1000px while providing space between list items effectively? i've created fiddle express problem. found here.

my code looks this:

<div id="container">         <ul>             <li class="first"><a href="javascript:void(0);">home</a></li>             <li><a href="javascript:void(0);">about us</a></li>             <li><a href="javascript:void(0);">testimonials</a></li>             <li><a href="javascript:void(0);">products</a></li>             <li><a href="javascript:void(0);">blog</a></li>             <li><a href="javascript:void(0);">something</a></li>             <li class="last"><a href="javascript:void(0);">contact</a></li>         </ul>         <div style="clear:both"></div>     </div>

and css this:

*                       {margin: 0; padding: 0; border: 0;} #container              {margin: 0 auto; width: 1000px; background-color: #eee;} #container ul           {position: relative;} #container li           {float: left; list-style: none;} #container li         {display: block; padding: 10px 44px; color: #000; border-left: 1px solid #000; border-right: 1px solid #000; text-decoration: none;} #container li.first   {border-left: 0;} #container li.last    {border-right: 0;}

so i'm using padding, looks different chrome firefox or firefox ie how make universal?

you can use dispaly:table-cell' buttons in navigation menu. set table-layout:fixed;.

here quick example: fiddle demo

#container {      width:800px; } #container ul {     display:table;     width:100%;     table-layout:fixed;     border-collapse:collapse; } #container ul li {     display:table-cell;     border:1px solid black;     padding:10px; }

browser compatibility:

its supported (i think enough) take look: caniuse.com/css-table

important notes

  1. that's (css display table rules) css2 - supported.
  2. the table-layout property sets table layout algorithm used table.

  3. you can set rows setting display too: display:table-row , many more:

    available css2 table model:

    • table { display: table }
    • tr { display: table-row }
    • thead { display: table-header-group }
    • tbody { display: table-row-group }
    • tfoot { display: table-footer-group }
    • col { display: table-column }
    • colgroup { display: table-column-group }
    • td, th { display: table-cell }
    • caption { display: table-caption }

  4. more information: w3c - css table model


Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more