Having images on the bottom Pin

HTML & CSS
24

no errors just i have not move images up

25

@coothead’s code produces this:

coothead1
coothead1430×665 59.4 KB

On narrower screens, it behaves like this:

coothead2
coothead2605×729 91.4 KB

Those images are at the top of the posts, as you said you wanted. If we have not understood your requirements, then please explain how they differ from the result here.

26

I want same like that

27

OK. The code which coothead posted above does exactly that.

If it does not behave the same way when you try to add it to your site, then either you have made a mistake, or there is some other rule conflicting with the styles.

Without seeing the exact, full HTML and CSS which you are using, we can’t diagnose the problem.

2 Likes
28

did you see code up for name and comment i am using mysql to enter and display from mysql can you make some php which will display images by side name an comment ,like on link.

29

PHP does not control the positioning; CSS does.

1 Like
30

i tried css didnt work what want put image in div and direct styling for that div

31

What was the CSS you tried?

32

mydiv4 i did try to add didnt work

33

I see nothing with a class of mydiv4 anywhere in either your code or coothead’s, so that still tells us nothing. We don’t know what code you added, or where you added it to.

1 Like
34

anybody using team too much code to paste here

35

If you want people to help, you’re going to have to put in some effort to help people to help you. @coothead gave you a good solution which works fine as it is but when added to your page doesn’t work - so it is up to you to show us what extra HTML and CSS you have that stops @coothead’s page from working.

3 Likes
36

ok lets do it this way

<?php
  // Create database connection
  $db = mysqli_connect("localhost", "root", "", "image_upload");

  // Initialize message variable
  $msg = "";

  // If upload button is clicked ...
  if (isset($_POST['upload'])) {
  	// Get image name
  	$image = $_FILES['image']['name'];
  	// Get text
  	$image_text = mysqli_real_escape_string($db, $_POST['image_text']);

  	// image file directory
  	$target = "images/".basename($image);

  	$sql = "INSERT INTO images (image, image_text) VALUES ('$image', '$image_text')";
  	// execute query
  	mysqli_query($db, $sql);

  	if (move_uploaded_file($_FILES['image']['tmp_name'], $target)) {
  		$msg = "Image uploaded successfully";
  	}else{
  		$msg = "Failed to upload image";
  	}
  }
  $result = mysqli_query($db, "SELECT * FROM images");
?>
<!DOCTYPE html>
<html>
<head>
<title>Image Upload</title>
<style type="text/css">
   #content{
   	width: 50%;
   	margin: 20px auto;
   	border: 1px solid #cbcbcb;
   }
   form{
   	width: 50%;
   	margin: 20px auto;
   }
   form div{
   	margin-top: 5px;
   }
   #img_div{
   	width: 80%;
   	padding: 5px;
   	margin: 15px auto;
   	border: 1px solid #cbcbcb;
   }
   #img_div:after{
   	content: "";
   	display: block;
   	clear: both;
   }
   img{
   	float: left;
   	margin: 5px;
   	width: 300px;
   	height: 140px;
   }
</style>
</head>
<body>
<div id="content">
  <?php
    while ($row = mysqli_fetch_array($result)) {
      echo "<div id='img_div'>";
      	echo "<img src='images/".$row['image']."' >";
      	echo "<p>".$row['image_text']."</p>";
      echo "</div>";
    }
  ?>
  <form method="POST" action="index.php" enctype="multipart/form-data">
  	<input type="hidden" name="size" value="1000000">
  	<div>
  	  <input type="file" name="image">
  	</div>
  	<div>
      <textarea 
      	id="text" 
      	cols="40" 
      	rows="4" 
      	name="image_text" 
      	placeholder="Say something about this image..."></textarea>
  	</div>
  	<div>
  		<button type="submit" name="upload">POST</button>
  	</div>
  </form>
</div>
</body>
</html>

<form method="POST" action="index.php" enctype="multipart/form-data">

i want put by side of the submit insert in db image and display from db.But name and comment and image must be same like id who entered.So if i insert name i wanna see imy mage .

37

Hit here capljina2,

if it’s any help, all I did was remove each image…

  <img class="comment-avatar pull-left"

…which was just after…

   <div class="comment">

…and then put placed it just after…

    <div class="comment-content">

I can assure you that, absolutely no rocket science
was used during the procedure, :rofl:

coothead

4 Likes
38

hmmmm

do you have team viewer

40

I doubt many people do, and it is not in the spirit of the forums in any case, where discussions are all public.

As has been mentioned before, it is your HTML and CSS that we need to see, not your PHP/MySQL.

4 Likes
41

Yes, this question is about layout, so CSS is the solution. The logical approach would be to come up with some css and html code which works to display the layout as you intend (like @coothead provided).
Only once you have that working, then adjust your PHP script so that it creates that html code with the appropriate classes on the various elements for the css to work.
Viewing the php at this stage is just a complication which distracts from working out the problem in pure html/css.

6 Likes
42

i have error on this code syntax error

echo '<img class="comment-avatar pull-left"    '.( !empty( $images[$count] ) ? alt="" '<img  src="images/blog/'.$images[$count].'">' : '')
43

how echo this Preformatted text<img class=“comment-avatar pull-left” ‘.( !empty( $images[$count] ) ? ‘’ : ‘’).’ Preformatted text

44

You are missing a single quote before alt=

But that’s not to any help for us to help. :wink: