Question :
element1 elementN+1 element2N+1 element3N+1
element2 elementN+2 element2N+2 element3N+2
. . . .
. . . .
. . . .
elementN element2N element3N element4N
My css code.
HTML
<ul>
<li>element1</li>
<li>element2</li>
<li>element3</li>
<li>element.</li>
<li>element.</li>
<li>element.</li>
<li>element4N</li>
</ul>
CSS
ul {float:left;}
ul li {float:left; min-width: 250px;}
Result :
element1 element2 element3 element4
element5 element6 element7 element8
. . . .
. . . .
. . . .
element4N-3 element4N-2 element4N-1 element4N
I tried with display grid(ul tag) but it requires row count which I need automatic.
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(35, 1fr);
I'm wondering if it's possible to do this by only using CSS.
Related
Trying to add an awards system on a public profile page. The awards are echoed from mySQL as images. The thing is, a maximum of 5 awards can be shown, and in the next line there is no space between it and the first line. How can I add it, possibly with <br>, but if something else is better, it's also welcome!
I tried some <<<EOD , but it got too complicated and it didn't work. Tried the naive approach, adding <br> after the echo, but obviously it didn't work either. Tried increasing the padding, it also didn't work at all.
<div class="row">
<?php if(is_array($allawards)) { ?>
<p style="padding: 10px">
<?php /* To show the image: */ ?>
<?php foreach($allawards as $award) { ?>
<img src="<?php echo $award->image; ?>"
alt="<?php echo $award->descrip; ?>">
} ?>
</p>
<?php } ?>
<br/>
</div>
It's not PHP task, you need to use simple CSS.
Margin-bottom?
img {margin-bottom: 5px;}
Margin-top to 6th and others?
img:nth-child(5) ~ img {margin-top: 5px;}
In your foreach you can increment a counter; after you echo, you can check if the counter is at five, and break if so.
$counter = 1;
foreach
...
echo ...
if ($counter == 5) echo '<br>';
$counter++;
Or, instead of fixing this with a manual break, you may look to your styling to solve this a little more simply and more dynamically. With CSS Grid you can specify the area to have 5 elements wide, and a row-gap of however much space you want between each set of 5 awards, like so:
#awards_container {
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr; //1fr each instead of autos so they're always
the same width
grid-row-gap: 5px;
}
well , i got this code
echo '<div class="incoming_msg_img"><img src="https://ptetutorials.com/images/user-profile.png" alt="sunil">' . $row["Sender"] . '</img></div>';
but the value comes under the img , i want to put it behind the img , any suggestions
example : Image is here
Text is here
I want Image here => Text here
Simply place the $row var before the tag. You could also use CSS as was previously described. By using ::after.
echo '< div class="incoming_msg_img"> ' . $row['sender'] . '< br/> < img
src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div> ';
Better yet
echo '< div class="incoming_msg_img"> ' . $row['sender'] .</div>
CSS
.incoming_msg_img::after{
content: url(https://ptetutorials.com/images/user-profile.png);
}
i want to give margin bottom to them
code is as shown below,
<div class="dd" id="menu_list_drag">
<?php echo $li; ?>
</div>
where $li is as shown below,
foreach ($p1 as $p) {
$inner_li = "";
$p2 = array_filter($menu, function($a)use($p) {
return $a['parent_id'] == $p['id'];
});
if ($p2) {
$inner_li = $this->generate_li($menu, $p['id']);
}
$li .= "<li class='dd-item' data-id='" . $p['id'] .
"' id='menu-list'><div menu-id='" . $p['id'] . "' id='drag' class='dd-handle'>" . $p['title'] .
"<div style='float:right; margin-bottom:10px' class='dd-nodrag'>"
. "<a class='btn-group btn-group-xs edit_menu' data-toggle='tooltip' id='" . $p['id'] .
"' data-original-title='Edit' onclick='edit_menu($(this))' title='Edit Menu'>"
. "<i class='btn btn-default edit_area fa fa-pencil'></i></a>"
. "<a class='btn-group btn-group-xs delete_menu' id='" . $p['id'] .
"' data-toggle='tooltip' data-original-title='Delete' delete_type='delete_single' onclick='delete_menu($(this))' title='Deactivate Menu'>"
. "<i class='btn btn-default fa fa-trash-o'></i></a></div></div>" . $inner_li . "</li>";
}
$ol = "<ol class='dd-list'>" . $li . "</ol>";
data comes fine but i am unable to give margin bottom to this dd class menu
please help me thank you...
i have used this
.dd-handle{height:35px;}
and it worked for me...!!
I want to put an image + h5 inside the "a" tage in WordPress..it seem's not working.. properly syntax error whith calling the image!..
echo '<li>' . "<img src='".get_post_meta($post->ID, "news_images", true) . "' />" .$recent["post_title"].' </li> ';
Try this
<li><img src='".get_post_meta($post->ID, "news_images", true) . "' /> .$recent["post_title"] </li>
Hope this works
I am trying to create a list of actors in a film with a small profile image to the left of the actor's name and their accompanying character, however my images are strangely stacking on top of one another, and I'm not sure why. The cast names, their character and the image are all being pulled in dynamically from an external API.
Below is an image of the current layout:
The accompanying HTML and CSS is below:
HTML
<?php
foreach($tmdb_cast['cast'] as $castMember){
if ($tmp++ < 10)
echo '<img src="http://cf2.imgobject.com/t/p/w45' . $castMember['profile_path'] . '" class="actor_image" alt="' . $castMember['name'] . '" title="' . $castMember['name'] . '" />';
echo '<p>' . $castMember['character'] . ' - ' . $castMember['name'] . '</p>';
}
echo '<p id="morecast">[...view all cast]</p>'
?>
CSS
#cast {
margin-left: 50%;
border: solid 1px red;
}
.actor_image {
float: left;
}
#morecast {
text-align: right;
}
The layout I'm trying to achieve is something similar to the one on display at IMDb, with the actor's name and character vertically aligned with the image:
It looks like you're floating your images, but not applying a "clear" between your image+text units. Try applying a "clear: both;" between each actor instance?
Wrap the image and p elements in a div and have clear:both on the div. Set the inline style to a class. I did it inline as a quick-and-dirty example.
foreach($tmdb_cast['cast'] as $castMember){
if ($tmp++ < 10)
echo '<div style="clear: both;">'
echo '<img src="http://cf2.imgobject.com/t/p/w45' . $castMember['profile_path'] . '" class="actor_image" alt="' . $castMember['name'] . '" title="' . $castMember['name'] . '" />';
echo '<p>' . $castMember['character'] . ' - ' . $castMember['name'] . '</p>';
echo '</div>'
}
I'ts convenient to create a css class that wraps every image and text group:
echo '<div class="actor">
<img src="http://cf2.imgobject.com/t/p/w45' . $castMember['profile_path'] . '" class="actor_image" alt="' . $castMember['name'] . '" title="' . $castMember['name'] . '" />';
echo '<p>' . $castMember['character'] . ' - ' . $castMember['name'] . '</p>
</div>';
And float each container
.actor{
float:left;
clear: left;
}
Now you have a box arround the image+text group that you can float. If this doesn't fix the problem, next step is define the .actor "width" property