Creating an iPhone-like App for mobile website

dogherder · 07-24-2010, 07:21 PM

Hi all. I'm trying to create a mobile website that has the look and feel of a native iPhone app. Below is a mock-up for what I'm trying to go for:

Originally, I started with ul (unordered list) and changed the styling with css to create those iPhone like buttons, but I couldn't figure out how to embed those pictures/icons in there. Anyone have suggestions on how to do that?

Thanks!

ahayzen · 07-24-2010, 09:17 PM

Hi and Welcome to the Coding Forums

To add the images to a li use the code below.

Code:

<html>
<head>
<style type="text/css">
.x {
list-style-image:url('imageforx.gif');
}
.y {
list-style-image:url('imagefory.gif');
}
.z {
list-style-image:url('imageforz.gif');
}
</style>
</head>
<body>
<ul>
<li class="x">x</li>
<li class="y">y</li>
<li class="z">z</li>
</ul>
</body>
</html>

Andy

dogherder · 07-24-2010, 11:43 PM

Nice! Thanks, Andy. You are awesome.

Apostropartheid · 07-25-2010, 11:20 AM

If you get the iPhone SDK, you will get access to a tool for building iPhone Web apps. Otherwise, there are many frameworks available which are similar (though sometimes not as slick.)