Question

I’m basically trying to create a similar type feel of a mobile webpage to the following image with the same border and margin around the edge of the page:

If you notice how the entire page is surrounded by some kind of margin to the rest of the page and holds it in place. I’m not sure what is controlling it.

I copied this off the interwebz, but this is how a typical jquery mobile page looks right off the bat:

I’m trying to figure out how to add a margin, but what I’ve realized is I have no idea how to change the CSS to control the actual block itself.

In the jquery mobile page I’m working on now, in order for the “header” to appear, it’s shown in code as:

<div data-role="header">

And then for the whole “page” itself, it’s the same except data role and div id is page. Does anyone have experience in jquery mobile to talk about the right way to do this. I would paste the CSS, but I don’t even udnerstand this “data role” concept and what it means, I’m used to “id” and “class” and I have no idea how to control the box itself.

Can anyone guide me in the right direction?

Answer 1

Can you edit that div from within your script? What about

$('div[data-role=header]').addClass('foo');

Then you can apply whatever CSS you like to .foo