CODEWITHSUNDEEP
javascripthtmlcsscordova
Om3ga
Om3ga

Reputation: 32823

tabs using css html in phonegap

I am making tabs using css and html for mobile devices. My current code show some weird behavior. My current code shows the tabs which is shown in image below. You ca see that tabs are all misplaced and the icon inside these tabs are slightly on the right side but I want this to be in the center of the tab. I can move that icons towards left to make it appear in the center in photoshop but again if I test this app on larger screen mobile devices then this icon will appear on the left side. I want them to be always in the center. So please tell me how can I make this more better tabs as normal mobile apps have?

here is mu html code

<footer>
    <ul>
        <li class="tabs"><a href="#"></a></li>
        <li class="tabs"><a href="#"></a></li>
        <li class="tabs"><a href="#"></a></li>
    </ul>
</footer>

here is my css

footer {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding: 0;
  background: #535353; 
}
footer ul {
   list-style-type: none;
   margin: 0;
   padding: 0; 
}
footer ul li {
  display: inline-block;
  width: 31%;
  height: 50px; 
}
footer ul li a {
  display: block;
  text-decoration: none;
  height: 100%;
  width: 100%;
  background: #fff;
  background: url(../../../img/tabs.png) top left no-repeat; 
}

here is the image:

image

Update

Here is my new css

footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
padding: 0;
background: #ccc; }
footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center; }
  footer ul li {
    display: block;
    float: left;
    width: 33.33%;
    line-height: 50px;
    text-align: center;
    overflow: hidden; }
    footer ul li a {
      display: block;
      text-decoration: none;
      margin: 1px;
      height: 100%;
      width: 100%;
      background: url(../../../img/tabs.png) center no-repeat;
      /*
      &.home {
        background: url(../../../img/tabs.png) top left no-repeat;
      }
      &.profile {
        background: url(../../../img/tabs.png) top left no-repeat;
      }
      &.cam {
        background: url(../../../img/tabs.png) top left no-repeat;
      }*/ }
      footer ul li a.current {
        margin-top: 5%;
        height: 80%;
        width: 80%;
        background-color: #ccc;
        text-indent: -9999px;
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 50px #666;
        -moz-box-shadow: inset 0 0 50px #666;
        box-shadow: inset 0 0 50px #666; }

Upvotes: 0

Views: 1232

Answers (1)

Raffaele
Raffaele

Reputation: 20875

Here is a demo fiddle. What I did

  • text-align: center to the ul, so this is inherited and everything is centered
  • line-height set the same as width, so everything is vertically centered
  • list elements are display:block, width: 33.33% and float:left - Also I added overflow:hidden
  • a elements have width: 100% and margin: 1px

You can now play with it, by adding images and/or real text.

Upvotes: 1

Related Questions