Improper display of images with title

HTML & CSS
1

Hello All,
Below is my code which takes the data out from database and displays it on a page.
Currently my output is like: .
i want it to change to something like where instead of displaying title after image, it should come below it.

<?php
$result="";$picture="";
$sql="Select * FROM blog WHERE username='$u' AND deleted='0';";
$query=mysqli_query($db_conx,$sql);
$blogcount = mysqli_num_rows($query);
if($blogcount<1){
$result="You havenot posted any Blog yet,Post one now.";
	}
else{?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/mystyling.css">

<style type="text/css">
#blogdata{width:75%; margin:auto; border:2px solid silver; min-height:450px;background-color:#EDFFB7; opacity:0.8; font-weight:bolder; padding:3px; overflow:hidden;}
</style>

</head>

<body>

<div id="blogdata">
  <?php
while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
$title=$row["title"];
$blog=$row["blog"];
$blogcreated=$row["blogcreated"];
$picture=$row["picture"];
if($picture==NULL){
$picture='<img src="css/images/thurs.jpg" width="25%" height="150px" style="margin-right:"40px;" >';
}
else
{$picture='<img src="user/'.$u.'/'.$picture.'" width="25%" height="150px" style="margin-right:"40px;">';
}
$data= $picture;
?>
<?php echo "$data";?> <?php echo "$title";?>
<?php
}
}
?></div>
</div><!---blogdata--->
</body>
</html>>
2

You need to show us the CSS you’re using to go with that.

Also, it’s not very helpful to give the PHP; we really need to see the HTML output. Please can you load your page, and use “View source” to copy and paste the relevant section of the HTML here.

3

hi… Here is the source code and image of actual output.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style type="text/css">

	#blogdata{width:75%; margin:auto; border:2px solid silver; min-height:450px;background-color:#EDFFB7; opacity:0.8; font-weight:bolder; padding:3px; overflow:hidden;}
</style>


</head>

<body>

<div id="blogdata">
     <div style="font-size:20px; font-family:Arial, Helvetica, sans-serif; text-align:center; color:green; "></div>
  <img src="user/krishh/-18570803.jpg" width="25%" height="150px" style="margin-right:40px;" style="margin-left:20px;"> eyes<img src="user/krishh/803441465.jpg" width="25%" height="150px" style="margin-right:40px;" style="margin-left:20px;"> hellop<img src="user/krishh/no" width="25%" height="150px" style="margin-right:40px;" style="margin-left:20px;"> doggy<img src="css/images/thurs.jpg" width="25%" height="150px" style="margin-right:40px;" style="margin-left:20px;" > like<img src="css/images/thurs.jpg" width="25%" height="150px" style="margin-right:40px;" style="margin-left:20px;" > jhvjhv vjbvhj hgvjgh kjbghj gh hjgbkjjg kbj<img src="user/krishh/264229407.gif" width="25%" height="150px" style="margin-right:40px;" style="margin-left:20px;"> gggggggggggggggggggggggggggggggggggggggggg</div> 
</div><!---blogdata--->
</body>
</html>
4

You would really need to wrap each image and its caption (marked up with <p> tags) in a div, and then you can float the divs to place them side by side.

5

I added this, but not working…

<div style="float:left;"><?php echo "$data";?><p> <?php echo "$title";?></p></div>

see image.

6

If you are putting your images inside a floated container then you need to put the 25% width on the container and set the image width to 100%. You’ve also set the image height to 150px which means you break the aspect ratio of the image. If you want the image to maintain its aspect ratio then set the image height to auto.

If your blocks are of uneven height then use display:inline-block (ie8+) instead of floats and then they won’t snag when they wrap.

7

I have changed the code to:
see the result in image. all sizes are different. still title is coming after picture. i need it above or down the image.

.imge{width:25%; display:inline-block;}

<?php
$result="Blogs submitted by $u!";
while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
$title=$row["title"];
$blog=$row["blog"];
$blogcreated=$row["blogcreated"];
$picture=$row["picture"];
if($picture==NULL){
$picture='<div class="imge"><img src="css/images/thurs.jpg" width="100%" height="auto" style="margin-right:40px;" style="margin-left:20px;" ></div>';
}
else
{$picture='<div class="imge"><img src="user/'.$u.'/'.$picture.'" width="100%" height="auto" style="margin-right:40px;" style="margin-left:20px;"></div>';
}
$data= $picture;
?>
<?php echo "$data";?><?php echo "$title";?>
<?php
}
}
?>
8

You seem to have lost the <p> tags from your titles.

<img> is an inline element, and won’t create a line break before of after it. <p> is a block element and will automatically start on a new line. As you can see from your screenshot above, when you did include the <p> tags, the title was positioned below the image.

9

I have added<p> to titles. now things are 50% solved,but this is giving me images doen one another but not side by side. i need three in a line and three on next line

picture attached:
.imge{width:25%; height:150px;display:inline-block;}

