I'm new to stackoverflow and so I apologize in advance for rehashing any issues already addressed here (I'm sure they are, just not sure how the apply to my specific situation).
Anyway here is the site I'm working on - www.betsyandalex2013.com. I would like to have all of the elements fixed in place. I've been playing around with it using Firebug but when I use position: fixed; on say #wrap I can't scroll over to see the rest of the content. Alternately, when I fix the position of #header, the links disappear. Again, I would ideally like to fix all the elements in place and be able to scroll across (and up/down) to see any content when the browser is resized.
I am not sure what you said. But setting:
#header {
position: fixed;
top: 0;
}
It will work: The header will be out of the natural flux of your page and it will be at top of the screen even when you scroll down/up.
PS: To see the effect put content to #wrap element.
Related
I have on my website a sidebar that can come out from the side on mobile. It is a fixed element, which does not play nice on mobile browsers. I want to prevent being able to scroll the body of the document in order to fix this when scrolling on the sidebar div (but I still want them to be able to scroll the sidebar if there is an overflow).
Here is a video of what I want to prevent:
https://www.youtube.com/watch?v=uqWll2G2Km8&feature=youtu.be
Not sure if I'm understanding exactly what you are looking for, but I'm working on a section of a site right now that requires this type of sidebar that comes out from the side of the page. At first it was doing exactly the same thing for me as well, where the body would scroll while I was scrolling the sidebar content. After some testing it seems whether position: fixed or position: absolute, the only time the page allows me to scroll the side bar and not the content is when I set the
.main-sidebar-container { position: fixed; bottom: 0; }
There are other styles in there as well, but that bottom: 0 seems to be the key to allowing the side bar to scroll while not scrolling the body. I know you don't need to scroll your side bar but maybe setting your main-sidebar-container to bottom: 0 will help in this situation as well. I'll let you know if I come across any other findings as I continue with my own project. Good Luck.
A workaround I found was that if the sidebar is currently active, use JS to set the html height to 100% and overflow to hidden. Not sure how good this is in practice, though.
I have converted a Html Page to Responsive page. I was checking my page in iphone then I found that there is some white margin in right side of page.
I have used below code in my code, still I am not able to remove this issue
body{
margin:0%;
padding:0%;
overflow-x:hidden;
}
The best solution is of course using Bootstrap
Otherwise your css should be something like that:
html, body {
margin: 0;
position: absolute;
top: 0;
let: 0;
}
UPDATE: imho, usually is not a good idea to remove manually the overflow
You have some content that is overflowing the container, you should identify the source of this by removing sections of the page until it fits correctly. The easiest way of doing this is to open the dev-tools and start selecting main sections of the site and removing them.
You should be able to narrow down the cause of the overflow from here.
Instead of masking the problem (which overflow-x: hidden will), you should try and resolve it. You'll probably find that the fix will be simple.
I'm noticing a lot of sites are recently implementing new types of scrolling effects. Here's one example:
https://banksimple.com/
When you first start scrolling the initial section stays in place (z-index of 1?) while content scrolls over top of it. It also uses fragments and dynamically highlights it's navbar depending on what area the user has scrolled to.
I've seen a few sites use similar techniques. One (which I cannot find the link to) changes the background dynamically.
Is there a common technique used for these types of sites?
The first two sections are using position:fixed.
This fixes the items to a position on the page. They don't move, even with scrolling.
The scrolling section uses position:absolute with a high z-index.
This scrolls fine and because it has a higher z-index than the fixed position elements, it scrolls over them.
There's several ways to do this, but the easiest is to simply make a div, and use the CSS
"position:fixed;"
property. This will cause the div to stick exactly where it is, relative to the browser window.
You may also want to set you z-index to a large value so that the div is certain to stay on top of the rest of the page.
For the menu and header, it's a simple CSS solution using position: fixed and z-index. Both menu and header has position: fixed, while the menu has a large z-index value and the main content has a slightly lower one:
#menu { position: fixed; top: 0; left: 0; z-index: 2000; }
#header { position: fixed; top: ??; left: 0; }
#wrapper { z-index: 10; }
As for the fragment thing, it's done using JS. W3Fools has the same thing, done using jQuery. Perhaps you can decipher the script. Looks like it hooks to the scroll event of the document, checking if the position if the element is above the position of the viewport, taking action accordingly.
One way is to combine CSS + JavaScript let's say (jQuery)
CSS:
position:fixed for the top panel.
Use jQuery offset to detect container position and after you can can apply CSS classes for the "highlights navbar".
First, a warning, I have come back from a years break of html/css and have pretty much forgotten everything, so I'm at newbie level again.
I have been trying to add background images - one at top left and one at bottom right. What I have at the moment can be seen here: http://test.nihongohub.com/Mainsite/firstsite.php as you can see if you change the width of the browser the div containing the img will hit my main part and ruin it.
I have tried a few fixes suggested on stack overflow but none of them worked. Does anybody have any suggestions how to fix this. A friend suggested that I add the img to the footer and squeeze it out, but I don't like this idea.
2 things I want this image to do, move with the browser window, and be able to go behind my main page.
Thanks for any help offered
You could try using fixed positioning and the use z-index to move it to the back, ie.
#bottom_leaf_holder {
position: fixed;
bottom: 50px;
right: 0;
z-index: -1;
}
edit: I ment fixed, changed the answer.
You could put all your content in a div, and add a css rule to that div. Something like
#main_holder {
background: transparent url('img.jpg') no-repeat bottom right;
}
The best solution for this would be to have a wrapper div just inside the body tag that contains only the background image. This will act similar to the body tag allowing you to place an image that does not interfere with the layout and will go underneath your content if the viewport is small.
I know this has been asked here countless amount of times, I've looked around trying to implement the given solutions.
#footer
{
min-width: 900px;
text-align: center;
position: absolute;
}
Its the very last div on the page. I'm testing it out here blog.0arrays.com (a default theme for tumblr), but the footer just won't stick to the bottom. It appears in the middle of the page. I can provide the full code if anyone wants to look at it, as it's too long to paste here.
Thanks in advance.
EDIT:
I don't really care if its sticky or not (i.e right at the bottom), I just don't want it to appear in the middle of my text, as you can see on the site.
EDIT 2:
I've posted the full code here (via pastie), arrrr.... I bet the answer is really simple, this is doing my head in. For some reason, your suggestions are not working.
No one...?
In addition to the other attributes you've set for #footer, you should also add bottom:0 to set it's position to be the bottom of the page.
EDIT: You will also need position:fixed instead of absolute
If you don't care about keeping the footer at the bottom you just have to remove position: absolute; from #posts.
If you want to make the footer stick to the bottom of page, use fixed position.
#footer {
position: fixed;
bottom: 0px;
}
I just need to use
`display: table-row;'