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 Link to comment https://forums.phpfreaks.com/topic/212879-problem-displaying-data/ 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> Link to comment https://forums.phpfreaks.com/topic/212879-problem-displaying-data/#findComment-1108799 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 Link to comment https://forums.phpfreaks.com/topic/212879-problem-displaying-data/#findComment-1108804 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.