I have this website, [mandelli.it][1], and I need to make the header sticky. I used the `position: fixed` on the header (`#masthead`) and it works fine. If you scroll down the page the header the navigation bar stays on top.
The problem is the space below, in fact, the title and some margin of the revolution slider item are hidden by the header itself because, apparently, `position: fixed` doesn't give the element a proper "space" on the document, so it can distantiate from the other elements.
I gave more margin to the elements below and it's working, but I should do it for every page and it's cumbersome. Any best practice on how to fix this?
Thanks in advance
Related
I have been looking for tutorials on this for a while now and am coming across a problem. I have a layout with a fixed header at 100px in height and a fixed footer at 50px in height. In my content, I have a menu on the left at 200px wide and content on the right that fills the rest of the screen. My header, footer and menu all have styles applied for background colours and borders.
What I want is for my footer to remain at the bottom of the window, or at the bottom of my content, if the content is longer. I want for the menu to be the same height as the content, so that the styles I have applied will remain intact. What I get is either the footer sticks to the bottom of the content because the content is shorter than the menu, or there is a gap between the bottom of the menu and the top of the footer.
Every tutorial I have found fixes this, but requires the menu to have no background (it takes the background styles from the <body> tag. As I said, the styles I have applied are attached to the menu. Is there a way to fix this?
UPDATE: My source can be found at http://jsfiddle.net/53SZd/3/. That is what I have now (apologies if the floats cause all manner of headaches), but if there are ways to have it looking how I want, I am very open to suggestions.
UPDATE 2: I think my way of explaining this is wrong. I have uploaded some images of what I want to my Google Drive that should explain what I want.
Whilst I do sincerely appreciate the help that I am getting here, there is always one caveat that appears. Many thanks to Waz for his help, I do really appreciate it, but I am coming across one issue or another with each answer. I never realised that getting the effect I want could be so hard -_-"
seems that u might be using float property on the menu, if that is the case you would have to clear float with the footer or a div, but seeing the codes would be great help for your answer
one way to do it is to put a margin-left on your content of 220px (200 for the menu +20 for it not to be just aside the menu)
had the same problem, this solved it.
for the footer, the solution of james is the best ( put clear : both on your footer)
here is how it works : http://jsfiddle.net/53SZd/19/
EDIT : I understood the prolem was for the content.
give your menu top= 111px(100 size of header, 11 for padding) and bottom=51px (50 height footer,1 border) and your footer bottom=0px;
I'm looking to figure out the z-indexing for the floating social bar at this link (scroll down the page for it to show up):
http://dailycaller.com/2013/01/25/herman-cain-explains-why-he-wont-run-for-georgia-senate-seat/
Currently, the way that I have the containing div set, in order to be in the fixed position to the side, is at 100% with a fixed div. This is covering the content so the links in the content are not target-able.
The problem is the facebook like button. How do I get the z-indexing set correctly so that the facebook box shows up on top but the hyperlinks in the content are target-able?
Thanks.
You could perhaps set the width of the sidebar container instead of making it 100% and then make use of
overflow: visible;
Example: http://jsfiddle.net/CFCDS/3/
(excuse my margins—they are just there to get everything to look a bit more like you had it.)
the layout of my html page has a fixed div on top of the page. the content div then has a margin-top to compensate for the fixed div.
However, when the content gets scrolled down, if I do a search on page, the browser would sometimes show matches that would be underneath the fixed div, i.e. invisible.
For example, go to http://mincovlaw.com/services/worldwide_enforcement_checkup, scroll down a little bit, and do several searches for "know". You will see that the one closer to the top of the page will be found but will be hidden underneath the fixed div.
Is there a better way to achieve the same looks, while retaining the functionality of a search that does not get hidden?
Simple answer: no, because that's exactly what you're doing: hiding content. Think of it as if content ceased to exist, that's exactly what you're doing and what you're looking for. Anyway, I doubt many people will search in the page, it's not THAT common
I have a page with an absolute positioned header that has: a logo, anchor links to portions of a table, and table headers. Content is the rest of a table. Scrolling affects only the table content then. I CSS'd it so the scroll bar is the height of the whole page, including the absolute positioned header. However, when I click an anchor link, it scrolls to display the section up top behind the header at the top of the page.
See for yourself here: http://www.surgpath4u.com/syndromes
Any ideas on how to make the anchor links display to below the header. I know I can make the content div separate from the header, but then the vertical scroll bars are not the height of the entire page, something I really want. The section ids are in tr tags.
Stumped. Any thoughts?
Did it.
Used jquery ScrollTo plugin and used the offset feature set to the height of the . For example, to go to , I use:
<a href="#" onclick="$.scrollTo( '#F', 1000, {offset: $('#head').height()*-1, easing:\'elasout\' } );">
The easing gives a nice animated look too. Works well and with the offset feature, I can change browser window sizes and it still works well.
Hope this helps someone.
I have a site which needs to be fully self-contained in the browser window, ie, the user must not have to scroll up and down to view different parts of the site. Content that is too long to fit into the content pane is handled with overflow:auto, which is working fine.
the problem is, no matter what I try I still have the following problem:
two sets of scrollbars http://www.wikiforall.net/bad_scrollbars.png
So beneaht the content which successfully fills the browser window, there seems to be a gap. This gap causes the vertical scrollbar to show itself (and there appears to be a similar gap on the right side which isn't as easy to see). I've inspected the elements using Chrome's element inspector and the <html> tag covers only up to that gap. So I have no idea where the gap is coming from.
The main page divs are setup with position: absolute, with left, right, top, and bottom all set to zero. These divs also have display: inline set, and do not have margins or padding. The html and body tags are styled the same way.
I've been looking around for a day or two but nothing I've found has worked. Does anyone know how to remove these scrollbars?
You can always use:
overflow: hidden;
To hide the scrollbars.