is there a way in CSS to float images on top of your entire document without disrupting the html?
similar to when you click the cornify button here but without the button.
Use this:
.myclass {
position: fixed;
}
You can read about it here.
Related
I have noticed that Facebook and Instagram uses the same way of displaying icons found on the site, which is to add into a single PNG file all the icons and make the styling based on their position?
Please have a look on the Instagram way of doing it.
I understand that in this way, the client will receive only a single image which will be cached and the user performance will increase. But how do they do it?
Thank you for your time!
They do it by making a div or span or whatever, with a background of that image and then change the background position.
Example
.icons {
height:20px;
width: 20px;
background-image: url("path/to/image");
}
.icon1{
background-position: 0 0
}
.icon2{
background-position: 30px 0
}
JSFiddle: https://jsfiddle.net/qxjyycv2/
What you're looking for is Image Sprites.
The div you are displaying the image in (always as a background image) is set to overflow: hidden; while the background position changes to display the correct part of the sprite.
https://www.w3schools.com/css/css_image_sprites.asp
You can use this tool to generate CSS Sprites(one single png image) from your multiple images along with their css:
CSS SPRITE GENERATOR
I have a slider in my WP where pictures get cropped when I resize the window
Here is a picture of a slide when the website is fullscreen and besides is the same slide when I resize the window which we can see is cropped on the right:
click to open the image
(when "inspect element" I can see that element.style section that I didn't manage to find on my css files)
Then on the element inspector I edited the element.style by adding "background-position: center;" and when I resized again the window the picture did exactly what I wanted (it centered as I was resizing):
click to open the image
As I said I tried to find the css sheet where I could edit that but I learned that it could not be done that way and that I had to force the WP to update by adding css lines
I tried theses:
.animate-in[styles] {
background-position: center !important;
}
.animate-out[styles] {
background-position: center !important;
}
but didn't manage to get anything working...
Please help!
You don't find the css sheet because css was generated with javascript.
You can try :
#sequence li {
background-position: center !important;
}
Please at the very least post the url to your webpage so i can play with it. The SS is very low quality.
What you are seeing is known as an inline style, you can overwrite it with the !important tag. The element you are highlighting has an ID that you can target to over write this.
so in your child theme's stylesheet you can write
#widget-kopewidget_sequence_slider-2-sequence_slider-item-208 {
background-position:center !important;
}
This website (click) should look like this website here (click) for the most part. The first link is in BVCommerce cart, the second was the initially designed HTML and CSS. You'll notice on the first link the center content is slightly off center as well as missing the background with the shadow, which is my main issue. (The image that should be showing up is images/bg.png)
There are a few bugs with the first website but I'm really just trying to get this background to show up properly.
First website CSS: justicejewelers.com/css/styles.css
Second Website CSS: justicejewelers.rcmhosting.com/css/styles.css
First Website Image: justicejewelers.com/images/bg.png
Second Website Image: justicejewelers.rcmhosting.com/images/bg.png
UPDATE
I've combined the bar and background gif to save some heartache. But any ideas on how to get the whole center area shifted to the right properly?
I do not know about your main issue, but on the first page I would change the text inside the head. Search robots such as Google will often ignore pages with too much information in the head due to spam protection.
I believe you have something like this in the CSS:
.wrapper { background: url("images/bg2.gif") repeat-y scroll center top transparent; padding-top: 0; }
and it overrides this:
.wrapper {
background: url("../images/bg.png") repeat-y scroll center top transparent;
padding-top: 0;
}
About background error, Firebug shows no-repeat :
/BVModules/Themes/Painted%20Paper/styles/styles.css :
url("../images/bg.png") no-repeat scroll left top transparent;
Also, your #maincontent div is smaller than the width of the background image (you have no padding in the first website (1016 pixels versus 960 pixels)
I guess you should remove /BVModules/Themes/Painted%20Paper/styles/styles.css CSS link
and give a try to a helper like Firebug :)
When using the like or send widget on a Fan Page (no mater if you use iframe tag or fbml for it) the overlay for commenting is positioned always to the right. see
http://twitpic.com/4q7ggi for example.
I cant find a way to get the widget to respect the 520px boundary of the facebook tab.
see http://www.facebook.com/pages/Ludwig-Test/127771653944246?sk=app_101150316644842 for an example.
Anyone an idea how to solve this ?
TIA
Rufinus
Try adding this to your css:
.fb_edge_comment_widget {
margin-left: -350px;
}
This will move comment box to the left, but the little arrow pointing to the button will move too (which you could try to cover with another element). It will only work if you're using XFBML, not an iframe.
Here's an example.
I had to move the little arrow to the bottom, and that's how i did it.
1) Move your popup window to the desired position. Use the !important statement to overwrite default styles.
.fb_edge_comment_widget {
top: -224px !important; left: -246px !important; height: 191px;
background: url(../img/arrow-down.gif) 0 100% no-repeat
}
This style also contains a new arrow image which replaces the bottom line of the popup window. It contains my own new bottom arrow, which is blue (#283E6C) by default and grey inside (#F2F2F2). We can use height to adjust the vertical position and move the background image to the bottom.
The image will look like this:
.
2) Apply overflow: hidden to the span that wraps the iframe, We'll be able to cut off parts of the iframe by applying margin-top in step 3, and replace them with our own.
.fb_edge_comment_widget > span {
height: 184px !important; overflow: hidden; border-top: 1px solid #000;
}
I'm using border-top to create my own upper border, since in step 3 we are cutting of the default border and arrow.
3) Move the iframe up a bit to cut off its upper border and arrow.
.fb_edge_comment_widget > span > iframe {
margin-top: -7px;
}
The result looks like this in my case:
If you're using the XFBML implementation of the Facebook Like button, you can use CSS to re-position the "flyout" menu relative to its original position near the Send button:
The above example using jsFiddle and this CSS:
.fb_edge_comment_widget {
margin-left: -343px;
}
Since the contents of the "flyout" are inside an iframe you won't be able to apply any CSS to it — meaning, moving the triangle indicator to the right side of the "flyout" isn't possible.
Web browsers have tightened security on cross-frame scripting due to spoofing and other hacks, so iframes are treated like separate HTML pages with their own CSS and JavaScript.
For any advanced CSS styling, you would have to inject the Facebook Widget's iframe using DOM Scripting ... and even then it may not work across browsers.
Not a great answer but the only option I have found is to wrap the widget in an absolutely positioned Div to keep it on the left side of the window
To fix it I strongly recommend to put the Facebook widget on the left side of your page. Any other solution could work for a certain period of time, but in the future will fail.
The reason is that Facebook updates its widget frequently.
I have a semi-transparent PNG as a background image for a div that that I'm placing over some links. As a result, the links aren't clickable. Is there a way I can hover and click "through" the div that's on top? (BTW, to position to foreground div I'm using absolute positioning and z-index.)
Thanks!
Mike
Why not put the image in the BACKGROUND (you know, like the background-image property that they built for that reason)? The only way to do that is with some highly advanced scripting which would slow your page down, not worth it. You shouldn't be putting an image over your links.
One option would be to use :hover to bring the z-index of the link tags forward above the PNG.
div.container .links {
z-index:0;
}
div.container .background {
z-index:1;
}
div.container:hover .links {
z-index:2;
}
I haven't tested this but I imagine it will have the links behind the shadow when the container isn't hovering but will pull the links before the shadow when the container is hovering.
First, there shouldn't be any reason why you could not put the foreground transparency within the link itself, and thereby avoid the un-clickable problem. Let's take a simple example:
<img src="xxxx.jpg" alt="this link" />
With the new layer this then becomes:
<img src="xxxx.jpg" alt="this link" /><span class="button_overlay"></span>
(I've added class names to aid with coding illustration.)
The overlay would then be styled and positioned absolutely above the original link content. The overlay code piece is inline and follows the piece that belongs in the background, therefore it will naturally get layered above the prior code without extra coding.
The first thing to do is to apply some formatting properties to the anchor to keep the anchor inline but accept internal absolute-positioned elements. (The -moz- command is to support FireFox 2.)
.layered_button {
display: -moz-inline-block;
display: inline-block;
}
Then position your decorative semi-transparent layer over the button.
.button_overlay {
position: absolute;
left: 0px;
top: 0px;
width: XXpx;
height: XXpx;
background: url('xxxx.png') no-repeat 0px 0px;
_background-image: none;
}
The _background: property is a hack to remove the semi-transparent image from display on Internet Explorer 6 versions since there is an inherent problem with this browsers support of transparent PNG images. A regular GIF image could also be substituted if an alternate image is available for IE6 display.
One additional thing you should do is make sure all the content within the link provides the proper cursor interraction. (Some browsers, especially some Internet Explorer versions, do not provide expected cursor changes for markup within links.)
a:hover * {
cursor: pointer;
}
Your second option might be to use a JavaScript library to provide event handling beyond the basic HTML. The reason I suggest a JavaScript library is that most browsers still do not properly support CSS version 2 methods where you can apply the pseudo-class :hover to elements of the DOM other than anchors. The best way to approach this support for now is using libraries.
I particularly like jQuery and adding this hover property can be as easy as:
$("#button_block .layer_object").hover( // div layer hover action
function(){ }, // MouseOver
function(){ } // MouseOut
).click( // div layer clicked: go to address from original link
function(){ window.location = $("#button_block .layered_button").attr("href"); }
);
Alternately, you can make a click on the div layer act as a click on the link with:
$("#button_block .layer_object").click( // div click = anchor click
function(){ $("#button_block .layered_button").click(); }
);
[The reference to #button_block is assuming the two objects reside in the same wrapper with an ID of button_block, and .layer_object is the independent div placed over the link.]
this problem was solved here: Click through a DIV to underlying elements