jQTouch detail style

I’m working on a mobile application for the iPhone and I am using jQTouch to make the UI look like an iPhone app. jQTouch seriously helps you to quickly create a nice looking UI  but sometimes you need to write your own css to create the layout you want.

I needed a detail page with data shown like the contact details do on the iPhone. Since none of the jQTouch themes had some class that I could use, I sat down and finally came up with this little piece of css:

	ul li.detail {
	clear: both;
	overflow: hidden;
	}
	ul li.detail div {
	color: #324F85;
	width: 38%;
	float: left;
	text-align:right;
	font: 13px Helvetica;
	}
	ul li.detail div + div {
	color: #666;
	width: 59%;
	float: right;
	text-align: left;
	font: bold 14px Helvetica;
	}

view raw jQTouch.detail.css hosted with ❤ by GitHub

Now all you need to do is apply the detail class to your li element and place the name and the value inside two divs like so

	<ul class="rounded">
	<li class="detail">
	<div>First name</div><div>John</div>
	</li>
	<li class="detail">
	<div>Last name</div><div>Doe</div>
	</li>
	<li class="detail">
	<div>Mobile phone</div><div>123-4567890</div>
	</li>
	<li class="detail arrow">
	<div>Address</div>
	<div>
	<p>Longstreet 123</p>
	<p>ABC City</p>
	<p>Utopia</p>
	</div>
	</li>
	</ul>

view raw DetailExampleUsage.html hosted with ❤ by GitHub

And the result will look like

Technorati Tags: jQTouch