Geek Answers Handbook

Can CSS handle this hourglass-like situation?

I find it difficult to find a solution to the following problem.
Let me illustrate it first

Navigation Interface - Hourglass like

Situation
I have 26 elements (in this example, in general, the number is unknown ..), but only 12 can be seen at a time. I also have some navigation items (green fields)

The width of the purple and green boxes is fixed, but the height of the purple color may vary depending on the contents.

Everything is fine and I can do it with css.

I am using an unordered list (of floating elements) for my elements, and I have assigned the first two <li> elements as navigational ones. First float left and left. All this works, and the flow of the remaining items goes between two green ones.

Problem
But now I need green elements that will be in the second line (or, if the last concept helps, since there will only be two lines)

I want to be able to hide the first X-elements and show the next X, and they fall into position independently.

To rephrase the question, can I put some elements (green) in such a way as to control their position, but still allow them to interfere with the flow from their new locations?

Hope this is clear. If you don’t ask, I will provide as much information as possible.

Things I tried that didn't work

  • Move a green element with negative lower margins or positive upper margins. They will leave, but other elements will not fill their position.
  • Using absolute position, but then the elements are completely removed from the stream, and they do not affect other elements, so they overlap with other elements.

[they are hidden, the elements are hidden, I just show them so you know that they exist ..]

Invalid code to run

 <style type="text/css"> ul,li{padding:0;margin:0; list-style-type:none;} ul{ width:155px; position:relative; height:125px; border:1px solid red; } li{ float:left; background-color:purple; margin-left:5px; margin-top:5px; width:25px; text-align:center; line-height:25px; color:white; } .prev{ color:black; background-color:green; } .next{ color:black; float:right; margin-right:5px; background-color:green; } </style>

and

 <body> <ul> <li class="prev">&lt;</li> <li class="next">&gt;</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> </ul> </body>
+4
source share
4 answers

OK, obviously this cannot be solved only with Css / Html ..

So, to solve this problem, I used some CSS (with a built-in crossbrowser block) and some jQuery to move the navigation buttons around they always remain at the point where I want them.

For reference, here is the solution ..

CSS

 <style type="text/css"> ul,li{padding:0;margin:0; list-style-type:none;} #performances{ width:155px; border:1px solid red; line-height:0; font-size:0; } #performances li{ font-size:12px; background-color:purple; margin-left:5px; margin-bottom:5px; margin-top:5px; width:25px; text-align:center; line-height:25px; color:white; display:none; vertical-align:top; } #performances .prev{ color:black; background-color:green; display: -moz-inline-stack; display:inline-block; } #performances .next{ color:black; background-color:green; display: -moz-inline-stack; display:inline-block; } #performances .shown{ display: -moz-inline-stack; display:inline-block; } #performances .placeholder{visibility:hidden;} </style> <!--[if lte IE 7]><style> #performances .prev,#performances .next,#performances .shown{zoom:1;*display:inline;} </style><![endif]-->

Javascript (jQuery)

 <script type="text/javascript"> function resetNextPrev( ){ $next.insertAfter('#performances li.shown:eq('+ ($perpage-1) +')'); $prev.insertAfter('#performances li.shown:eq('+ ($perline-1) +')'); } $(document).ready(function(){ $perpage = 8; $perline = ($perpage+2) / 2; $page = 1; $itemcount = $('#performances li.performance').length; $pages = Math.ceil ( $itemcount / $perpage); $next = $('#performances li.next'); $prev = $('#performances li.prev'); $('#performances li.performance').slice(0,$perpage).addClass('shown'); if (($pages * $perpage) > $itemcount ) for (var i =0;i< ($pages * $perpage)-$itemcount;i++) $('<li class="performance placeholder">test</li>').appendTo('#performances'); resetNextPrev(); $('li.next').click(function(){ if ($page < $pages) $('#performances li.performance').filter('.shown').removeClass('shown').end().slice($perpage * (++$page-1),$perpage * $page).addClass('shown'); resetNextPrev( $perline ); }); $('li.prev').click(function(){ if ($page > 1) $('#performances li.performance').filter('.shown').removeClass('shown').end().slice($perpage * (--$page-1),$perpage * $page).addClass('shown'); resetNextPrev( $perline ); }); }); </script>

.. and HTML

  <ul id="performances"> <li class="prev">&lt;</li> <li class="next">&gt;</li> <li class="performance">1</li> <li class="performance">2</li> <li class="performance">3</li> <li class="performance">4 dfs s sf</li> <li class="performance">5</li> <li class="performance">6</li> <li class="performance">7</li> <li class="performance">8</li> <li class="performance">9</li> <li class="performance">10</li> <li class="performance">11</li> <li class="performance">12</li> <li class="performance">13</li> <li class="performance">14</li> <li class="performance">15</li> <li class="performance">16</li> <li class="performance">17</li> <li class="performance">18</li> <li class="performance">19</li> </ul>

There are a couple of hard-coded values ​​inside, but I will leave this for everyone who could learn something new from this ...

Thanks to everyone for the guide :)

Working example (for those who want to see it in action): http://www.jsfiddle.net/gaby/Ba3UT/

+4
source

It might be worth using javascript for this difficult situation. Libraries like jQuery can make it pretty painless. Defining these wrapper rules explicitly in js will be more understandable and easier to maintain than doing this implicitly with a lot of css rules.

+4
source

Make li , except for navigation ones, like display: inline-block and maybe move li navigation to the end of the list?

+2
source

Without looking at the code, I cannot be sure. However, you tried to put green elements in tags and marked them as clear: both ;? However, this may lead them to the third line. This is what you should check.

+1
source

More articles:


All Articles