I am trying to add a background image to an Anchor tag when value is "ENGLISH" and "FRENCH"
I was able to make it work when the echoed php value was a digit using DATA-ID this way
HTML AND PHP:
<li><a href="#" class="pjMbSelectorLocale" data-id="<?php echo
$locale['id'];?>"><?php echo pjSanitize::html($locale['title']); ?></a></li>
CSS:
li a[data-id="1"]{
background-
image:url("img/flags/united-
kingdom.svg");
background-position: center;background-repeat: no-repeat;display: inline-
block;
}
li a[data-id="2"]{
background-image:url("img/flags/france.svg");
background-position: center;background-repeat: no-repeat;display: inline-
block;
}
now I am trying to do the same when the echoed value is not an ID (1 or 2) but a text ("English" and "French") with this statement:
<button>
</button>
And I can't seem to figure out how to manipulate it in css
Update: there seems to be a problem with the php, whenever I add the anchor tag, the echoed text disappears: initial php was:
<button>
<?php echo $selected_lang;?>
</button>
using dev tools, I can see the value being passed into the data-value and the css going with either options. but the browser doesn't not render the text nor the image
Solved
Solution:
the image was being hidden by a background-image:none default property and also I had to apply a height and width.
a[data-value="English"]{
background-
image:url("img/flags/united-
kingdom.svg");
background-position: center;background-repeat: no-repeat;display:inline-
block;width: 20px;height: 20px;
}
Did you try:
li a[data-value='ENGLISH']{
...
}
li a[data-value='FRENCH']{
...
}
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 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>
I'm trying to give the first div a top margin only if the class fixed-header exists, I've tried doing this with pure css but there were to many variables and I was losing track so I'm thinking use jquery.
Here's some simple html
<div id="page-container">
<div id="header" class="fixed-header">header</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
<div>Test 5</div>
</div>
Basically, if .fixed-header does exists give the first div, in this case it's 'test2' a top margin which matches the header, if there is no 'div2' then give 'div3' a top margin and so on.
Now for the tricky part, the top margin must be determined from a php script, here's how I get the header height below.
<?php echo $header_options['header_height'] ?>
How can I do this in jquery?
Here's a basic fiddle to start me off
If i understood you correctly, you can do that in CSS like that:
.page-container div.fixed-header:nth-child(1) + div,
.page-container div:not(.fixed-header):nth-child(1){
margin-top:20px;
// or
margin-top: <?php echo $header_options['header_height'] ?>px;
background:red;
}
this will give the first div after .fixed-header or the first one in .page-container (if no fixed-header exists) a margin.
Demo
If you want the margin be exactly the same as the height of the header without php, then yes, you'll have to resort to javascript/jquery. Something like this
$('#page-container div.fixed-header:nth-child(1)').each(function(){
$(this).next().css({'margin-top':$(this).height()});
});
Use length to find the div exits or not:
if($('.fixed-header').length > 0){
//do your stuff here
}
And I think it should work just with css:
#page-container .fix-header{
margin: 5px;
}
You can do this in CSS alone you know....you dont need to resort to Javascript or jQuery.
#page-container div:nth-child(1)[class='fixed-header']{
background:red;
}
Demo of the above, variation 1, variation 2
Use CSS in the head of the page:
#page-container #header.fixed-header + div {
/* the following should be parsed by php, but
I don't know whether this generates a full CSS
rule, or just the relevant length. Adjust as appropriate */
<?php echo $header_options['header_height'] ?>
}
There's no need for jQuery in here...
You want to div that follows .fixed-header to have a margin? Use the adjacent selector "+"
<style>
#header.fixed-header {height: <?php echo $header_options['header_height'] ?>px}
#header.fixed-header + div {margin-top: <?php echo $header_options['header_height'] ?>px}
</style>
Btw, you could just set a margin-bottom on #header.fixed-header... ;-)
Well, if each margin is the same, then give a data-attribute to the container. If each margin has different height, the most intuitive option is to put a data attribute to each item.
If each margin is the same, here is you code
$(".fixed-header").each(function(item) {
$($(item).next()).css('margin-top', $(item).parent().data('margin-height'));
});
Your markup should look like this:
<div id="page-container" data-margin-height="50px">
<div id="header" class="fixed-header">header</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
<div>Test 5</div>
</div>
This is equivalent to the following CSS, if every page-container has the same value as well.
.page-container .fixed-header + div {
margin-top: 50px;
}
You can generate this CSS file with your PHP as well. To make life easier, you can even embed this to you HTML template. If the margin-height does not reflect any information, then possibly generating your CSS is the best option, because then, you don't need to put useless information outside a <style> or <script> tag.
<style>
.page-container .fixed-header + div {
margin-top: <?php echo $header_options['header_height'] ?>;
}
</style>
Another option is to use CSS3 attr, which is not yet supported completely in all browsers.
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
.page-container .fixed-header + div {
margin-top: attr(data-margin-height);
}
This allows you to get rid of your script, but unfortunately, you will have to set data-margin-height for each .fixed-header.
I used .page-container classes in these examples, because this solution can be used if you have multiple different containers on the same page. If you only need one, you can just replace each .page-container to #page-container, and the code will work. Fiddle:
http://jsfiddle.net/k5V2a/
I'm programming a website and on a page I have dynamic content. To be specific I want to display some content in a div each. And the main div wont stretch upon this content.
#main{
position:relative;
background-image:url(images/main_middle.png);
background-repeat:repeat-y;
width:850px;
min-height:450px;
}
.intrebari{
position:relative;
width:400px;
min-height:150px;
padding:20px;
}
while($row=mysql_fetch_array($rezultat)){
echo '<div class="intrebari">
<div id="upleft"></div>
<div id="upright"></div>
<div id="downleft"></div>
<div id="downright"></div>
'.$_SESSION['username'].' a intrebat:<br />
'.$row['question'].'
</div>';
}
What am I doing wrong?
The internal div has to be cleared so the outer should know the height of the inner div
you may use a class
.clear{
clear:both;
}
and introduce it after your inner div inside outer div main
echo '<div class="intrebari">
<div id="upleft"></div>
<div id="upright"></div>
<div id="downleft"></div>
<div id="downright"></div>
'.$_SESSION['username'].' a intrebat:<br />
'.$row['question'].'
</div><div class="clear"></div>';
this will help you
If you have given float to intrebari, you need to give float left or right to main div to get the main wrap the inner content
.intrebari{
position:relative;
width:100%
min-height:150px;
padding:20px;
}
if you want to have the content of the div.intrebari stretch horizontaly make the width of value to 100%