CODEWITHSUNDEEP
csshtml
Devang Rathod
Devang Rathod

Reputation: 6736

Book index page layout using HTML5 and css

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>

Upvotes: 2

Views: 7492

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105863

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 .

Upvotes: 3

Related Questions