Having trouble creating my index view page (DXTREME) icons and images are out of sinc

[360degrees]

Hello Fellas!!
I'm building and learning at the same time on a cross platform multichannel app with HTML5 along with DXTREME and my VS 2012 IDE. the problem I'm having is that my background ("content" place holder) disappears when I try to create my view page. my model is correct, my view-model is correct also but my view page is all outta wack and this is what I'm seeing.
1) As I previously mentioned my content background totally disappears when I put in my div tags with the data-bind commands. in my content view it just says "NO RESULTS". my Task bar looks good along with my header in the index view simulator looks good also.

2) I went ahead and debugged the app and I get even weirder results. My image and the text that is bounded to it are out of sinc, the image is supposed to rest at the left of the screen with the text displayed to the right of it, instead they're on top of each other and the image repeats at the bottom of the first image and text.

3)Another problem is the icons on my navigation bar are now stacked on top of each other in the bottom center of the screen (or I should say they're all stacked on top of each other in the middle of the navigation bar which is basically my footer)

I've attached a print screen view of what I just previously mentioned so any of you can get an idea of what I'm going through here and I hope it helps. I have dual screens so the image is rather wide but on the left side is the index view I'm getting in DXTREME and then on the right is what I'm seeing in my browser. also I'll lock in a little of my app config.js code and some other things

I'll admit I'm a little hairy with HTML compared to other other programing languages because I've never had a reason to learn it until now but believe me I'm a pretty fast learner when it comes to stuff like this But I'd appreciate any help pointers or advice you all have to offer. Lastly can anybody tell me where the best resources are as far as learning the whole cross platform concept (you know like JavaScript HTML and CSS3 All in one (HTML5)) I'm learning on the fly here and I want to learn it all in like a package rather then having to individually waste time on one subject alone.

Thanks for listening!!!




oh yeah I inserted my js code for the NavBar that's acting up
let me now if I need to provide more examples of my code.
my print screen attachment is to big for my to upload so I posted my index view codw (it's in HTML)

<div data-dx-role="view" data-dx-name="Index" data-dx-title="Welcome to Game Butler">
    <div data-dx-target-placeholder="content">
        <div data-bind="dxList: { dataSource: gameItems }">
            <div data-dx-role="template" data-dx-name="item" data-bind="dxAction: '#ConParaMenu/{id}'">
                <img width="60" height="60" class="icon" src="Content/images/diningBl.png">
                <div data-bind="text: title1"></div>
            </div>
        </div>
    </div>
</div>
 
 

this is my "NavBar" layout javaScript code

window.gameButlerApp1 = $.extend(true, 
                            window.gameButlerApp1, 
                            {
  "config": {
    "defaultLayout": "navbar",
    "navigation": [
      {
        "title": "Home",
        "action": "#Index",
        "icon": "home"
      },
      {
        "title": "Main Menu",
        "action": "#Menu",
        "icon": "menu"
      },
      {
        "title": "Cart",
        "action": "#Cart",
        "icon": "cart"
      },
      {
        "title": "Status",
        "action": "#Status",
        "icon": "find"
      }
 
    ]
  }
});