I have some text at the bottom of my page saying Built By Me in it. I have this in a fixed position 35px away from the bottom and left of the window so it moves as you scroll. What i actually want is to fix it vertically, so it moves as you scroll up and down and is always 35px away from the bottom of the window, but have it positioned 35px away from the left edge of the page (not screen) so it does not move when you scroll horizontally.I checked out this solution Position element fixed vertically, absolute horizontally but it does not seem to work for me unfortunately. FYI i am currently using the following code to fix it top and bottom which works fine (but also moves when you scroll horizontally):
#sticky {
position: fixed;
bottom: 35px;
left: 35px;
width: 206px;
padding: 0;
font-size: 0.6875em;
}
*html #sticky {
position: absolute;
bottom: 0px;
}
<div id="sticky">
Built by Me
</div>
Thanks so much for any pointers you could give as i can't for the life of me work out how to fix it on only one axis?
Dave
Keep the fixed div.
And have the following javascript code which will take care of horizontal moving.
$(window).scroll(function(){
$('.fixed_div').css('left',-$(window).scrollLeft());
});
I believe the only way to achieve this is to use position: fixed; and calculate the value of left on page load or resize by determining where the left edge of the "page" falls and then adding 35px to it. Let me know if you would like me to elaborate.
Related
I have been trying to set my footer in my web for a while with no luck..
The footer sticking to the bottom of the screen, and if there is scroll-bar, so when I scroll down, it will slide up...
I want it to stick to the bottom but not like position: fixed (if there is scroll-bar, then I don't want to see the footer until I scroll to the bottom).
There is 3 main components in my web (header, content and footer).
This is the footer css:
background: #929191;
border-top: 1px black solid;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
I have tryed changing html and body to "height: 100%" but the only thing that was almost like I wished for, was when it made the height bigger than the screen.
It was like height: 110% (even though the sum of heights was 100%).
I Tryed to reduce it, until I fit but it every little change in the UI make troubles.
I would very appreciate any help..
Sounds like you are looking for <footer>. Keep in mind it won't work in early versions of Internet Explorer. Here is some more information. Let me know if this works out.
Try this on your footer -
.footer {
position: relative;
bottom: -500px; // you can adjust the negative value
}
I have a fixed div on the left side, and only on a Mac, when you downsize the window and scroll to the right for example, the fixed div follows it, but it should stay in place (not show if you scroll).
On windows it's normal.
Any suggestions?
CSS:
.header .quick-access {
background: url("../images/login_search_bg_big.jpg") no-repeat scroll left top transparent;
float: left;
font-family: Arial,Helvetica;
height: 200px;
padding: 0;
position: fixed;
text-align: left;
top: 165px;
width: 117px;
}
Different browsers interpret tags differently sometimes.
You may want to simply change your position type to absolute instead of fixed.
Read here for more information:
Learning CSS positions
You are confusing position:fixed with position:absolute. You should read more about it as mentioned by #Elad CSS Positioning
Fixed means, it will stay at the same position even when you scroll, so your "problem" isn't actually a problem, it does what you coded out there. So it's parent will be your window.
Absolute means, that it's parent is the the whole document html, and not the windows itself. So you should try this if you want it to be sticked to your html document instead of the window. Do not forget to add a position:relative to it's parent tag.
So I have a nav menu that I have floating on the left. I would like to move it more to the right without affecting the container. When I use padding or margin it moves it, when I try
position: absolute;
It just moves the container to the left and minimizes it.
[RESOLVED]
All help is appreciated, still pretty new to html/css.
On Menu
position: absolute;
margin-left: 100px;
You are looking for
position: relative;
left: 100px; /* or however far you want to move it to the right */
Please see this UI sketch image, I have this div in sidebar (black box) on a certain site and as I scroll down or scroll up, I don't want it to hide...I want it to move itself down as I scroll down and move itself up as I scroll back up so that it never hides out. Can you recommend me some jQuery that can get this done? or something else. Please help, thanks.
Don't use jQuery for this please; it's pure CSS.
#MyDiv
{
position: fixed;
top: 10px;
left: 10px;
}
Adjust the exact position to your liking by adjusting top and left. Maybe you want it centered vertically like in the image (if the sketch is accurate in that aspect), in which case you have to deal with all the fun tricks necessary for vertical centering; hopefully in your case something like this would work:
#MyDiv
{
position: fixed;
top: 50%; /* This places the _top_ of the div in the middle of the page. */
left: 10px;
height: 500px;
margin-top: -250px; /* This moves the div upward by half of its height,
thus aligning the middle of the div with the middle
of the page. */
}
I want to positioning a div element (popup) on the center of the screen via CSS. No problem with this.
The problem comes when i scroll the browser and then i click on the element that displays the popup, but this one will be displayed on the top of the page, instead of centering it on the rendered area (scrolled)
The popup must remain stocked to the page and let scrolling over it.
Does anyone know how to do it?
Thanks in advance
This is achievable in JavaScript. You should have the link that brings up the div element do this (jQuery):
var divTop = 75 + $(window).scrollTop(); // places the popup 75px from the top
$('.popup_inner').css({'top':divTop, 'display':block});
Position: fixed is also an option, but I don't believe it is supported by IE6, if that matters to you.
I believe what you want is position:fixed instead of position:absolute.
Taken from jqModal:
.popup{
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 600px;
background-color: #eeeeee;
color: #333333;
padding: 12px;
}