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);
}
Related
I want to know what is the wrong with following code; I want to make the inner div color appear as a part of the outer div color. I am using this for a percentage poll bar:
echo '<div style="width:130px; height:20px; background-color:#ecf2f9; overflow:hidden;">';
echo '<div style="width:<?php print $percent1; ?>%; background-color:#ff33cc; position:relative; z-index:3"></div>';
echo '</div>';
or if there will be another solution to get the result i need.
Thanks in advance for your help
In your case it is relatively simple. Just set the hight for the inner div and you are done ;)
A DIV has no default height. That's the problem.
Example:
echo '<div style="width:130px; background-color:#ecf2f9;">';
echo '<div style="width:<?php print $percent1; ?>%; background-color:#ff33cc; height:20px;"></div>';
echo '</div>';
You can see a plain HTML example of your bar here:
https://jsfiddle.net/eaz1vbex/
Beside that, using <?php print $percent1; ?> that way won't work, because echo outputs the content without further parsing by the PHP interpreter. If you want to keep the above style of code, you should change it to the following before continue reading:
echo '<div style="width:130px; background-color:#ecf2f9;">';
echo '<div style="width:' . $percent1 . '%; background-color:#ff33cc; height:20px;"></div>';
echo '</div>';
Alternatively:
echo "<div style='width:130px; background-color:#ecf2f9;'>";
echo "<div style='width:$percent1%; background-color:#ff33cc; height:20px;'></div>";
echo "</div>";
Please read this for better understanding:
http://php.net/manual/en/function.echo.php
Hints:
You should use CSS for all style attributes (except width, which is dynamic). Using the style tag is not recommended because it makes it hard to maintain and redesign later in the product lifecycle. It also bloats up output.
You maybe want to use some sort of template engine or at least the "here document"-syntax, for better maintainability of markup.
Example:
echo <<<END
<div style="width:130px; background-color:#ecf2f9;">
<div style="width:$percent1%; background-color:#ff33cc; height:20px;"></div>
</div>
END;
Example with seperate CSS:
CSS:
.progressBar { width:130px; background-color: #ecf2f9; }
.progressBar .progress { background-color:#FF33cc; height: 20px; }
PHP:
echo <<<END
<div class="progressBar">
<div style="width:$percent1%;" class="progress"></div>
</div>
END;
See: https://jsfiddle.net/fchp5aqa/
it's work : i have set a height : 20px and your $percent1 did not print !! so i change it and fix it. i think it enough to understand what i done!!
echo '<div style="width:130px; height:20px; background-color:red; overflow:hidden;">';
echo '<div style="width:'.$percent1.'%; background-color:blue; position:relative; z-index:3; height:20px;"></div>';
echo '</div>';
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'm trying to create a personal blog for myself and i'm having an issue of using overflow.
i have an internal div as home page that is designed to contain text and images for reviewing. the button "read more" is used to display the whole paragraph and images in the new page.
<div id="wrapper">
<!------------------BODY CONTENT OF THE WEB--------------------------------------->
<div id="bodyWeb">
<div id="main_content">
<!--CONTAINER FOR EACH ARTICLE-->
<?php
require 'connect_to_sql.php';
$sql = mysql_query("SELECT * FROM post ORDER BY post_date DESC LIMIT 5 ") or die (mysql_error());
$dataCount = mysql_num_rows($sql);
if ($dataCount > 0) {
while ($row = mysql_fetch_array($sql)) {
$title = $row['title'];
$content = $row['content'];
$post_date = date ('M jS, Y', strtotime($row['post_date']));
print '<div class="container">';
print '<div class="blog_container">';
print '<h1>' .$title.'</h1>';
print '<p class="date">'.$post_date.'</p>';
print $content;
print '</div>'; //BLOG CONTAINER
print '<div class="read_more">read more</div>';
print '</div>'; //CONTAINER
}
}
?>
</div> <!--MAIN CONTENT-->
</div> <!--bodyWeb--></div> <!--WRAPPER -->
and this is CSS file
#wrapper #bodyWeb #main_content .blog_container {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:18px;
float:left;
width:610px;
max-height:1200px;
text-align:justify;
overflow:hidden;
}
since i can't predict the height of every post that will be created later and the height is won't be the same for sure, so i just set the max-height = 1200px. but all i have is an image that is cut at the bottom of the div. is there a way do to get a neat div without change the max-height
any help would be appreciated.
thanks
there is another example here to understanding the issue
if the content is the short version of the article
you can leave height: auto;, the container will fit the height of content.
if the content is the article itself and you just want to hide the rest part of it, you may consider to do a shorten version or to add an anchor point and then let js to do the trick.
something like
(inside loop)
var post_head =$(head).offset().top,
anchor = $(anchor).offset().top,
height_of_content = post_head - anchor;
$(content).css('height', height_of_content);
I am using this code to store HTML code in a variable called $conversions
$conversions = "GBP " . number_format($file*0.84) . "CHF " . number_format($file*1.23)
However I can't seem to figure out how to add a <br> before the word "CHF ".
Any ideas?
The whole code is as follows:
<?php
$file = get_field('fl_price');
if(trim($file) == ""){echo 'Price on Application' ;}else{$conversions = "GBP " . number_format($file*0.84) . "<br />CHF " . number_format($file*1.23) ;echo 'EUR ' . number_format($file) . "</br><a class=\"wp-tooltip\" title=\" $conversions \">Other Currencies</a>" ;}
?>
$conversions = "GBP " . number_format($file*0.84) . "
CHF " . number_format($file*1.23);
Echoing $conversions will now have a HTML-linebreak before CHF.
You are adding your string to an attribute of <a> called title. This isn't going to be displayed and is certainly not going to render any HTML (like a br tag).
edit:
As per OptimusCrime's suggestion, this does work:
http://jsfiddle.net/5rM4u/1/
Replace your <br/> with
and you're good to go.
You are trying to print the $conversions variable in the "title" of the "a" tag. just using <br /> will not work.
See some of the answers to this question "How can I use a carriage return in a HTML tooltip?" it may contain the answer that you are looking for.
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