I used a CSS code to hide an iframe behind an image :
<style>
iframe{
opacity: 0;
border: 0px none transparent;
position: absolute;
top: 0px;
left: 0px;
height: 400px;
width: 500px;
filter:alpha(opacity=0);
}
img{
position: absolute;
top: 0px;
left: 0px;
height: 350px;
width: 401px;
}
</style>
I inserted Google Ads in the header, but ads are invisible, Please help!
you are currently applying your style to all iframes and imgs on the document.
You should use classes or ids instead, so you apply just to certain elements.
Using classes:
iframe.myframe{
...
}
//or simply
.myframe{
}
Using ids
#myframe {
...
}
and your HTML should be:
<iframe class="myframe"> or <iframe id="myframe">
Ids can only be used once per document, while classes can be used on several tags. This way your CSS should only affect specific elements, and leave the rest unaltered.
Hope it helps!
Related
I am trying to create a stacked box look using ::after. I created the code in a codepen (https://codepen.io/nk-creative/pen/vqvVJL), but when I place the code on the Wordpress site I am working on, I can't achieve the same stacking effect in the same order (http://aptw.nk-creative.com/)
I created the code in a codepen (https://codepen.io/nk-creative/pen/vqvVJL).
<div class="offset-boxes">
<h4>47 Locations & Personalized Plans. Meet Your New Partner.</h4>
</div>
.offset-boxes {
position: relative;
max-width: 300px;
height: 290px;
background-color: lightpink;
margin-top: 20px;
padding: 25px
}
.offset-boxes::after {
content: "";
width: 100%;
right: -40px;
top: -40px;
height: 100%;
background-color: red;
position: absolute;
z-index: -1;
}
I expected the code to look like the codepen, but the WP site does not.
It looks like your ::after pseudo element is buried. You can add this to your CSS to the parent element of .offset-boxes:
.textwidget {
position: relative;
z-index: 1;
}
I've embed a google maps iframe giving it a class for a responsive behavior:
.google-maps {
padding-bottom: 55%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7325331.382945205!2d12.835158178438968!3d26.299870988416156!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x13a892d98ece010d%3A0xfa076041c7f9c22a!2sLibya!5e0!3m2!1sen!2sin!4v1529409655794" width="350" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>
In responsive mode it work, but when I try to put a text above or under the iframe, the text is covered by the map, and the map doesn't respect the dimension that I give to it like width=450 height=300.
When I remove the class, the text and the dimension given work, but of course the map is not responsive anymore.
Someone could help me?
Thank a lot!
Do not change the iframe css
remove this
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
and do this
.google-maps {
display: block;
width: 100%;
height: 200px // change this with media queries for different screen sizes
}
Btw it the style fully depends on what you are trying to achieve.
If you want to place the iframe inside the .google-maps you have to add the position: relative; to the .google-maps
.google-maps {
display: block;
position: relative;
width: 350px;
height: 400px;
overflow: hidden;
}
it will fit the iframe inside the google-maps div.
but better is don't try to resize the iframe use them as provided by the google or you can create your custom google map from here google map developeres.
I have effectively use the following css style:
input.my-text:focus { background-image: none; }
It works great. But how do I continue to hide the background image when the textbox gets populated? I only want the background image to show when the textbox is blank.
I tried :valid: but that does not work the way I need it too.
Is this do-able in css or do I need to resort to javascript/jquery ?
Thanks.
How about "hacking" the placeholder functionality.
http://jsfiddle.net/f01g6spe/1/
input{
position: relative;
}
input::-webkit-input-placeholder{
background: pink;
display: block
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
This is the website I am modifying: sb460training.org
Here is the code snippet:
#apdiv1 {
position: absolute;
width: 2815px;
height: 276px;
z-index: 1;
top: 1px;
left: 0px;
background-color: #000;
}
#apdiv2 {
position: absolute;
width: 3150px;
height: 115px;
z-index: 2;
left: 0px;
top: 230px;
}
#apdiv3 {
position: absolute;
width: 221px;
height: 411px;
z-index: 3;
left: 0px;
top: 259px;
background-color: #FFF;
}
#apdiv4{
position: absolute;
width: 2853px;
height: 115px;
z-index: 4;
left: 219px;
top: 401px;
}
Do you know what the width dimensions should be so I can get rid of the annoyingly extra space that shows up to the right of the web page?
Thanks
Like the other answers, I agree that your CSS should change the fixed widths to 100%.
However, in your HTML you have img elements with explicit widths, to substitute background colours. For example, in the "apDiv2" DIV element, you have an in-line image containing white, "SB460_Pic/Secondary title2.jpg". This image is set to 2128px wide, causing the page to extend horizontally.
I would recommend removing the images that are being used to pad the right of each DIV, and instead set background colours in CSS.
UPDATE
Quick and dirty example:
http://pastebin.com/4PmZN1r4
change all your container widths to 100%.
give your html a width:100%; margin:0;
give your body a fixed width:1200px or so.
set your body with a margin: 0 auto if you want it centered.
I've heard the same similar issue.
all you need to do is try working with margin set to 0 and auto.
in most cases, try eliminating the use of 'position absolute' and work more with margin, padding and position relative.
I want the user's cursor to be hidden over an iframe.
iframe {
cursor: none;
}
However it doesn't do the trick.
Do I need to use JavaScript? Can JavaScript even do it? What's the solution?
You could also do it without JavaScript.
Example: http://jsfiddle.net/dyV7L/
.wrapper {
position: relative;
}
.hide-cursor {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
cursor: none;
z-index: 100;
}
<div class="wrapper">
<iframe src="http://doc.jsfiddle.net/"></iframe>
<div class="hide-cursor"></div>
</div>
Unfortunately, I had to resort to js for this one.
var iframe = document.querySelector('iframe');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.body.style.cursor = 'none';
This won't work cross-domain, but I don't think you should be using something like that cross domain anyway.
Assuming this is all on your own domain, another good js solution would be to inject a stylesheet into the iframe, changing it's own css to cursor: none on the html or body. I have used a similar strategy for my content manager - I load the real page right into the admin panel, inject some elements and a stylesheet into it, and then have admin features available right on the site - loaded in the iframe.
I think the only solution without srcipts: create a div, set position: absolute to the div and Iframe, and set the div over the ifram with z-index.
Example:
iframe{
width: 600px;
height: 600px;
display:block;
z-index: 0;
margin-left: 0px;
margin-right: 0px;
position:absolute;
}
div{
width: 600px;
height: 600px;
z-index: 1;
display:block;
margin-left: 0px;
margin-right:0px;
position:absolute;
cursor:none;
}