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.
Related
I have two images on the background of the website I am working on, now for me on a 15" screen the position of these look fine, just behind and right/left of the content container. But on a big widescreen (or just other much larger screen sizes than mine) they end up being further away from the content container and look like they are on their own.
They are percentage based but, 25% from the left/right on my screen is different to someone with a widescreen. I need them in the same position regardless. X% from the center is probably more like it. Anyone know a suitable option? I've attached some code of what the images are using right now.
http://bit.ly/1aNgkfa
CSS for the background image of the herbs on the homepage (top-left)
.herb-bg-img {
margin-left: -15%;
margin-top: 5%;
position: absolute;
float: left;
z-index: -2;
}
CSS for the background image of the peppers on the homepage (bottom-right)
.peppers-bg-img-index {
float: right;
position: absolute;
margin-top: -30%;
margin-left: 880px;
z-index: -2;
}
Use the left property along with a minus margin-left to align as needed:
.herb-bg-img {
position: absolute;
left: 50%;
margin-left: -600px; // Change as needed
margin-top: 5%;
z-index: -2;
}
Same with the right-hand image, only use a positive margin-left instead.
This should stay the same regardless of screen width.
You're positioning these two images absolutely. They should be absolutely positioned in relation to a parent element with position: relative, however. Right now they are in relation to the page, which will continue to cause you problems.
I'd recommend adding position: relative to your .container elements.
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 dont know how to phrase this question correctly, I would like to create something like the logo on the upper right corner of this website: http://www.afterthecircle.com/
When the user scrolls down, the logo moves with the scrolling movement and always stays visible to the user.
Any suggestions?
Use position: fixed along with top or bottom and left or right:
.logo {
position: fixed;
bottom: 1em;
right: 1em;
}
As brbcoding said, you are looking for the CSS property position with the value fixed. With the properties top, bottom, left, and right, you can then position the element. An example:
CSS
.fixedElement {
position: fixed;
top: 100px;
left: 100px;
}
HTML
<div class=fixedElement>Hey!</div>
Fixed positioning will allow you to scroll and keep an item in it's original position.
#fixed-thing {
position: fixed;
top: 0;
right: 0;
}
DEMO
I added the famous "Fork me on Github" ribbon to one of my projects. The tag looks like this:
<a href="https://github.com/Nurdok/htmlify">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
alt="Fork me on GitHub">
</a>
It looks great, but some of the divs on my webpage have minimum length, so when the window is small, one has to horizontally scroll the screen. When that happens, I want the "Fork me on Github" link to stick to the top-right side of the page, not the window. This is how it looks right now:
Scrolled all the way to the left:
Scrolled all the way to the right:
It seems that the ribbon is placed on the top-right side of the initial window, and stays static.
What I want is for it to be out of sight in the first case and top-right in the second case (when I scroll to the right).
Edit: Thanks for the quick answers, people. However, most of the answers made the ribbon scroll horizontally and vertically with the page. What I want is for it to be fixed on the top-right side of the page (not the browser view), and only be seen if I scroll to where its position is.
You can do a little trick and put your image into a div which has minimal-width.
<div style="position:relative;min-width:960px">
<img src="..." style="position: absolute;right:0;top:0" />
</div>
and put that div at the beginning of <body> section.
position:relative makes that all children of that elements that have position:absolute are positioned absolute according to that div, not whole page. When viewport is bigger than min-width, the div is the same width as the viewport. When the viewport is smaller, the div will have the min-width and the image stays at the corner of the div.
Two alternatives
Sticking to the Viewport: To stick it to the viewport you should position your element "fixed" instead of "absolute"
<img style="position: fixed; top: 0; right: 0; border: 0;"
Sticking to a Container: And if you want it to be sticked to a container (so youn dont see it when you browse left) use absolute but do that container position:relative so its containing block is targeted
If you dont want to see the image when scrolling left then use a explicit width for this container I am talking about
Here is a JSFiddle example.
I used a squared div instead of an image. CSS code as follows:
#container {
width: 700px;
height: 700px;
background: #55ff90;
position: relative;
}
#image {
width: 70px;
height: 60px;
background: #ffff90;
position: absolute;
top: 0px;
right: 0px;
}
In case it's supposed to stick to the right top on horizontal scroll only, you can't accomplish this with basic CSS. Your requirement is stick to the right top for horizontal scroll but not vertical scroll. The first part of the requirement can be accomplished using position: fixed; though this breaks the second part.
How about always sticking to the right top of the website using a relative float: Fiddle
<div id='container'>
<div id='sticky'>x</div>
</div>
#sticky {
width: 100px;
height: 100px;
background: red;
float: right;
}
#container {
width: 100%;
height: 200px;
background: blue;
}
You should use float:right, adjusting margin if you need, e.g.: margin-right: 5px. Cheers :)
If I understand what you want correctly, you'd like for the image to stick to the top corner of the window UNTIL the window gets to a certain size (horizontally) and then stick.
If so, here is a plausible solution:
body{
min-width:1000px; /* or whatever you need it to be */
}
#ribbon{
position:relative;
float:right;
}
DEMO FIDDLE
DEMO FULLSCREEN
You can also use a container div with min-width, your choice.
Change position: absolute; to position: fixed.
As side note, put the style on the a instead of the image and add some z-index to make sure it stays on top of everything else:
<a href="https://github.com/Nurdok/htmlify" style="position: fixed; top: 0; right: 0; border: 0; z-index: 999; display: block;">
<img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
alt="Fork me on GitHub">
</a>
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;
}