In a CSS file for a script I bought I am seeing three lines that have me somewhat worried:
.h5video .control-panel { height: 45px; width:100%; line-height: 45px; bottom: 0px; left: 0px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAtCAYAAABvewHEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEdJREFUeNpiYGBg2Mzg6+v7iunu3bt/mIBcBqb///8jE//+/cPOJZaFkwDbxggEIOI/iGCAE4wQFhAw4GIxYZWFcSEGAAQYAB5zRmw2StEiAAAAAElFTkSuQmCC") repeat-x scroll 0 0 transparent; position: absolute; }
.h5video .control-panel .seek-bar-guage { height: 7px; background: url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAAAAAAdccqdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABdJREFUCB1j+M/0g+kr02emj0D4mekrAD41B7hJ9Jz5AAAAAElFTkSuQmCC") repeat-x scroll 0 0 transparent/* #C9DD1A */; width: 0%; left: 0px; z-index: 2; position: absolute; z-index: 0; }
.h5video .control-panel .seek-bar-buffer { height: 7px; width: 0px; top:0px; left: 0px; position: absolute; z-index: 0; background: url(data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAIAAAC3eAIWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACFJREFUeNpiyMrKYvrz5w/Tr1+/wPjnz59w/Pv3b4AAAwBFtxXP00sbFwAAAABJRU5ErkJggg==); }
These all show Base64 in the coding and I'm trying to figure out what it actually should be showing there. Can anyone help with this?
What you are seeing are base64 encoded images. You can decode them and have them written to files with a .png extension to see their contents. The advantage of base64 encoded images within the CSS is that they can reduce the number of requests that the browser has to make to the web server for loading a page.
Related
I'm going crazy here, have tried almost everything (including the things mentioned in the two other older threads about this topic). I simply want to add images instead of the arrows.
Here is my code:
.fp-controlArrow {
position: absolute;
width: auto;
height: 200px;
z-index: 4;
top: 50%;
cursor: pointer;
}
.fp-controlArrow.fp-prev {
left: 15px;
background: url(../images/left.png) no-repeat;
}
.fp-controlArrow.fp-next {
right: 15px;
border-width: 38.5px 0 38.5px 34px;
border-color: transparent transparent transparent #fff;
}
Anybody who have got this to work? This should be easy but it isn't...
I've tried a number of solutions but with no success.
Here is a simplified page demonstrating the problem.
I fixed it.
I found the solution after finding a similar problem with a page using html5 columns. The modals would work in the first column but not in the second. I found that the modal static position overlapped the position of the link-image in the second column though it was not visible.
In the original problem I changed the css from:
#modal1{
position: absolute;
margin-left: -20%;
padding: 20px;
opacity: 0;
width: 40%;
top: 100px;
left: 50%;
}
#modal1:target {
opacity: 1;
}
To this:
#modal1{
position: absolute;
margin-left: -20%;
padding: 20px;
opacity: 0;
width: 40%;
top: 100px;
left: -1000px;
}
#modal1:target{
position: absolute;
margin-left: -20%;
padding: 20px;
opacity: 1;
width: 40%;
top: 100px;
left: 50%;
}
Now the modal static position is well off the page and is no longer where it can be clicked.
I realize this was a noobie mess-up but I finally got it.
Roy
I have 3 divs inside my div#all (simple html). Left - Main - Right.
Left & Right have just a background image (their content won't change).
Main div will have all my text etc.
Option 1: I need to have the left/right divs to expand their height (so my image background gets repeated) to reach the height that my divMain may have.
Option 2: I can do position:fixed my Left/Right divs as well so they stay in place when I scroll. My issue on this plan is that I cannot position/float my right div at the desired place.
Any working option is ok with me.
css code:
body{
margin: 0 auto;
padding: 0;
width: 100%;
background-color: #fff;
overflow-y: auto; overflow-x: auto;
}
#all{
position: absolute;
top: 0; left: 50%;
height: 100%; width: 1366px;
margin-left: -683px;
}
#temp-left{
position: absolute;
top: 0; left: 0;
height: 100%; width: 183px;
background: url(image/bg-lft.jpg) repeat;
}
#temp-right{
position: absolute;
top: 0; right: 0;
height: 100%; width: 183px;
background: url(image/bg-rgt.jpg) repeat;
}
#main{
position: absolute;
top: 0px; left: 50%;
height: 100%; width: 960px;
padding: 10px;
margin-left: -500px;
text-align: justify;
}
If I properly understand your question i suggest you to use jquery
You can try this out.
$(document).ready(function() {
// Check if body height or width is higher than window height and width:)
if (($("body").height() > $(window).height())||($("body").width() > $(window).width())) {
$('body').css('background-image', 'url(image/bg-lft.jpg) repeat;');
}
else
$('body').css('background-image', 'url(image/bg-lft.jpg) no-repeat;');
});
I'm developing a mobile website that has essentially three divs a header, content, and footer. I want the header and footer to be fixed and the content scrollable if there is over flow. Right now my css is:
#header{
top: 0;
left: 0;
height: 8%;
width: 100%;
position: fixed;
text-align: center;
text-height:font-size;
}
#content{
top: 8%;
left: 0;
bottom: 15%;
width: 100%;
position: fixed;
margin: 0;
padding: 0;
overflow: auto;
z-index: 0;
}
#footer{
height: 15%;
width: 100%;
position: fixed;
text-align:center;
bottom: 0;
left: 0;
z-index: 1;
}
This works perfectly, however in the content I have some text fields and on a mobile device when the keyboard pops up the header and footer also get pushed up making the content field too small. Is there anyway to keep them fixed but not have them get pushed up when entering in text?
You could just hide the footer using JavaScript every time a textfield gains focus, since the fact that the website gets smaller is hard-coded in the operating system (which is responsible for showing the keyboard)
This can be done using jQuery, or for mobile even better (because smaller): zepto.js
Hope that helps
#content{
top: 8%;
left: 0;
bottom: 15%;
**width: 100%;**
position: fixed;
margin: 0;
padding: 0;
overflow: auto;
z-index: 0;
}
Change this highlighted text into px value.
% values adjust the object based on your browser size.
in my website wordpress i'm using the plugin "Advanced Responsive Video Embedder" to incorporate vídeos.
It's cool but i'm having a little problem since i added to the site an ad page that appears when a visitor enters the site.
It happens that in firefox and opera the ad is in front of the video embed by the plugin so it's cool.
However, in chrome, safari and internet explorer the video embed appears on the front of the ad.
Anyone knows how can i solve this? Is this a problem of the plugin css?
.arve-thumbsize {
width: <?php echo $thumb_width_px; ?>;
height: <?php echo $thumb_height_px; ?>;
}
.arve-embed-container {
margin-left: -5px;
margin-top: 10px;
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
margin-bottom: 10px;
}
* html .arve-embed-container {
margin-bottom: 45px;
margin-bot\tom: 0;
}
.arce-embed-container div,
.arve-embed-container iframe,
.arve-embed-container object,
.arve-embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 97%;
height: 98%;
}
.arve-thumb-wrapper {
position: relative;
z-index: 10;
margin-bottom: 20px;
}
.arve-nothumb-link {
display: block;
z-index: 20;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.arve-thumb-thumb {
z-index: 15;
}
.arve-thumb-play {
position: absolute;
z-index: 20;
opacity: 0.7;
filter: alpha(opacity=70);
width: 40px;
height: 37px;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -19px;
}
.arve-hidden {
display: none;
}
.arve-hidden-obj {
width: 100%;
height: 100%;
}
Since it works in some browsers i really have no idea what it could be.
Thanks in advance!
Remove the z-index on:
.arve-embed-container iframe, .arve-embed-container object, .arve-embed-container embed
I've used Firebug to pinpoint the culprit. Due to my knowledge I could guess that this was probably a z-index problem. Then I checked all the divs to see if they had a z-index. I found the div I posted above which had a z-index of 5000 on it. I've overridden that by using z-index: 0!important;.