I am fetching images from the database which is working but all images are overlapping. I want to display all images one by one. Would you help me in this?
.img {
position: relative;
float: left;
width: 300px;
height: 300px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
<?php if ($result_related_products->num_rows > 0) { // output data of each row
while($row = $result_related_products->fetch_assoc()) {
$p_img=$row['p_img'];
?>
<div class="img" style="background-image: url('admin/assets/img/products/<?php echo $p_img; ?>')">
<?php }
}
else { echo "0 results"; } ?>
You have to close the DIV
</div>
(In your while loop)
You forgot to close the div
change this
<div class="img" style="background-image: url('admin/assets/img/products/<?php echo $p_img; ?>')">
for this (see at the end of line the </div>)
<div class="img" style="background-image: url('admin/assets/img/products/<?php echo $p_img; ?>')"></div>
Related
I should round the image in pdf. I generate a pdf with PHP that shows also an image inside. Everything works correctly. When I add "width" and "hight" to the image it works, but when I try to round the corners of the image it does not work. When I envelop image with div and add to div border-radius and overflow: hidden; -> overflow: hidden; does not work.
Here is part of my code:
<style>
.visuel-carte{
text-align: center;
margin-top: 25px;
margin-bottom: 40px;
position: relative;
border-radius: 20px;
background-color: green;
}
.visuel-carte img {
height: 270px;
width: 420px;
border-radius: 20px
}
</style>
<page>
<div class="visuel-carte">
<img src="<?php echo $eboutique['visuel_carte']; ?>"/>
</div>
</page>
maybe you have some idea?
I tried also
<div style="background-image: url('<?php echo $eboutique['visuel_carte'];?>')">
but it shows me an error
I found an error in my code:
does not work:
<div style="background-image: url('<?php echo $eboutique['visuel_carte'];?>')">
work (without a little quotes ;) ):
<div style="background-image: url(<?php echo $eboutique['visuel_carte'];?>)">
I have this css script generated using php, it's used to show a wordpress second featured image when an user hover. The problem is that the images are blinking and I don't know how to solve this small issue. Can anyone suggest a fix for this? I've implemented the lazyload, but on this case it's unuseful.
<div class="box">
<?php $id = get_the_ID(); ?>
<div class="rounded-circle" style="background-image:url('<?php the_post_thumbnail_url('full'); ?>')" id="staff-pic-<?php echo $id; ?>"></div>
<?php if(class_exists('MultiPostThumbnails')):
$hover_pic = MultiPostThumbnails::get_post_thumbnail_url(get_post_type(),'secondary-image');
endif;
echo
'<style>
#staff-pic-'.$id.'{
background-size: cover;
background-position: center;
margin: auto;
transition: all 300ms;
}
#staff-pic-'.$id.':hover{
transition: all 300ms;
background-image:url("'.$hover_pic.'") !important;
background-size: cover;
background-position: center;
margin: auto;
}
</style>';
?>
<h3 class="text-center team-name"><?php the_title(); ?></h3>
<p class="description text-center"><?php the_content(); ?></p>
</div>
I have a sequence of 5 user images that I am stacking horizontally using a z-index. i.e: <img src="xxxx" style="z-index:5;position:relative;"> and then z-index 4...3..etc.
I now want to link these images to the user's 'profile'. If I surround my <img> with an <a> it breaks the formatting. It just shows the images in a line (with the z-indexes still correct(!?)) instead of overlapped. I tried just <img> and also <img> but nothing has worked.
<?php $count = 5; ?>
<?php foreach($today_all_result as $today_all_results) : ?>
<a href="<?php echo BASE_URI; ?>/user/?user=<?php echo $today_all_results->user_id; ?>" style="position:relative;z-index:<?php echo $count; ?>">
<img src='<?php echo BASE_URI; ?>/images/userImages/<?php echo $today_all_results->userPicture; ?>' class="pic-athlete <?php echo $stacked; ?>" style="z-index:<?php echo $count; ?>;position:relative;">
</a>
<?php $count--; ?>
<?php $stacked = "stacked"; ?>
<?php if($count <= 0) break; ?>
<?php endforeach; ?>
Does anyone know how to fix this? Thank you in advance!
Change the style from position: relative; to position: absolute;
img{
height: 100px;
width: 100px;
position: absolute;
}
<img src="" style="background-color: blue; z-index: 10;"/>
<img src="" style="background-color: green; z-index: 2;"/>
<img src="" style="background-color: red; z-index: 3;"/>
Another example:
img{
height: 100px;
width: 100px;
position: absolute;
}
<img src="" style="background-color: blue; z-index: 1;"/>
<img src="" style="background-color: green; z-index: 2; left: 20px; top: 20px;"/>
<img src="" style="background-color: red; z-index: 3;left: 40px; top: 40px;"/>
I am using a table to display information from my database but I'm having trouble formatting the CSS. Right now I have 12 icons and the respective name on the right and the problem is that everything is displayed like a list, one below the other and I wanted to break the list in three blocks, like this:
EDIT I don't need necessarily to do it with tables, I just need to display the values like this, dynamically. Because later I'd probably going to add more plants to database and I want them to be always listed like this.
This is my html:
<table id="plantslist">
<?php
foreach($resultado as $planta){ ?>
<tr>
<td><img src="http://www.coisas.pt/coisas/backoffice/<?php echo $planta['icon']; ?>"></img></td>
<td><a href="blabla.php?name=<?php echo $planta['name']?>&img=<?php echo $planta['img']?>&tagline=<?php echo $planta['tagline']?>&hum=<?php echo $planta['hum']?>&lum=<?php echo $planta['lum']?>&temp=<?php echo $planta['temp']?>&seed=<?php echo $planta['seed']?>&spacing=<?php echo $planta['spacing']?>&info1=<?php echo $planta['info1']?>&info2=<?php echo $planta['info2']?>&info3=<?php echo $planta['info3']?>&info4=<?php echo $planta['info4']?>">
<?php echo $planta['name'];?></a></td>
</tr>
<?php } ?>
</table>
CSS:
#plantslist {
border: 3px solid white;
overflow: scroll;
font-size: 1.7vw;
line-height: 2.8vw;
font-family: Robotomedium;
margin-top: 11%;
text-align: left;
}
#plantslist img {width: 2.3vw;}
#plantslist tr td {
display: inline-block;
vertical-align: top;
}
You can do a container with width: 100%; then make child elements with width: 33% each one. To make them place one next to other you can use float: left;. Here is an example.
.table {
width: 100%;
float: left;
}
.table > .items {
width: 33%;
float: left;
}
.table > .items:before {
content: "";
display: block;
background: url(http://placehold.it/20/000) no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
}
<div class="table">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
</div>
Look that your icon it's placed with before pseudo element. You should change background value with the correct url.
EDIT
Use this if you have different images per plant.
.table {
width: 100%;
float: left;
}
.table > .items {
width: 33%;
float: left;
}
.table > .items img {
width: 20px;
height: 20px;
margin: 0 10px 0 0;
float: left;
}
<div class="table">
<div class="items">
<img src="http://placehold.it/20/dfa9a9" alt=""> 1
</div>
<div class="items">
<img src="http://placehold.it/20/dfa9de" alt=""> 2
</div>
<div class="items">
<img src="http://placehold.it/20/b1a9df" alt=""> 3
</div>
<div class="items">
<img src="http://placehold.it/20/a9cadf" alt=""> 4
</div>
<div class="items">
<img src="http://placehold.it/20/dfd8a9" alt=""> 5
</div>
<div class="items">
<img src="http://placehold.it/20/5cff46" alt=""> 6
</div>
<div class="items">
<img src="http://placehold.it/20/dfa9a9" alt=""> 7
</div>
<div class="items">
<img src="http://placehold.it/20/a9cadf" alt=""> 8
</div>
<div class="items">
<img src="http://placehold.it/20/a9cadf" alt=""> 9
</div>
</div>
Using your PHP code
HTML | PHP
<div class="table">
<?php
foreach($resultado as $planta){
?>
<div class="items">
<img src="http://www.growbox.pt/growbox/backoffice/<?php echo $planta['icon']; ?>" alt="<?php echo $planta['name'];?>">
<a href="intips.php?name=<?php echo $planta['name']?>&img=<?php echo $planta['img']?>&tagline=<?php echo $planta['tagline']?>&hum=<?php echo $planta['hum']?>&lum=<?php echo $planta['lum']?>&temp=<?php echo $planta['temp']?>&seed=<?php echo $planta['seed']?>&spacing=<?php echo $planta['spacing']?>&info1=<?php echo $planta['info1']?>&info2=<?php echo $planta['info2']?>&info3=<?php echo $planta['info3']?>&info4=<?php echo $planta['info4']?>"><?php echo $planta['name'];?>
</a>
</div>
<?php
}
?>
</div>
CSS
.table {
width: 100%;
float: left;
}
.table > .items {
width: 33%;
float: left;
}
.table > .items img {
width: 20px;
height: 20px;
margin: 0 10px 0 0;
float: left;
}
See if this works. I'm just creating more elements so that you have 3 sets of tds per row. Ideally, though, I wouldn't do this with tables. I'd do something like arglab suggested with divs, but here I'm just showing you how I'd do it with tables since that was your question. Make your divs inline blocks with width 33% and you should be good. You may also need to do box-sizing: border-box so that way any padding and margins get automatically put into the calculation for you.
<table id="plantslist">
<?php $count = 0; ?>
<tr>
<?php foreach($resultado as $planta) {
if (count === 2) {
count = 0; ?>
<td><img src="http://www.growbox.pt/growbox/backoffice/<?php echo $planta['icon']; ?>"></img></td>
<td><a href="intips.php?name=<?php echo $planta['name']?>&img=<?php echo $planta['img']?>&tagline=<?php echo $planta['tagline']?>&hum=<?php echo $planta['hum']?>&lum=<?php echo $planta['lum']?>&temp=<?php echo $planta['temp']?>&seed=<?php echo $planta['seed']?>&spacing=<?php echo $planta['spacing']?>&info1=<?php echo $planta['info1']?>&info2=<?php echo $planta['info2']?>&info3=<?php echo $planta['info3']?>&info4=<?php echo $planta['info4']?>">
<?php echo $planta['name'];?></a></td>
</tr>
<tr>
<?php }
else {
$count += 1;
// If this doesn't work, try $count = $count + 1;
<td><img src="http://www.growbox.pt/growbox/backoffice/<?php echo $planta['icon']; ?>"></img></td>
<td><a href="intips.php?name=<?php echo $planta['name']?>&img=<?php echo $planta['img']?>&tagline=<?php echo $planta['tagline']?>&hum=<?php echo $planta['hum']?>&lum=<?php echo $planta['lum']?>&temp=<?php echo $planta['temp']?>&seed=<?php echo $planta['seed']?>&spacing=<?php echo $planta['spacing']?>&info1=<?php echo $planta['info1']?>&info2=<?php echo $planta['info2']?>&info3=<?php echo $planta['info3']?>&info4=<?php echo $planta['info4']?>">
}
?>
</table>
SOLUTION WITH DIVS: See if this works...
<div id="plantslist">
<?php foreach($resultado as $planta) { ?>
<div class="plant">
<img src="http://www.growbox.pt/growbox/backoffice/<?php echo $planta['icon']; ?>"></img>
<a href="intips.php?name=<?php echo $planta['name']?>&img=<?php echo $planta['img']?>&tagline=<?php echo $planta['tagline']?>&hum=<?php echo $planta['hum']?>&lum=<?php echo $planta['lum']?>&temp=<?php echo $planta['temp']?>&seed=<?php echo $planta['seed']?>&spacing=<?php echo $planta['spacing']?>&info1=<?php echo $planta['info1']?>&info2=<?php echo $planta['info2']?>&info3=<?php echo $planta['info3']?>&info4=<?php echo $planta['info4']?>">
<?php echo $planta['name'];?></a>
</div>
<?php } ?>
</div>
CSS
#planstslist{
width: 100%;
/* this may help if the items don't stack properly */
white-space: nowrap;
}
.plant{
width: 33.33%
display: inline-block;
/* this may help if the items don't stack properly */
white-space: normal;
}
You may need to make the images inline blocks and set them and the links to have percentage width values adding up to no more than 100%. You may also need to add box-sizing: border-box; to the "plant" divs. I usually get in the habit of making the following declaration on all my CSS files: * {box-sizing: border-box};
I think it's enough if you simply erase display: inline-block; from this CSS rule;
#plantslist tr td {
display: inline-block;
vertical-align: top;
}
displayshould be table-cell, not inline-block, which is the default anyway in a <td> element. Also vertical-align: top; wouldn't be necessary, so you might as well erase the whole rule...
I have an array of images in php that I am trying to display as a gallery. It is working pretty well, except that the first row of the gallery comes out diagonal, with each image slightly below the one before it.
Here is the code I am using:
CSS
.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
display: inline;
width:180px;
height:180px;
}
.gallery:hover {
border: 1px solid #777;
}
.gallery img {
max-height:100%;
max-width:100%;
margin:0 auto;
}
HTML/PHP
<div class="gallery-container">
<?php
$count = 0;
foreach($images as $image) {
echo "<div class='gallery'><a href=''><img src='".$dir.$image."'/></a></div>"; //$dir is the path to the image
if(count % 4 == 0) {
echo "<br>";
}
$count = $count + 1;
}
?>
</div>
Here is a screenshot of the result on the first row:
All the other rows come out fine. Thank you very much for any help.
If you want to do it using float, you would better do that like this:
CSS
.gallery{
margin: 5px;
border: 1px solid #ccc;
float: left;
display: block;
width:180px;
height:180px;
}
.gallery.clear-left{
clear: left;
}
PHP/HTML
<div class="gallery-container">
<?php
$count = 0;
foreach( $images as $image ){?>
<div class="gallery <?php echo( 0 == $count % 4 ? 'clear-left' : '' );?>">
<a href="">
<img src="<?php echo $dir.$image;?>">
</a>
</div>
<?php
$count++;
}
?>
</div>
But there is an even better solution to this, called flex:
Instead of br element render "clear" div
<div style="clear:both"></div>
Have you tried starting the count at 1 instead of 0?
Checkout the resulting html. It is likely that you count is off and the br is being put to the dom too often. This fiddle shows that your desired html and css should work.
<div class='gallery'><a href=''><img src='https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg'/></a></div>
<div class='gallery'><a href=''><img src='https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg'/></a></div>
<div class='gallery'><a href=''><img src='https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg'/></a></div>
<div class='gallery'><a href=''><img src='https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg'/></a></div>
<br>
Though, I would consider not using the br, but instead using a containing div:
like this