MATLAB Posted September 8, 2010 Share Posted September 8, 2010 I am trying to display images and a description of the image underneath the image. I am trying to display the images in one line, and have the corresponding description displayed underneath each of the images (as shown in the image below, where i is the image, and d is the corresponding description. Uploaded with ImageShack.us Below is my current code to display the images in one line, but when I try to add the description, the description is added on the same line as the image, instead of underneath the image. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Index</title> <style type="text/css"> #latest_media li { display: inline; list-style-type:none; margin-left:110px; width:4000px; height:400px; background-color:#F00; } </style> </head> <body> <ul id='latest_media'> <li><img src="images/2.PNG" /></li> <li> <img src="images/1.PNG" /></li> </ul> </body> </html> Another problem I am having (not important) but the colour of the <li> item is not the colour which I have specified in the CSS (no colour is displayed!), any idea why? Thanks for any replies Quote Link to comment Share on other sites More sharing options...
Psycho Posted September 8, 2010 Share Posted September 8, 2010 This is not a PHP problem, but an HTML/CSS one. (Moving to CSS forum) I suppose you could make list items work for this, but I don't know why you would want to. They would probably take more style attributes to get what you want. I would suggest that you use DIVs or even tables to display the data in that manner. Here is one possible solution: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Index</title> <style type="text/css"> #latest_media div { text-align: center; margin-left:110px; background-color:#F00; float: left; } </style> </head> <body> <div id='latest_media'> <div><img src="images/2.PNG" /><br />Description</div> <div> <img src="images/1.PNG" /></div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
MATLAB Posted September 8, 2010 Author Share Posted September 8, 2010 That makes sense. I was looking into putting a div in each <li> but it didnt work as planned. Thanks for the reply Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.