$picture='<div class="imge"><img src="css/images/thurs.jpg" width="100%" height="150" style="margin-right:40px;" style="margin-left:20px;" ></div>';
}
else
{$picture='<div class="imge"><img src="user/'.$u.'/'.$picture.'" width="100%" height="150" style="margin-right:40px;" style="margin-left:20px;"></div>';
}
$data= $picture;
?>
<?php echo "$data";?><p><?php echo "$title";?></p>
<?php
10

Again, you’ve not followed the original instructions carefully. You need to wrap each image and its title in a div. Then you can float the divs or use inline-block to align them side-by-side.

11

can you please tell where i need to make these changes?

it is the code that defines img in div using class imge - $picture=

'<div class="imge"><img src="css/images/thurs.jpg" width="100%" height="150" style="margin-right:40px;" style="margin-left:20px;" ></div>';
}
else
{$picture='<div class="imge"><img src="user/'.$u.'/'.$picture.'" width="100%" height="150" style="margin-right:40px;" style="margin-left:20px;"></div>';
}

It is where i am dispalying it:

<?php echo "$data";?><p><?php echo "$title";?></p>
12

I don’t do php but would guess something like this:


'<div class="imge"><img src="css/images/thurs.jpg"></div>';
}
else
{$picture='<div class="imge"><img src="user/'.$u.'/'.$picture.'"></div>';
}


<div class="img-wrap"><?php echo "$data";?><p class="title"><?php echo "$title";?></p></div>

With css like this:


.img-wrap{
	margin:0 1% 20px 1%;	
	width:22%;
	display:inline-block;
	*display:inline;/* ugly ie7 and ie6  hack - delete if not supporting*/
	zoom:1.0;/* ugly ie7 and ie6  hack - delete if not supporting*/
	vertical-align:top;
}
.imge img{
	display:block;
	width:100%;
	height:auto;/* if you want a fixed height then change this*/
}
p.title{
	padding:5px 0;
	text-align:center;
	margin:0;	
}

Don’t write your css inline in the html as that makes it very awkward to change from the css file. Also you had 2 style tags in the element and only one is allowed.

In case my php is wrong then you need actual html that looks like this:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.img-wrap {
	margin:0 1% 20px 1%;
	width:22%;
	display:inline-block;
 *display:inline;/* ugly ie7 and ie6  hack - delete if not supporting*/
	zoom:1.0;/* ugly ie7 and ie6  hack - delete if not supporting*/
	vertical-align:top;
}
.imge img {
	display:block;
	width:100%;
	height:auto;/* if you want a fixed height then change this*/
}
p.title {
	padding:5px 0;
	text-align:center;
	margin:0;
}
</style>
</head>

<body>
<div class="img-wrap">
		<div class="imge"><img src="http://www.placehold.it/350x150"></div>
		<p class="title">Image title</p>
</div>
<div class="img-wrap">
		<div class="imge"><img src="http://www.placehold.it/350x150"></div>
		<p class="title">Image title</p>
</div>
<div class="img-wrap">
		<div class="imge"><img src="http://www.placehold.it/350x150"></div>
		<p class="title">Image title</p>
</div>
<div class="img-wrap">
		<div class="imge"><img src="http://www.placehold.it/350x150"></div>
		<p class="title">Image title</p>
</div>
<div class="img-wrap">
		<div class="imge"><img src="http://www.placehold.it/350x150"></div>
		<p class="title">Image title</p>
</div>
<div class="img-wrap">
		<div class="imge"><img src="http://www.placehold.it/350x150"></div>
		<p class="title">Image title</p>
</div>
<div class="img-wrap">
		<div class="imge"><img src="http://www.placehold.it/350x150"></div>
		<p class="title">Image title</p>
</div>
<div class="img-wrap">
		<div class="imge"><img src="http://www.placehold.it/350x150"></div>
		<p class="title">Image title</p>
</div>
<div class="img-wrap">
		<div class="imge"><img src="http://www.placehold.it/350x150"></div>
		<p class="title">Image title</p>
</div>
</body>
</html>

The above is a working example so just copy it and run it in your browser while online to see the effect.

Rather than using a div and a p tag it would be more semantic these days to use the figure and figcaption elements as that was what they were designed for in html5.

13

If by this you mean that you are not good in PHP then you are mistaken… Your code worked for me and from my side you got 100 out of 100. Thanks alot

14

Paul, don’t put quotes around variables e.g. echo “$date”; because that date will then be interpreted as a string. Leave the quotes out. If you still need the stuff in varaibles to be wrapped in quotes for HTML purposes then do what you were doing earlier with “”.$picture.“”

15

I just copied the OPs code:) As I said I don’t do php as this is the css forum :slight_smile:

16

:nono:

17

Gotcha - I merely looked at what you posted and saw the PHP and your outputted HTML sample did not match what PHP would have done. Either way just trying to educate :-).

18