Jump to content

Images Isn't Displaying Side By Side


CodingStudent
 Share

Recommended Posts

Hi friends, i have a problem. i am pulling data from database "image" and "headline". when i pulled second data, second image and headline are displaying below. See i added image. i want to display side by side.

<div class="row no-gutters" style="border:1px solid black;">
	<div class="col">
	
	
	<?php
	$resim = $db->query("SELECT * FROM resimlerekle ORDER BY cokluresimekle_id DESC LIMIT 3");
	?>

	<?php foreach ($resim as $resimkoy) { ?>

	<!-- <div style="border:1px solid black; height:50px; color:white; line-height:50px; text-align:center;"><?php /* echo $resimkoy["cokluresimekle_baslik"]; */ ?></div> -->
	
	<!--
	<div class="row no-gutters" style="border:1px solid black;">
	-->
	
	<img style="max-width:266px;" <?php echo $resimkoy; ?> src='../../../upload/cokluresim/<?php echo $resimkoy["cokluresimekle_resim"]; ?>'><br>
	<div style="text-align:center; background-color:#17a2b8; color:#fff; max-width:266px;  max-height:35px; line-height:35px;"><?php echo $resimkoy["cokluresimekle_baslik"]; } ?></div>

	</div>
	</div>

 

adsiz 3.jpg

Link to comment
Share on other sites

Be default, the display property for <div> tags is set to "block". This means that a line break is added before and after the <div> tag.

Since it looks like you are trying to display a series of images with a text block below the photo, you could wrap both the image and the <div> tag with a parent <div> tag. Then using CSS to, you could float that parent div tag to the left.

For code examples, you could run a Google search for "css image gallery with captions".

Link to comment
Share on other sites

i changed codes that. you can see i added image. i want to put the captions under the images

 

<style>

figure {
  width:33%;
  float: left;
  position: relative;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  margin-right: 15px;
  margin-bottom: 1.35em;
  background: #fff;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
  
}
 
figcaption {
  width:99%;
  position: absolute;
  background: rgba(0,0,0,0.6);
  font-size: 1.2em;
  color: #fff;
  padding: 10px 16px;
  opacity: 0;
  
  bottom: 0%;
  -webkit-transition: all 0.44s ease;
  -moz-transition: all 0.44s ease;
  -o-transition: all 0.44s ease;
  transition: all 0.44s ease;
}

figcaption a { color: #cce1ef; }

figcaption a:hover { color: #a9cbe1; }
 
figure:hover figcaption { opacity: 1; bottom: 5px; }
 
figcaption.light {
  background: rgba(255,255,255,0.6);
  font-size: 1.2em;
  color: #444;
  -webkit-transition: all 0.44s ease;
  -moz-transition: all 0.44s ease;
  -o-transition: all 0.44s ease;
  transition: all 0.44s ease;
}

figcaption.light a { color: #60a7d7; }
figcaption.light a:hover { color: #4d92c0; }

#topbar { position: fixed; top: 0; width: 100%; height: 45px; z-index: 999; background: #1b1b1b; border-bottom: 1px solid #575656; padding-left: 35px; }
#topbar a { line-height: 45px; font-size: 1.4em; font-weight: bold; color: #fff; }
 
#wrapper { width: 1000px; margin: 0 auto; padding-top: 70px; }
#gallery { padding: 0px 15px; display: block; }


.baslik {
	height:35px;
	line-height:35px;
	text-align:center;
	border:1px solid black;
}


<!-- Yukarısı sil ve düzenle için -->


</style>

	<?php
	$resim = $db->query("SELECT * FROM resimlerekle ORDER BY cokluresimekle_id DESC LIMIT 3");
	?>

	<?php foreach ($resim as $resimkoy) { ?>

	
	<figure>
	<img style="width:100%;" <?php echo $resimkoy; ?> src='../../../upload/cokluresim/<?php echo $resimkoy["cokluresimekle_resim"]; ?>' /><br>
	<figcaption>
	<div style="float:left;">Sil</div>
	<div style="float:right;">Düzenle</div>
	</figcaption>
	</figure>
	<div style="text-align:center;"><?php echo $resimkoy["cokluresimekle_baslik"]; } ?></div>

 

adsiz 8.jpg

Link to comment
Share on other sites

Hi, i put images side by side. When i give equal space with "margin-left" or padding-left, it is giving space for first image too. i am pulling images from database. i don't want to give "margin" for first image. See i added image.

<style>

	figure {
	  width:32.5%;
	  float: left;
	  position: relative;
	  padding-top: 3px;
	  margin-left:7px;
	  padding-bottom: 3px;
	  margin-bottom: 1.35em;
	  background: #fff;
	  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
	  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
	  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
	  
	}
	 
	figcaption {
	  width:99%;
	  position: absolute;
	  background: rgba(0,0,0,0.6);
	  font-size: 1.2em;
	  color: #fff;
	  padding: 10px 16px;
	  opacity: 0;
	  
	  bottom: 0%;
	  -webkit-transition: all 0.44s ease;
	  -moz-transition: all 0.44s ease;
	  -o-transition: all 0.44s ease;
	  transition: all 0.44s ease;
	}

	figcaption a { color: #cce1ef; }

	figcaption a:hover { color: #a9cbe1; }
	 
	figure:hover figcaption { opacity: 1; bottom: 5px; }
	 
	figcaption.light {
	  background: rgba(255,255,255,0.6);
	  font-size: 1.2em;
	  color: #444;
	  -webkit-transition: all 0.44s ease;
	  -moz-transition: all 0.44s ease;
	  -o-transition: all 0.44s ease;
	  transition: all 0.44s ease;
	}

	figcaption.light a { color: #60a7d7; }
	figcaption.light a:hover { color: #4d92c0; }

	#topbar { position: fixed; top: 0; width: 100%; height: 45px; z-index: 999; background: #1b1b1b; border-bottom: 1px solid #575656; padding-left: 35px; }
	#topbar a { line-height: 45px; font-size: 1.4em; font-weight: bold; color: #fff; }
	 
	#wrapper { width: 1000px; margin: 0 auto; padding-top: 70px; }
	#gallery { padding: 0px 15px; display: block; }
	

<!-- Yukarısı sil ve düzenle için -->


</style>

	<?php
	$resim = $db->query("SELECT * FROM resimlerekle ORDER BY cokluresimekle_id DESC LIMIT 3");
	?>

	<?php foreach ($resim as $resimkoy) { ?>

	
	<figure>
	<img style="width:100%;" <?php echo $resimkoy; ?> src='../../../upload/cokluresim/<?php echo $resimkoy["cokluresimekle_resim"]; ?>' /><br>
	<figcaption>
	<div style="float:left;">Sil</div>
	<div style="float:right;">Düzenle</div>
	</figcaption>
	</figure>
	<?php } ?>

 

adsiz 9.jpg

Edited by CodingStudent
i forgot adding the codes
Link to comment
Share on other sites

On 9/8/2020 at 7:39 AM, CodingStudent said:

i changed codes that. you can see i added image. i want to put the captions under the images

Put both the image and the caption inside the container DIV and use CSS to make them both somewhat block-ish.

 

9 hours ago, CodingStudent said:

Hi, i put images side by side. When i give equal space with "margin-left" or padding-left, it is giving space for first image too. i am pulling images from database. i don't want to give "margin" for first image. See i added image.

Give the container DIV an equal negative left margin so that it looks like there's no margin on the first image.

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • 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.