I'm new to doing layouts with CSS (I haven't done any web design for a long long time) and I can't seem to figure out how to get the footer of the page to display at the bottom the way I want.
Requirements:
-Display at bottom of content if content exceeds vertical size of viewport
-Display at bottom of viewport if viewport exceeds vertical size of content.
The code that I am using sets the footer at the bottom of the viewport, but if I size the browser to be shorter than the content, it just covers the content.
Code:
<div style="background-image:url(footer_bg.jpg); background-position:bottom; background-repeat:repeat-x; height:235px; width:100%; bottom:0px; position:absolute;"></div>
My main goal is to have a footer with text (ie. company info, contact info) and a background gradient. I'd like the footer background to span the width of the page, but I don't know if I can do that with the 960 gs divs.
EDIT: I'd like to do this with all CSS, no scripts if possible.
I found some good code to get a CSS footer at this link:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
The main problem I'm experiencing right now in implementing that with 960gs is the float:left; in the 960gs CSS. It seems that it's preventing my grids from vertically expanding the parent <div>. However, if I remove the float, 960gs seems to not work as well.
The following is the link with the float removed. The 'a' column is a grid_7 suffix_1 and the 'b' column should be grid_4 in the same container_12. In other words, they should be right next to each other.
Have a look at CSS Sticky Footer. It is done in pure html/css with no scripting at all. There is an explanation of how to get it to work with 960gs at signalkraft.com.
Hope this helps.
In CSS, there is no "if/else" ability. This is where scripting languages come in.
Look up JQuery. In JQuery, you can grab an element with the #id footer and say something like:
$('#footer').addClass('bottomView');
'bottomView' could make it so that element with the id footer sticks to the bottom of the viewport. Then, when the user scrolls, which JQuery can monitor, it can check to see if it wants to change the class to 'bottomContent'.
Then in your css, just have classes bottomView and bottomContent that place the element where you want.
Good luck.
Related
Working on a new design using bootstrap3 and trying to stretch the page so that even if there's not enough content to fill the page, the footer section would stay to the bottom.
The reason why I'm using position absolute, is because there's a link from the billing software that's being added within the content, I don't want to remove the link but position it a bit to the bottom in the footer section, in the center bottom, thus since I can't control where this will appear(do know where appears, just can't control), using position absolute on the specific element helps me here.
Now, that's not issue, just saying why I need to use position absolute and why I made the divs like this:
wrapper
>>wrapper_content
>>wrapper_footer
fiddle: http://jsfiddle.net/raicabogdan/jsk1b7ua/4/
the footer section is properly set to the bottom, however for some reason, the wrapper_content does not go 100% height automatically on load or on window resize. Also if you resize to mobile view, content will go down few table rows.
The content goes under the footer section.
What am I doing wrong here? Left a fiddle of the html page along with some css that I felt were needed above.
Hope there's someone that could get me out of this.
Cheers.
Try this link. I have used this method to get the footer to stay at the bottom of the window.
http://ryanfait.com/sticky-footer/
Basically, I'm trying to make my first website, ever, and I'm having trouble already.
I'm making the navigation bar and it's all looking good, but as soon as I put my browser into windowed mode, the navigation bar extends beyond what it was, so I have to scroll sideways to reach the end of it.
P.S.
I'm new to stackoverflow, still trying to figure it out.
So I might do something I'm not supposed to, just let me know and I'll try to fix it.
Edit 1:
I'm using Google Chrome.
Here is the JSFiddle with full code:
http://goo.gl/Z5wvTn
If you look at the header and footer, you should be able to see that the main section and navigation bar is actually wider than them.
The navigation bar and main section are within a div, while the other elements arent.
This effect is on a much larger scale without JSFiddle.
You want to create something like this: JSFiddle
If yes, then use % or emin place of pixels
Place the header and footer in the wrapper div and then decrease or adjust the width of the .wrapper div in your css.
jsFiddle
Based on what #Aayushi Jain and #Shivam said use wrapper with percentage. That way, your wrapper will respond according to the window screen.
Look up responsive design if you want to know more about it.
My version would be to add width:100% on your wrapper instead of defining fixed width.
Also, practice on using ems and % like #Aayushi Jain said.
.wrapper {
width: 100%;
}
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 problem is as follows:
I have a header which has a width of 100% (thus it is from side to side of the screen). My background image, starts soon after the header.
In the body I have a box with contents which is centered. When I resize the window I want that the background is overlapped, thus I want this content box to move to the left when doing so. Until it reaches a limit that the background is completely hidden. It will then reach a point that the box cannot shrink thus having a min-width.
How shall I make the box of content overlap the background without hindering the header?
(BTW I have no idea what the tags are. Because this website is asking me for tags)
Thanks
This layout is called Elastic because the page contents adjust as the window does.
Since you didn't provide the HTML, we can't help you anymore than providing the relevant CSS style to apply to your mysterious "box".
style="width:80%; min-width:500px;"
If you're messing with HTML and CSS, I strongly recommend reading up on the basics. The more you know yourself, the more we can help you.
How can I extend a div to the bottom of the page? Let's say I have a div that starts at the top, and has a background image I want repeated to the bottom of the page. How would I go about doing this?
Live example found here: http://mibsolutionsllc.com/ecgridos/about/ with the #content div.
Switch it around, have the background for your content as the body tags back ground then over lay the header over the top of it via a div or other element :)
CSS Sticky Footer does something similar, they've got a solution that seems to work on a whole range of different (including very old) browsers. If you don't need the footer you can always still use their solution and set the footer height to 0px.