CODEWITHSUNDEEP
jqueryhtmljquery-mobilehtml-lists
Ravi Gupta
Ravi Gupta

Reputation: 4574

Issue with HTML li tag in jquery mobile


I am trying to display an image and some text on the same line, both the image and text are clickable and point to some link. I am using jquery.mobile-1.0a4.1.
However below code shows the Stuff1 and Description being overlapped by Image, so the image is in front and text in background. I wish to have Image and text side by side, what could be the problem in my below code ?

   <li> 
<img src="images/someImage.png" /> 
<h3><a href="#someID" >Stuff1</a></h3> 
<p>Some Description</p> 
<a href="#someID" >Stuff2</a> 
</li>

Upvotes: 0

Views: 1180

Answers (2)

Groovetrain
Groovetrain

Reputation: 3325

In the example on the jQuery.mobile site, you have to wrap the whole of the inner html of the li in your link, like so:

<li> 
  <a href="#someID">
    <img src="images/someImage.png" /> 
    <h3>Stuff1</h3> 
    <p>Some Description</p>
  </a>
</li>

However, it looks like you may be trying to have two different links in one li tag. In mobile application, this really isn't feasible (but I could be wrong about what you're tring to do)

Reference: http://jquerymobile.com/demos/1.0a4.1/docs/lists/lists-thumbnails.html

Upvotes: 2

Naveed Ahmad
Naveed Ahmad

Reputation: 3175

set float to everything. Also if possible insert everything apart from the image inside a div and then set the img and the div to float: left. Like:

<li> 
 <img src="images/someImage.png" /> 
 <div>
  <h3><a href="#someID" >Stuff1</a></h3> 
  <p>Some Description</p> 
  <a href="#someID" >Stuff2</a> 
  </div>
</li>

and the CSS:

li img{float:left;}
li div{float:left;}

Upvotes: 0

Related Questions