I would like to have my social profile buttons scroll just like its done on 9gag. Their 2 ads on the right hand side stay in a fixed position once you scroll to a certain point. I would like to do the same. Can someone help me with this?
Thanks alot guys.
You could add position: fixed to the element once the scroll offset reached a certain point.
Define this CSS then add id="media_icons" to the element you want fixed. Change the style according to your needs.
#media_icons {
clear: both;
height: 34px;
margin-right: 33px;
margin-top: 32px;
position: fixed;
right: 0;
top: 0;
width: 148px;
}
Related
I'm trying to align the elements of my header like on the first image below.
Unfortunately I'm not getting the expected result. The female sign and the image next to it stay stuck to the top of the page.
I've tried to apply a margin-top but the issue if I do that is that it pushes everything else down.
Your help would be much appreciated.
I haven't been able to reproduce this on JSFfiddle, so here is the live link.
Many thanks,
This is what I want (female sign aligned just above the text):
This is what I have:
Try setting position to absolute and then top to 200px I guess.
use position: relative; and change top value. Replace this classes:
.female-sign {
position: relative;
top: 263px;
left: 65px;
}
and
.special-femmes {
position: relative;
top: 230px;
left: 65px;
}
I am trying to create a footer that is responsive and sticks to the bottom right of a page but can't get it to work consistently when a absolutely positioned div is on the same page.
The code I am using can be seen at:
http://192.241.203.146/sample-page/
I have tried:
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 10px;
margin-top: 40px;
As well as:
float: right;
bottom: 0;
right: 0;
margin-bottom: 40px;
margin-top: 40px;
To get it to work, but it does not respect the absolutely positioned content on the page when it is resized down to mobile. It clashes like so:
I know that using position:absolute means that the div is removed from the flow of objects but I need to use it on the element in the middle of the page to avoid the objects jumping around when I use jQuery fades.
I suspect this is because it is not inside a span or row as per the bootstrap base I am using. Is that the problem?
I'm at a loss here - any guidance appreciated :)
Your problem is that the div is normal to the page, but his position is absolute. Inspecting your code i saw this:
if you want the footer is always visible in the bottom, you can wrap the footer to the div which width will be 100% of the width of the page. Like this:
div#footer_container{
min-width: 100%;
min-height: 100px;
position: relative;
}
div#footer_container div#footer{
position: absolute;
right: 0px;
bottom: 0px;
}
Result:
Red - main container of your page, Green - container of your footer (its always will be after the main container), Blue - your footer.
P.S. sorry for my english :)
I think I've found it!
Try this:
.main {
padding-bottom: 140px;
}
It works for me even if I reduce the width of the browser.
I have a simple question, and want to know if you can solve it for me..
Anyway, the question is, how do i place a box in the right side of the page, that wont affect any of the appearence of the css that is currently on the page :)
Use position: absolute;. To define the position, you can use the top, left, right, bottom properties to specify the respective offsets. In your case, you probably want right:
.rightbar {
position: absolute;
top: 0px; /*how many pixels from top*/
right: 25px; /*how many pixels from right*/
width: 50px;
height: 150px;
}
If you want your div to stay visible even after you scroll, use position: fixed;.
Little demo: little link.
OK, So i've used to common "push" method with the footer to ensure that it stays to the bottom of the page... However, there is now an unnecessary gap between the container and the footer which means that there is always a scroll down, even if there is no content to push it down. I would hope that if there was no content, the footer would just stick nicely to the bottom of the website.
Has anyone else found this and been able to tackle it?
Thanks in advance :)
This can be done with just a few lines of CSS. Assuming that you are using the <footer> element, apply the following styling properties:
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
And that's it!
I use
#footer {
position: relative;
left: 0px;
bottom: 0px;
height: 150px; // whatever height you want
width: 100%;
}
works for me
I'm looking for a trick to create a "fixed" HTML object on the browser screen using CSS. I want it to stay in the same position all the time, even when the user scrolls through the document. I'm not sure what the proper term for this is.
It would be like the chat button on Facebook or the Feedback button that is on some websites that follows you throughout the page.
In my situation, I want to keep a div at the absolute bottom-right corner of the screen at all times. Sample CSS appreciated.
You may be looking for position: fixed.
Works everywhere except IE6 and many mobile devices.
The easiest way is to use position: fixed:
.element {
position: fixed;
bottom: 0;
right: 0;
}
http://www.w3.org/TR/CSS21/visuren.html#choose-position
(note that position fixed is buggy / doesn't work on ios and android browsers)
Make sure your content is kept in a div, say divfix.
<div id="divfix">Your Code goes here</div>
CSS :
#divfix {
bottom: 0;
right: 0;
position: fixed;
z-index: 3000;
}
Hope ,It will help you..
position: sticky;
The sticky element sticks on top of the page (top: 0) when you reach its scroll position.
See example:
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
The tweak:
position:fixed;
works, but it breaks certain options....for example a scrollable menu that is tagged with a fixed position will not expand with the browser window anymore...wish there was another way to pin something on top/always visible
position: fixed;
Will make this happen.
It handles like position:absolute; with the exception that it will scroll with the window as the user scrolls down the content.
Try this one:
p.pos_fixed {
position:fixed;
top:30px;
right:5px;
}
In order to keep floating text in the same location over an image when changing browser zoom, I used this CSS:
position: absolute;
margin-top: -18%
I think the % instead of fixed pixels is what does it. Cheers!
#fixedbutton {
position: fixed;
bottom: 0px;
right: 0px;
z-index: 1000;
}
The z-index is added to overshadow any element with a greater property you might not know about.
You can do like this:
#mydiv {
position: fixed;
height: 30px;
top: 0;
left: 0;
width: 100%;
}
This will create a div, that will be fixed on top of your screen. - fixed
HTML
<div id="fixedbtn"><button type="button" value="Delete"></button></div>
CSS
#fixedbtn{
position: fixed;
margin: 0px 10px 0px 10px;
width: 10%;
}
You can try this code:
<div style="top: 0; position: sticky;">your code</div>
or you can add class/id like this:
html:
<div class="FixedPosition">your code</div>
css:
.FixedPosition{
position: sticky;
top: 0;
}
you may change the "top" if you want it to not be on top of the screen and don't delete the top else it won't work.
I hope this help : )