What I want is sticky footer with 100% width (or footer that stretches horizontally along with opened website), and I want to set a color for it. But when I scroll page I don't want the footer to be stuck at the bottom, I want it to scroll away with page when I scroll it.
Then above the footer I want a 3 (right, left and center-content) column centered layout that has a header and also horizontal navigation bar area. Then outside this layout I could set background a color and also background image that is attached to top.
Is this possible at all? I followed Ryans Faits method but wasn't sure exactly how to put this all together.
Can anyone help me with css and html code? I appreciate your help!
Looks like you're looking for something like this: http://matthewjamestaylor.com/blog/perfect-3-column.htm
Related
I am trying to create a layout that has a fixed header that always shows at the top. Additionally a side bar that will have a scroll bar next to it if the content goes past the browser height. Same with the content to the right of the side-bar, I would like it to have its own scroll bar that does not go past the browser height.
Please see this site for an example of what I am looking for. It has all 3 features.
I have tried so many things. Without the fixed header I can get it working by simply making everything height: 100%. But with the fixed header something is going on where the sidebar and content pane scroll bars go way below the browser view.
I feel like I am getting somewhere when I add padding-bottom: 64px; to the items I want to have the scroll bar. The 64px is the height of the header.
Please go through the documentation and tutorial of Bootstrap and you will be able to do it.
For reference go through this JSFiddle: https://jsfiddle.net/jxo6pmju/12/
link = https://jsfiddle.net/jxo6pmju/12/
For scrollbar go through this : https://jsfiddle.net/vrzjLc77/1/
link = https://jsfiddle.net/vrzjLc77/1/
Please help me to fix menu on the top of the body and that should be scrolled horizontally.
I used position:fixed for the particular <div> tag with top:0;left:0 values. But when I resize the window to 50%, the fixed menu appearing only 50% remaining part was got inside the border (not appearing).
Please make me to fix this problem to view the menu with scrolling when we decrease the window size..
You can use bootstrap this will help you to fix the nav bar and this will not disturb the page on resizing the content. You can see the example Here.
I have a page with 3 basic elements. You have your main content which runs down the center of the page at about 80% and has a white background. On the side of that main content you have the left and the right side at 10% each which for design reasons is grey. So far So good. Now I have my footer which as of recently was contained as a sticky footer and remained at the bottom of the page. I want the footer to be at 100% width and sit right under the content and if the page is being viewed on a screen that is too large then have the footer fill the rest of the page with white.
<p> I've tried everything that i know with the CSS I think I'm just missing something simple. I have to put some code in here to link to a fiddle </p>
Here is a link to the fiddle:
http://jsfiddle.net/dPek3/
You fake it by making your body background color the same color as your footer. You usually have to have a wrapper that contains your content to overlap this change, but it is extremely effective and I would recommend it. You also need to clear your floats. Here is a working example: http://jsfiddle.net/dPek3/1/
I have centered a div on a page for a group project and while the div itself is centered, the websites contents are centered with the scroll bar in mind. What I mean by this is that the web page contents are centered so that the width of the screen is measured without the scroll bars width. So if the monitor was originally 100px wide, it gets read as 100-(scroll bar width) px wide. Unfortunately, this has caused my fixed position div to be a scroll bars width off center from the rest of the site and it looks pretty funky. Any way to fix that? Can't use jquery, can potentially use a little bit of JS.
Here's the link to my site so you can see what I'm talking about. http://51713941.nhd.weebly.com/index.html
Lets see some code.
This can normally be sorted out with css. Margin:auto
You should use the box model concept in css to style and place the content on the site
Again, the question seems rather vague.
The website I'm building features a large background header image with a transparent fixed navigation bar on top. View it here: www.bedriftsdesign.no
Right now when you scroll the content scrolls over the header image just as planned, but when it reaches the navigation bar, I'd like it to disappear under the content, the same way the header background does, but it stays on top. To see the effect I'm trying to get, take a look here: http://www.googleventures.com/
Any idea on how to solve this? I've tried messing about with the z-indexes with no result yet.
Would be really grateful for some help.
Add to your <feature> tag that holds all the content, the following css:
feature{
position:relative;
z-index:10;
}
You should probably put it as an answer if it worked for you :).