I have a problem with my div, when I'm trying to put text inside a div using <?php echo $uin->text; ?> it doesn't show up like I want it to.
So if it worked it should have looked like this:
SOME TEXT HERE
SOME TEXT SOME LINES BELOW
MORE TEXT AT THE BOTOM
but for me it always shows up like this
SOME TEXT HERE SOME TEXT SOME LINES BELOW MORE TEXT AT THE BOTOM
Here is the codes I've tried:
<style>
.TextAndStuff {
background: url(<?php echo $uin->backgroundimg; ?>);
background-repeat: no-repeat;
width: 100%;
text-align: left;
}
</style>
<div class="TextAndStuff">
<?php echo $uin->text; ?>
</div>
So I don't know what I'm doing wrong but if there's like 3 lines between the top text and the middle text in $uin->text it doesn't show those line, everything just gets on the same line.
Like #u_mulder and #ThrowBackDewd said on the top, use nl2br() function.
In your case, it would be like this :
<div class="TextAndStuff">
<?php echo nl2br($uin->text); ?>
</div>
Related
CSS
.number{
float:none;
background-color:white;
cursor:ponter;
}
#panel{
background-color:red;
height:200px;
width:100px;
overflow-y:scroll;
}
I want to make a list of number in a panel. I've tried with HTML
HTML
<div id="panel>
<span class="number">1</span>
<span class="number">2</span>
<span class="number">3</span>
<span class="number">4</span>
.....
<span class="number">50</span>
</div>
When <span> is clicked, something will appear by jQuery, but I have no problem with jQuery.
Because I thought that looping the number manually doesn't efficient, I tried to use PHP.
PHP
<?php
for($number=0;$number<=50;$number++){
echo "<span class='number'>".$number."</span>";
}
?>
But the number made by PHP doesnt do the same like HTML does.
This is what I want and done by HTML.
This is done with PHP and the numbers are made horizontally until 50
You need to make sure the same whitespace is present when looping through it in PHP:
<?php
for($number=0;$number<=50;$number++){
echo "<span class='number'>".$number."</span>\n";
}
?>
Remember, your original code is just outputting one long string:
<span class='number'>1</span><span class='number'>2</span>...
In this case, whitespace (A newline) is important which may alter how your CSS looks. Forcing a new line each time you echo out a <span> by adding \n should fix this.
.number{ display : inline-block; }
I'd like to set a random background-image into a <div>Container</div>
To keep it simple I installed a plugin using [shortcode] to display random images. This works fine.
How to get the shortcode [wp-image-refresh] working together with background-image:url(...)
I tried it even as inline-style with no result.
This is what I have:
HTML
<div class="header_random-image">
<div id="hero"></div>
</div>
CSS
#hero {
background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>');
background-size: cover;
background-position: 50% 30%;
height:70vh;
width: 100%;
margin-top: -65px;
}
Another try with no result: Inline-style
<div class="header_random-image">
<div style="background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>')"></div>
</div>
Could anybody be so kind to help? Or does anybody has a simple solution to place div-random-background-images?
Best from Berlin
In most cases your CSS code will be served in a static file, thus the php code won't execute.
As the inline example doesn't work either, I guess the short code does not return an image url but a full image tag instead. The plugin's description
confirms this assumption. WP-IMAGE-REFRESH
You could try this:
PHP
<div class="header_random-image">
<?php echo do_shortcode("[wp-image-refresh class='hero_class']"); ?>
</div>
CSS
.header_random-image {
overflow: hidden;
}
.hero_class {
height: 100%;
width: auto;
margin-top: 0;
}
This should display the image. You'd still have to center it if you want (use flex-box) and check for problems caused on different screen sizes depending on the side ratio of your uploaded images and solve them with some Javascript.
Alternative
Use ACF Pro and add a gallery field to your posts/pages or an option page if you want the same images on all views.
PHP
<?php
$images = get_field('name-of-your-gallery-field');
shuffle($images);
$imageUrl = images[0]['url'];
<div class="header_random-image">
<div style="background-image: url('<?= $imageUrl ?>"); ?>')"></div>
</div>
I have this CSS for FULL Background image. Now i want to pass PHP variable to this URL to change the background image dynamically. Plz let me know . my codes are..
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/6.jpg");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
You can use Inline or internal css as follow:
Internal
<style>
div { background-image: url(<?php echo $imageURL;?>); }
</style>
Inline
<div style="background-image:url(<?php echo $imageUrl?>) no-repeat center center fixed">
</div>
Reference from Change css background-image with php
you can use php variable in your style code but must need to write css code after php variable . something like this
<?php
$bg_image = '../img/picmax/6.jpg'; // this is static value for test
?>
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
and add style after define php value then you can use this code
<style>
.imgback {
padding-top: 140px;
height: 100vh;
min-height: 400px;
background-size: cover;
background-image: url("<?=$bg_image?>");
}
</style>
of you can use this php value in your html code
<?php
$bg_image = '../img/picmax/6.jpg';
?>
<section class="imgback" style="background-image: url('<?php echo $bg_image ?>')">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
hope it will help you.
You can simply load a data from database and place it inside everywhere you like.
`<?php
$a = "6.jpg";
?>`
then insert it into your css
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
But that won't be good enough because php only runs once on every refresh or load. (you can use jQuery) or you better use JavaScript for these type of works as because they are triggered by events so you can change images without refreshing the page
I have text that I put into a div, which is generated automatically by php..(taken from the database).
But the text stretches over the div.
here is an example of what I want to do:
<div>
<?php
Generate_All_Text_Content_Here();
?>
</div>
I want the div to limit to where the text stretches..say no more than 300px.
I tried to give it width measurement..but it has no influence over the div element
add to your style
div{
max-width:300px;
word-wrap:break-word;
text-overflow:<clip> or <ellipsis>;
overflow:<hidden> or <scroll>;
}
this should really cover everything >.<
Why not do something like this then?
<div style="<?php echo get_text_width(); ?>">
<?php Generate_All_Text_Content_Here(); ?>
</div>
Just set the div width with CSS and text won't be bigger:
div {
max-width: 300px; /*Or simply width: 300px; if you want the div always to be that width*/
}
i am trying it get that div displaying 5 in a row and then start a new line and display more
atm all that is happening is the are going under each other.
CODE
< div>Line1< br />Line2< br>Line3< /div>
Thank you
If you want five divs side-by-side per line, the following works:
.cell { padding:0; margin:0; float:left; width:20%; }
.clear { clear:both; }
--
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="clear"></div>
For best results, all divs should have the same height. If they don't, you should place the <div class="clear"></div> after every 5th div.
A <br /> tag will always move to the beginning of the next line. So if you had this (I took the liberty to add a "/" to your second br tag, maybe this was the problem):
<div>Line1<br />Line2<br />Line3</div>
You'd get this:
Line1
Line2
Line3
Is that not what you want? If not, please clarify.
If you want the divs to display side-by-side you'll need to use css floats to do that.
<style type="text/css">
div { float: left }
</style>
Then, you'll need to use a <br clear="all" /> to move down to the next line.
This would mean that
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
Would show up as 12345 with the content all on the same line. Is this what you're looking for?