2

I have developed book index store in which I'mm storing books, index and tags.

I have done everything data display query and other basic functionality now I want to create CSS structure that behave like original page index.

I m attaching one snapshot for reference.

enter image description here

Do you guys have any idea that how to create such data display using HTML5 and CSS.

Edit

Below is the HTML i have tried but don't know how to add css for that.

<div class="row-fluid">
<div class="span2 well">

</div>
<div class="span5 well">
<div>
<div class="span12 text-center"> - A - </div>
<div class="offset1">
<h4>Adding</h4>
</div>
<div class="span12 pull-left">Tyler Cherry</div><div class="offset2"> 42 (This is the third index i have added to see if its working.)</div><div class="clearfix"></div><div class="span12 pull-left">Caldwell Atkinson</div><div class="offset2"> 42 (This is the third index i have added to see if its working.)</div><div class="clearfix"></div>
<div class="offset1">
<h4>Apples</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 12 (health is wealth), 25 (second indexes edited)</div><div class="clearfix"></div><div class="span12 pull-left">ABC</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">Baker Watts</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div> <div class="span12 text-center"> - E - </div>
<div class="offset1">
<h4>Eight</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 25 (second indexes edited)</div><div class="clearfix"></div> <div class="span12 text-center"> - F - </div>
<div class="offset1">
<h4>Farming</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 12 (health is wealth), 25 (second indexes edited)</div><div class="clearfix"></div><div class="span12 pull-left">ABC</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">Baker Watts</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div> <div class="span12 text-center"> - H - </div>
<div class="offset1">
<h4>Happy Coding</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">ABC</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">Baker Watts</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div>
<div class="offset1">
<h4>Health</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">ABC</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">Baker Watts</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">Tyler Cherry</div><div class="offset2"> 42 (This is the third index i have added to see if its working.)</div><div class="clearfix"></div><div class="span12 pull-left">Caldwell Atkinson</div><div class="offset2"> 42 (This is the third index i have added to see if its working.)</div><div class="clearfix"></div> <div class="span12 text-center"> - L - </div>
<div class="offset1">
<h4>Law Of Attraction</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 12 (health is wealth), 25 (second indexes edited)</div><div class="clearfix"></div><div class="span12 pull-left">ABC</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">Baker Watts</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div> <div class="span12 text-center"> - P - </div>
<div class="offset1">
<h4>Passion</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 12 (health is wealth), 25 (second indexes edited)</div><div class="clearfix"></div><div class="span12 pull-left">ABC</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div><div class="span12 pull-left">Baker Watts</div><div class="offset2"> 12 (health is wealth)</div><div class="clearfix"></div> <div class="span12 text-center"> - S - </div>
<div class="offset1">
<h4>Seven</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 25 (second indexes edited)</div><div class="clearfix"></div>
<div class="offset1">
<h4>Success</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 25 (second indexes edited)</div><div class="clearfix"></div> <div class="span12 text-center"> - U - </div>
<div class="offset1">
<h4>User</h4>
</div>
<div class="span12 pull-left">Asher Hooper</div><div class="offset2"> 25 (second indexes edited)</div><div class="clearfix"></div> </div>
</div>
<div class="span5 well">

</div>
</div>
George
  • 36,413
  • 9
  • 66
  • 103
Devang Rathod
  • 6,650
  • 2
  • 23
  • 32
  • Don't you think simple `ul` and `li` will accomplish this? – Mr. Alien Jun 24 '13 at 09:25
  • There are multiple ways to pull this off, but Stack Overflow asks that you try everything yourself first. – George Jun 24 '13 at 09:25
  • Well, not everything, but definitely something, along with a description of what you've tried. @OP: it's unclear whether you already have the index data or whether you're already displaying it like you want. Either way, play ol' nested ul/ol/li should fit the bill. If you already have that, you should post a sample. – Magnus Jun 24 '13 at 09:28
  • @F4r-20 See now what i have tried. – Devang Rathod Jun 24 '13 at 09:28
  • You really should use nested lists instead of h4+div. As for the CSS, I'm not really sure what you're asking. Are you asking how to select the nodes you have in CSS, or how to add CSS at all or are you asking us to write the stylesheet for you? – Magnus Jun 24 '13 at 09:29
  • @Magnus , can you demonstrate example for that ? – Devang Rathod Jun 24 '13 at 09:30
  • 2
    There's plenty of examples for that, e.g. [Proper way to make HTML nested list?](http://stackoverflow.com/q/5899337) Put (very) simply, nested `
      ` elements, with `padding-left` adjusting the spaces should work. Having multiple columns may prove a challenge, though, depending on what browsers you need to support
     – Pekka Jun 24 '13 at 09:31
  • @DevangRathod basically it's `
    • Passion
      • Asher Hooper
    ` - etc. The default browser stylesheet shouldn't be too bad for that, you can go from there.     – Magnus Jun 24 '13 at 09:32
  • Mark it up using an un-ordered list : http://dev.opera.com/articles/view/16-html-lists/ – Nick R Jun 24 '13 at 10:04

1 Answers1

3

what about using definition list ? http://codepen.io/gcyrillus/pen/lAmkb 

<h1>Index</h1>
<section>
  <h2>A</h2> 
<dl>
  <dt>accordion,layouts</dt>
  <dd><a href="">about 128</a></dd>
  <dd><a href="">movie form,adding 13</a>1</dd>
  <dd><a href="">nesting, in tab 128,12</a>9</dd>
  </dt>
  <dl>
    <dt>Adapters, Ext.</dt>
    <dd><a href="">about 18</a</dd>
    <dd><a href="">using 18, 20</a</dd>
  </dl>
<!-- and so on -->

And links, so it turns to be usefull too :) like one does tag clouds .

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129