Jump to content

Problem displaying data


MATLAB

Recommended Posts

 

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.

 

79127132.png

 

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

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>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.