I am trying to set elements stay on the edge of left and right hand side of the screen no matter what device or screen size is.
I am using bootstrap and have something like
<a href='#' id='prev' class='btn btn-primary'>left button</a>
<a href='#' id='next' class='btn btn-primary'>right button</a>
My css is like
#prev{
position: fixed;
top: 50%;
left: 0%;
}
#next{
position: fixed;
top: 50%;
left: 95%;
}
I want something like
left button(edge of screen) right button(edge of screen)
Left button seems fine but my problem is right button.
My css only works for certain screen size but not all. Can someone help me to solve this issue? Thanks a lot!
Try setting the right property:
#prev{
position: fixed;
top: 50%;
left: 0;
}
#next{
position: fixed;
top: 50%;
right: 0;
}
JS Fiddle: http://jsfiddle.net/6gw3K/
Use right: 0 for #next
#prev{
position: fixed;
top: 50%;
left: 0;
}
#next{
position: fixed;
top: 50%;
right: 0;
}
Assuming that position fixed is not a hard requirement, you might look into using floating. E.g.:
#pref{ float:left; }
#next{ float: right; }
See this jsfiddle.
Related
I have a position: fixed element. It has some top and left properties but it was not visible in the screen. After some debugging I found that it was positioned way off than it should be. So I set top: 0 and left: 0 and now that element was where I wanted it to be (near middle bottom) instead of being in the top-left of the screen as it should be.
Why is this happening? One thing is that it's parent container also has position fixed. I'll have a snippet below
.container {
position: fixed;
// position in the center of screen
left: 0;
right: 0;
top: 400px;
margin-left: auto;
margin-right: auto;
}
.child {
position: fixed;
left: 200px;
top: 400px;
}
<div class="container">
<div class="child">Test</div>
</div>
The reason there is a fixed component inside another fixed is that one is container and the other is kind of a tooltip so it has to be that way.
left and top properties should have some units associated with it, e.g. pixels. Try the following:
.container {
position: fixed;
// position in the center of screen
left: 0;
right: 0;
top: 400px;
margin-left: auto;
margin-right: auto;
}
.child {
position: fixed;
left: 200px;
top: 400px;
}
Got the answer. It's a bug in chrome where a child with fixed position doesn't work if any parent has transform: translate css.
Duplicate of this question
I need to place a button in the bottom right corner of the page and make it static. It needs to keep in its place in case of scroll.
I have tried to place it vía css but i don't have enough level.
<input type="button" onclick="delegar.php" id="delegar" value="Delegar">
#delegar {
position:relative;
rigth: 100%;
bottom: 100%;
}
Change your CSS
#delegar {
position:fixed;
right: 10px;
bottom: 10px;
}
You can use position fixed to do such task.It will keep your button at bottom .
#delegar {
position:fixed;
rigth: 0;
bottom: 0;
}
<div class="container-bottom">
<input type="button" onclick="delegar.php" id="delegar" value="Delegar">
</div>
.container-bottom { position: relative; }
#delegar {
position:relative;
right: 10px;
bottom: 10px;
}
You need to set the position of element to fixed. see example below:
.fixed {
position: fixed;
bottom: 10px;
right: 10px;
}
So I'm having some difficulties making a list of images into working links. This is an example how they are addressed in my HTML:
<img src="img/plnt1_.png">
and then how they are referred to in my CSS:
a.plant1 {
position: absolute;
z-index: 1;
left: -20%;
width: 50%;
top: -20%;
}
now, the problem is, when i put the 'a' in front of my CSS part, my image disappears... but when I do it without an 'a', there is no link.
Try this
.plant1 {
position: absolute;
z-index: 1;
left: -20%;
width: 50%;
top: -20%;
}
The mistake here is the positioning:
a.plant1 {
position: absolute;
z-index: 1;
left: -20%;
width: 50%;
top: -20%;
}
positions your link outside of your viewport (or at least outside of the parent element which may hide overflowing children), I created a fiddle where you can see that:
http://jsfiddle.net/3ajrw1yg/
So, you need to reconsider what it is that you want to achieve position-wise and change your css accordingly.
You're not giving it height, when you have a position absolute, you must have your sizes defined, try this:
a.plant1 {
position: absolute;
z-index: 1;
left: -20%;
top: -20%;
width: 50%;
height: 100px;
}
and you should also close your IMG tag if you're not using HTML5...
<a href="plantvb1.html" class="plant1">
<img src="img/plnt1_.png" />
</a>
I have 3 buttons that I need to stay fixed in the lower right corner of the page.
Example.
But when I set position:fixed , it goes straight up to the top (which is also fixed).
How can I make them stay down there, yet when I scroll up to follow me?
Thank you!
Add position: fixed; bottom: 0; ,and remove the top:0;,the bottom property sets the bottom edge of an element.
Try this code:
DEMO
#buton{text-align:right;
height: 100px;
width: 100%;
z-index: 100;
position: fixed;
bottom: 0;
}
Remove
top:0
and set
bottom:0; position: fixed; right: 0;
#buton {
text-align: right;
height: 100px;
width: 100%;
z-index: 100;
position: fixed;
bottom: 0;
right: 0;
}
See Fiddle Demo
Wrap everything in a container and give it position relative
make #buton absolute with bottom:0
keep myButton independent of any position
working demo
html,body{
height:100%; /* important */
}
#conatiner {
position: relative;/* added*/
height:100%;/* important */
}
#buton {
text-align:right;
width: 100%;
z-index: 100;
position: absolute;/* added*/
bottom: 0;
}
The problem is with top:0; Since you need the buttons to stay fixed in the lower right corner of the page you should use bottom: 0;position: fixed;
Update the below part
#buton{
text-align:right;
height: 100px;
top: 0;
width: 100%;
z-index: 100;
}
to the one given below,
#buton{
text-align:right;
height: 100px;
bottom:0;
position: fixed;
width: 100%;
z-index: 100;
}
It will work like a charm.
Have made some changes, see the demo..
UPDATE :
See demo
I am trying to have my facebook like button stay in the top left corner and as the user scrolls down it follows them... What is wrong with my code? It shows but as I scroll down it does not move with the scroll. Tested locally on both of the latest versions safari and firefox. Please help!
topleft{
position: fixed;
top: 0;
left: 0;
}
<top> FACEBOOK "LIKE BUTTON" IFRAME CODE HERE </top>
You aren't selecting your like button properly. You need to add a class attribute for css selection.
Try something like
<div class="facebook">FACEBOOK IFRAME</div>
Notice the ".facebook" rather than just "facebook".
.facebook {
position: fixed;
top: 0;
left: 0;
}
There's no top tag in HTML.
CSS class name selectors should be preceded by a . (period).
topleft{
position: fixed;
top: 0;
left: 0;
}
should be
.topleft{
position: fixed;
top: 0;
left: 0;
}
Assigning the style you've created to the iframe should work.
<iframe class="topleft" ...>
...
</iframe>
JSFiddle
problem with this could be
for topleft class
.topleft{
position: fixed;
top: 0;
left: 0;
}
for topleft id
#topleft{
position: fixed;
top: 0;
left: 0;
}
otherwise it should work.