Tabs for part of screen with Google Maps in the background


#1

Ok. I am currently using tabs on the bottom part of my screen for navigation. I have them set up with a margin from the top of 30% so that I can see index.html in the background.

This is my style.css

.margin{
    margin-top: 30%;
    border-top: dotted;
}

This is one of my tabs

<ion-content class="margin">
    <p>This is the Friends page</p>
</ion-content>

This is my index.html which I want to appear in the background.

 </head>
  <body ng-app="starter">

  <div id="map-canvas"></div>

  <ion-content></ion-content>

    <ion-nav-view></ion-nav-view>
  </body>
</html>

This is my app.js

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })
      .state('index', {
          url: '/',
          templateUrl: 'home.html'
      })
      .state('tab.dash', {
        url: '/dash',
        views: {
          'tab-dash': {
            templateUrl: 'templates/tab-dash.html',
            controller: 'DashCtrl'
          }
        }
      })
      .state('tab.friends', {
      url: '/friends',
      views: {
        'tab-friends': {
          templateUrl: 'templates/tab-friends.html',
          controller: 'FriendsCtrl'
        }
      }
    })
      .state('tab.profile', {
      url: '/profile',
      views: {
        'tab-profile': {
          templateUrl: 'templates/tab-profile.html',
          controller: 'ProfileCtrl'
        }
      }
    })
      .state('tab.search', {
          url: '/search',
          views: {
              'tab-search': {
                  templateUrl: 'templates/tab-search.html',
                  controller: 'SearchCtrl'
              }
          }
      })
      .state('tab.trucks', {
    url: '/trucks',
    views: {
      'tab-trucks': {
        templateUrl: 'templates/tab-trucks.html',
        controller: 'TrucksCtrl'
      }
    }
  });

  $urlRouterProvider.otherwise('/tab/dash');
});

Am I going about this the right way with my index.html set to display the map?

Thanks!