I have a fixed element that is a small menu with a few links that will follow you on the page.
I am using Squarespace and make a new widget with the links. In the CSS I put this code:
#moduleContent18520661 {
position:fixed !important;
margin: auto;
top:700px;
left:400px;
cursor:hand;
background:#efefef;
border:1px solid #ffcc00;
width:480px;
z-index:100;
}
It works perfect only when I align it on my computer. When I look on my laptop it's too far down.
How can I pin the element to always be on the bottom of the screen no matter what size the screen is?
If you're using position: fixed you can explicitly position to the bottom, or any other side, of the screen:
#moduleContent18520661 {
position: fixed;
bottom: 0; /* the bottom edge of the element will
sit against the bottom edge of the window */
/* other stuff */
}
Just remove the top declaration and replace with the distance you want the bottom edge of the element to to maintain from the bottom edge of the window.
Also, cursor should either be cursor: pointer; or should have cursor: pointer; follow the cursor: hand;, as that's a purely IE 6 (if I remember correctly) proprietary CSS property value.
Related
I cannot get the orange background behind DONATE at the bottom of my page right to stay put in larger browser windows. I have tried every css trick I can find. Please help!
Thanks,
Janet
http://dev30.ncld.org/
You missed this trick then:
#footer .footer-col-orange {
margin-left: 790px; // adjust accordingly
left: initial;
}
This will keep your donate box relative to the footer element, and not to the left page border and will work on all displays.
The other option is to set the position of #footer .padding element to relative.
There you go :
#footer .padding {
/* padding: 15px 20px 0px 100px; */
width: 1010px;
/* position: absolute; */
margin-left: auto;
margin-right: auto;
background-color: #0A6DA1;
padding-top: 15px;
position: relative; /* First part */
}
#footer .footer-col-orange {
position: absolute;
/* background-position: right; */
right: -2em; /* second part, feel free to put what you want */
}
When you set a position: absolute; to an element, it will pull it out of the HTML flow, and you can give it coordinates (top, left, right; bottom). This coordinates are relative to the first parent with a relative position. As you didn't set any parent element to be the relative, you positioned your element relative to the document.
Your orange box is current positioned absolutely, as you know. This means that is is relative to the browser window. The left edge of that window, because you have `left:900px'. What we want is for it to be relative to the footer, which is centered.
To do this, we need to set the parent container of the orange box to position:relative. This will cause the orange box's position to depend on it's parent instead of the window.
#footer .padding {
position:relative;
}
Then, it's just a matter of setting the yellow box to the right position. Given that it's on the right side, I'd delete the left value entirely and set right:-45px instead.
#footer .footer-col-orange {
left:auto;
right:-45px
}
With these, it'll line up perfectly with the edge of the white box above:
You are going to run into an issue with inline styling. You not only have your styles applied by CSS, they are duplicated inline. You're going to either need to set !important in the new CSS that I've provided (not best practice), or better, remove the inline styling. If you provide some more information about how your side is built (WordPress, HTML template, etc) I can help with removing the inline styling.
I have a custom webkit scrollbar like this:
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: #999 !important;
}
So it renders a grey custom scrollbar instead of the standard one. However, it is stuck to the right side of the page. I know I can change this by adding a margin, padding or border to my body but I am using fullscreen (on backgrounds) images. So when I try this all the images are affected by this too, which I do not want. So I tried to position the scrollbar but this does not work (as it is not an element but a user agent property...
So I'm looking for a way (without using another plugin) to customize the toolbar so that it is offset from the side.
Or, if possible that I can make the scrollbar offset in a div.
Secondly, I'm looking for a way that I can make the "track" of the scrollbar transparet. So only a handle.
Thanks in advance!
If you are still looking for for the answer (or somebody else is, like I was) - here is a definitive article about webkit scrollbars.
Answering Your first question - I'd suggest that you put all your scrollable content in a div with 100% height and 90% width - the 10% left on the right would be your offset. Like that:
.superDiv{
height:100%;
width:90%;
position:fixed;
}
body{ overflow: hidden }
The second question - you're looking for
::-webkit-scrollbar-track-piece {
background:transparent;
}
But as Apple people are pushing for no-scrollbar web browsing, only the properties set by CSS are visible, so you don't have to change the track-piece.
Clever solution I found recently was to put the border on the right hand side of the screen / div that contains scrollbar:
<div class="yourdiv">
border-right: 5px solid #(background_color);
</div>
An easy way to control the position of a custom scrollbar is to set the scrolling element (body?) using definitive positioning. You'll also need to set html to overflow:auto;
To make the thumb transparent, use a RGBa value for declaring the color. In this case I used 0,0,0,0.4 (red,green,blue,alpha). RGBa is not supported in every browser, Chris Coyier has a good table of who supports it here: http://css-tricks.com/rgba-browser-support/
If all you want to show is the thumb than also consider hiding the other elements of the scrollbar: resizer, scrollbar-button, and scrollbar-corner.
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 5px;
right: 20px;
overflow: scroll;
}
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner { display: none; }
Check out the working demo at http://jsfiddle.net/Buttonpresser/G53JQ/
I have this property with multiple background images and their respective positions:
#my_div {
background-image:url("..."), url("..."), url("...");
background-position:right bottom, right bottom, right 15px top 17px;
}
The positioning for the third image works fine on FF, IE10, Chrome.. but unfortunately not on Safari Mobile. It renders the right and top thing but not the offsets (15px for right and 17px for top).. I couldn't find any reference on this. How would you deal with this? I'd avoid having to modify the image manually adding transparent borders to make the offset.
Mobile Safari (as well as the Android browser) doesn't support the four-value syntax yet. (see the MDN article on background-position).
One possible workaround would be to extract the background image which should have the offset and put it in a pseudo element that has the corresponding offsets.
#my_div:before{
content: '';
display: block;
position: absolute;
z-index: -1;
height: 50px; /* Height of your image / parent div */
width: 50px; /* Width of your image / parent div */
/* Your offset */
top: 17px;
right: 15px;
background-image: url("...");
background-position: right top;
}
For easier understanding I created a jsFiddle: http://jsfiddle.net/pKWvp/1/
You could also try using the css calc function: http://briantree.se/quick-tip-02-use-css-calc-properly-position-background-images/
It's might be easier/cleaner than using pseudo elements.
This is similar to Google Chrome tabs style taken from Soda Theme (Sublime Text 2):
You see how it has 3 parts to it: rising edge, 2-3px flat middle, falling edge.
Q: How would I, in CSS, "repeat" the middle part and stretch the tab to fit the size of the string?
Image Dimensions: 42 x 28.
If it helps here is the snippet from the .sublime-theme file:
// Tab element
{
"class": "tab_control",
"content_margin": [12, 3, 12, 3],
"max_margin_trim": 0,
"hit_test_level": 0.0,
"layer0.texture": "Theme - Soda/Soda Dark/tab-inactive.png",
"layer0.inner_margin": [5, 5],
"layer0.opacity": 1.0
},
There are more than a few different ways to accomplish this affect, and it really depends on your preference. As you properly postulated, you need to think of this as 3 different parts. As such, the easiest way would be to split it up into 3 different images.
The solution also depends on what your HTML markup looks like. For example, if you only have:
<a class="tab" href="#">My Tab</a>
Then you have only one element you can style to make this works (which makes it much harder).
However, if you have a wrapping element around the tab:
<li class="tab">My Tab</li>
You can then use the LI element to help achieve the desired result.
Single Element
In my first example, you only had the single "anchor" element to work with. Examining your image you want to use for the tab, I can see that it has some beveling, and isn't a simple flat color, or a flat color with a simple border. That means we can't achieve that effect with straight CSS, so we will need CSS to tile the image.
You have two options.
Option 1
Split the image into two images, a left and right side, by dividing it right down the middle. Next, in your image editing application, extend your canvas out to the right by, let's say, 200 pixels (or whatever you think the max width of a tab will ever be). Finally, select the farthest right edge (this should be the middle of the tab) and stretch it horizontally all the way to the right border.
What you should end up with is the sloped left side, then an ~200pixel "middle area".
Now you have two images we will call tab-left-side.png and tab-right-side.png. With these two images, you can achieve the tab affect with the following CSS:
.tab {
background: url(tab-left-side.png) no-repeat 0 0;
overflow: hidden;
padding-left: 10px; /* width of the left edge of the tab, before the middle section begins. If you want more horizontal tabbing, add it to this value */
}
.tab:after {
content: ' ';
overflow: hidden;
width: 10px; /* width of the right edge of the tab */
background: url(tab-right-side.png) no-repeat 0 0;
}
Option 2
This option requires splitting your image into three images. You will have tab-left-side.png, tab-middle.png, and tab-right-side.png. As you can guess, you should split the image up into these appropriately.
Now, you can use the CSS:
.tab {
background: url(../images/tab-middle.png) repeat-x 0 0;
overflow: hidden;
color: white;
float: left;
margin: 0 10px; /* must be same as side widths */
}
.tab:after {
content: '.';
overflow: hidden;
text-indent: -999px;
float: right;
width: 17px; /* width of the right edge of the tab */
background: url(../images/tab-right-side.png) no-repeat 0 0;
}
.tab:before {
content: '.';
text-indent: -999px;
overflow: hidden;
float: left;
background: url(../images/tab-left-side.png) no-repeat 0 0;
width: 17px; /* width of the left edge of the tab */
}
Double Element
The double element is accomplished exactly the same way as Option 1 of the Single Element example, except that you don't have to use the pseudo-class selectors. If you are writing code that has to support older browsers that don't support pseudo-class selectors (or at least :before and :after) then this is your only option.
Again, you split the two images up into tab-left-side.png and tab-right-side.png.
Then, your CSS:
LI.tab {
background: url(tab-left-side.png) no-repeat 0 0;
overflow: hidden;
padding-left: 10px; /* width of the left edge of the tab, before the middle section begins. If you want more horizontal tabbing, add it to this value */
}
LI.tab A {
content: ' ';
overflow: hidden;
width: 10px; /* width of the right edge of the tab */
background: url(tab-right-side.png) no-repeat 0 0;
}
It's virtually the same CSS as was in the Option 1 example, except we changed the selectors.
Another way to achieve a similar result is to use multiple backgrounds and background sizing:
li.tab a {
/* using inline-block for simplicity you could easily switch to
display block and floats. */
display: inline-block;
overflow: hidden;
color: #fff;
padding: 0px 20px;
/* I'm using 75% sizing on my middle image which means my min and
max calculations work out as follows. This can change depening
on the images you use. */
min-width: 80px;
max-width: 160px;
/* height is obviously dependent on many things, I'm using line-height
to center my text but there are other ways. */
height: 26px;
line-height: 30px;
text-align: center;
/* depending on how your images are designed you may wish to have
the left and right images layered on top of the middle. To do this
just reverse the order of the background images. */
background:
url(middle.png) center bottom / 75% 26px no-repeat,
url(left.png) left bottom no-repeat,
url(right.png) right bottom no-repeat
;
}
This does have some prerequisites however:
This relies on relatively new css abilities, and as such wont work on older browsers.
You have to define a minimum and maximum width that your tabs can be.
You have to use two or three images, this wont work with a spritesheet.
You need a middle image which has to be rectangluar.
putting image always in center page(E.x image loading for ajax call), even when move scroll. how is it?
For most browsers, you can use position:fixed
img.centered {
position:fixed;
left: 50%;
top: 50%;
/*
if, for instance, the image is 64x64 pixels,
then "move" it half its width/height to the
top/left by using negative margins
*/
margin-left: -32px;
margin-top: -32px;
}
If the image was, for instance, 40x30 pixels, you'd set margin-left:-20px; margin-top:-15px instead.
Here's a jsfiddle example: http://jsfiddle.net/WnSnj/1/
Please note that position:fixed doesn't work exactly the same in all browsers (though it's ok in all the modern ones). See: http://www.quirksmode.org/css/position.html
<style>
.CenterScreen{
position:fixed;
/*element can move on the screen (only screen, not page)*/
left:50%;top:50%;
/*set the top left corner of the element on the center of the screen*/
transform:translate(-50%,-50%);}
/*reposition element center with screen center*/
z-index:10000;
/*actually, this number is the count of the elements of page plus 1 :)*/
/*if you need that holds the element top of the others. */
</style>
If you add this class your element, it will be always center of the screen.
For example:
Hello world
This might help you : http://skfox.com/2008/04/28/jquery-example-ajax-activity-indicator/
Put the image in a div tag with some class name (centeredImage) and use the following css
div.centeredImage {
margin: 0px auto;
position: fixed;
top: 100px;//whatever you want to set top;
}