Thursday 19 December 2013

3by3 grid view in skill street JQURY MOBILE

html page:
=======
3x3 grid view in RWD:
------------------------
<link rel="stylesheet" href="homepage.css" />

</head>

<body>


<div data-role="page" data-theme="g">
<img src="images/logo.png" width="100%" height="70px"></img>

<div data-role="content" class="ui-content ui-body-d" role="main">

    <div class="home-button"><a data-saf="places" href="pviewdoctors.html" rel="external" class="ui-link"><div class="icon update"></div><div class="title">View Doctors</div></a></div>
 
    <div class="home-button"><a data-saf="collections" href="pprofile.html" rel="external" class="ui-link"><div class="icon profile"></div><div class="title">Profile</div></a></div>
 
    <div class="home-button"><a href="pappoinment.html" rel="external" class="ui-link"><div class="icon asset"></div><div class="title">Appointment Request</div></a></div>
 
    <div class="home-button"><a data-saf="magazine" href="plabrecords.html"  rel="external" class="ui-link"><div class="icon requirement"></div><div class="title">Lab Records</div></a></div>
 
    <div class="home-button"><a data-saf="news" href="pmedication.html" rel="external" rel="external" class="ui-link"><div class="icon news"></div><div class="title">Current Medication</div></a></div>
 
    <div class="home-button disabled"><a href="pmedication.html" rel="external" class="ui-link"><div class="icon events"></div><div class="title">Patient History</div></a></div>
 
    <div class="home-button"><a data-saf="favorites" href="pbilltrack.html" rel="external"  class="ui-link"><div class="icon market"></div><div class="title">Bill Tracking</div></a></div>
 
    <div class="home-button"><a href="features.html" rel="external"class="ui-link"><div class="icon contact"></div><div class="title">Emergency</div></a></div>
 
    <div class="home-button"><a href="#" class="ui-link"><div class="icon about"></div><div class="title">Diet & Food</div></a></div>
 



  </div>
  </div>
</body>

homepage.css:
-------------

@charset "utf-8";
.home-button {
    display: inline-block;
    height: 100px;
    margin: 0;
    padding: 20px 0 0;
    text-align: center;
    vertical-align: top;
    width: 32%;
}/* CSS Document */

.home-button .title, .category-button .title {
    color: #333333;
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    overflow: hidden;
    padding-top: 0;
    text-shadow: 1px 1px 0 #EFEFEF;
    width: 98%;
}
.ui-body-d .ui-link {
    color: #2489CE;
    font-weight: bold;
}
a {
    text-decoration: none;
}
.ui-content {
    border-width: 0;
    overflow-x: hidden;
    overflow-y: visible;
    padding: 15px;
}

.home-button .favorites {
    background-position: 0 -192px;
}
.home-button .icon  {
    background: url("logo.jpg") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 64px;
    position: relative;
    width: 64px;
}
.home-button .news  {
    background: url("images/dash4.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 64px;
    position: relative;
    width: 64px;
}
.home-button .profile  {
    background: url("images/patienticon.jpg") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 64px;
    position: relative;
    width: 64px;
}
.home-button .events  {
    background: url("images/events6.jpg") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 64px;
    position: relative;
    width: 64px;
}
.home-button .update  {
    background: url("images/updates.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 64px;
    position: relative;
    width: 64px;
}
.home-button .asset  {
    background: url("images/asset.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 64px;
    position: relative;
    width: 64px;
}
.home-button .requirement  {
    background: url("images/req5.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 64px;
    position: relative;
    width: 64px;
}
.home-button .market  {
    background: url("images/market1.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 64px;
    position: relative;
    width: 64px;
}
.home-button .contact  {
    background: url("images/contactus.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 64px;
    position: relative;
    width: 64px;
}
.home-button .about  {
    background: url("images/aboutus.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 64px;
    position: relative;
    width: 64px;
}
.ui-body-d .ui-content {
    background: green;
    padding: 10px;
}
at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)