My <footer> tag will not seem to stay at the bottom of my page. I have tried several different techniques to fix it and none have worked.
I have included the link to my working site below.
http://stage.bmdigitalgroup.com/recipes.html
i think you want to put your footer at bottom of the page i any resolution, if am i right than here is answer.
.footer {
position:absolute;
border:0px;
}
for more tips, tricks and tutorial visit - blog.klassicweb.com
Based on your screenshot, it looks like your monitor's height is larger than your website's content or you have zoomed out a lot, so what you're seeing is totally normal. In a smaller monitor it would look just fine. You could add a min-height: rule to your sites container so it pushes the footer down to the specified value, but you need to figure out a min-height that makes sense to you and your users.
If you really want to make the footer always stick to the bottom regardless of the monitor's height or zoom level, then you could add the following rules - just keep in mind that in a page where there isn't much content, you will end up forcing users to scroll down for no reason if they need to get to the footer:
/*
This rule is already in your stylesheet.
I added it here just for reference.
*/
html, body {
height: 100%;
}
/*
This is the container that holds your whole site.
You should use an id like "#container" or "#site" so this rule
applies only to your site's main container.
*/
.container_12 {
min-height: 100%;
}
Related
A page I'm working on has a div that spans its width. Its height has to resize according to the browser window. Here's how I've got it so far:
#vid_window{
position:absolute;
float:left;
background-color:#000;
width:100%;
height:57%;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
At the bottom of the page is a 'menu' to play an assortment of videos in the above div, and the video, of course, will have to resize with the height of the div. The div is absolutely positioned, per the client. That's not a problem:
#vid{width:100%;height:100%:}
As it will fill #vid_window
Here's the problem: When the browser page resizes, it doesn't take long for the 'menu' to begin overlapping the vid window. I know I can reduce the percentage, but, I may not, per the client. They want the lion's share of the page to be able to display the video, but they, of course, don't want the menu to overlap the window or the vid.
Here's the question: Is there a way to have the vid_window and vid resize exponentially according to the browser window, such that if the window is fully expanded, the vid_window is at 57%, but if it's half-size, the vid_window would be, say, 30%?
Here's a link to the page, if you'd like:
page
From what you've described, it sounds like you'd be better off absolutely positioning the menu at the bottom, and using relative postioning on vid_window. With a little JavaScript you can resize it correctly, and it should resolve your overlap issue. If you're allowed to use it, you can make quick work of it with jQuery.
Like James says the best way I can think of for you to do this is set a class on the Div vid_window set the height % in the class and check the display window size to determine your optimal settings. Also I would probably set a min-height so that the page won't go below that height and for backwards compatibility look at Modernizr. http://www.modernizr.com/
------EDIT------
That the Header and footer will never be off of the page. One way to reduce the problems you are having is setting the height on the header and footer to percentages so that they will scale with the height of the body
html,body { height:99%; min-height: 100%; }
header { height:22%; min-height: 100px; }
#content { height: 56%; min-height: 200px; }
footer { height:21%; min-height: 100px; }
The min-height values can be whatever you think is appropriate for the smallest height you want to go. The percentage heights on the rest should auto scale you header footer and consequently your content. This will however force the footer to go off the page at a certain point (when all min widths are met and the browser window continues to shrink). I do think that this would be desirable and should meet your clients needs. If not then you are going to get into a very complicated javascript that is not always going to do the math just right because of how each browser handles padding and height calculations. On top of that if they disable javascript then it would never work.
I'm still relatively new to css positioning, but have read a few books and watched a few tutorials. I made some palettes over at colourLovers, and wanted to see how they would look when applied to a website as a color scheme. So, using the little coding knowledge I had, I created a page to demonstrate my color scheme. After a while, it became a sort of self-confidence boost, and I've gotten just about done with it when a little thing caught my attention.
I have a two-column layout - on the left, there is the navigation menu, with a header above and a content section to the right, all in their own divs. My question is this - when I scale the page (as in, make the window for viewing it smaller), the content section gets pushed so it wraps under the Div. The way I could fix this was to make an additional div with no bg color and make it as long as the content that contained the navigation div, so they would line up, but it doesn't fix it if you resize the window.
I'm sure there's an easy fix to this, but my limited knowledge doesn't yet know it. If it helps, I've attached an image file below of what the site looks like in my editor (Coda). I also provide a link to the code of that page of my site which I've uploaded to textsnip. You can find it here - http://textsnip.com/f434fd. I have added comments to mark the header, sidebar, and content sections as well. Any help would be greatly appreciated. Thanks in advance!
The easiest solution is to use min-wdith on your container:
<div style="width: 90%; padding: 10px; margin:0 auto; min-width: 400px;">
This won't work on IE6, but will work on everything else. And, if you need IE6, then there are several workarounds that will solve it.
I would suggest you to use % value instead of px.
For example:
Header: 100%;
Nav: 20%;
Content: 80%;
Footer: 100%;
This way, if someone rize the window, it will always display perfect.
Use "float: right" on content DIV. And replace px width with %.
Check out this
You can use CSS Media Queries to adjust things as they get bigger and smaller. For instance, if you wrap your entire page with a div with an ID of wrapper (and use Simon Arnold's solution for the width of the individual elements), then you can do this:
#media (min-width:1200px) {
#wrapper {
width:1100px;
}
}
#media (max-width:1200px) {
#wrapper {
width:90%;
}
}
These set your wrapper to 90% if the screen size is less than 1200px, and 1100px if your screen is bigger than 1200px. Thus, if the browser is wider than 1200px then your page will stay the same size, and if it's smaller then it'll flow nicely.
#media (max-width:700px) {
#wrapper {
width:100%;
}
}
That one makes it wider when the browser gets smaller, and
#media (max-width:400px) {
#wrapper {
width:400px;
}
}
that one sets it to a fixed width when the browser gets really small. Those are really simple queries, if you're interested in learning more about media queries then here's a good place: http://css-tricks.com/6731-css-media-queries/
And of course, it wouldn't hurt to make the page flow between those transitions using CSS3 Transitions.
IE8 and below, unfortunately, do not support media queries. BUT you could read their browser type with PHP instead, and direct them to get a decent browser... It'd help make the web better. ;)
SOLVED
I used the solution proposed by Roman below, based on adding an additional DIV with position:absolute, I tested it in IE7, IE8, IE9, Chrome and Firefox and seems to work fine!
So the layout now has 3 full background images (what I needed), and even you can use the BODY bg taking care of that will be cutted off to the browser's viewport height (still could be useful in some cases), "three and and a half" bg images with "sticky footer" :)
The only drawback I found its that the links in the #footerContent were not "clickable", I solved it using position:relative to this container.
I made the changes to the sample I provided and uploaded it to my Dropbox, In the case that someone else could find it usefull.
Thank you all for your answers.
http://dl.dropbox.com/u/512412/html_stackoverflow_solution.rar
I uploaded
I'm building a quite complex layout for a website where I need to have 3 background images covering the background of the web page. So I have one in the HTML style, one in the BODY style, and the final one in a DIV that it's the container for all the webpage elements (#contenedor)
I'm also sing a "Sticky footer" technique, to have the footer "glued" to the bottom of the page whern there are small contents in the "main content" area.
The problem that I have It's that the BODY bg image gets cut off to the viewport of the web browser, I mean, It doesn't repeat-y below the visible area displayed when the page is loaded, and the contents are "tall" enough to make the webpage scroll.
What I tried until now:
To add an additional container DIV surrounding all (that's ok for me), but doing that It brokes the "Sticky footer" (maybe I did not found the right way to do it... I don't know).
Force the BODY to be as tall as the HTML using:
html>body {
min-height:100%;
height:auto;
height:100%; }
This solves the BODY issue, the image repeats but this also breaks the "Sticky footer"... :(
You can see a sample:
Index with "small contents" all OK... footer on bottom, etc.
http://carloscabo.com/bg/index.htm
Index page with tall contents (simple BRs), scroll down to see the cut on the BODY bg Image
http://carloscabo.com/bg/index_tall.htm
You can also download all the files of this sample in the following URL to do your own local test.
http://carloscabo.com/bg/stackoverflow_html.zip
For a reason I don't quite catch, it seems that the body is stuck with a height of 100% of the viewport. It refuses to grow past this point, and does not inherit the real height of the whole page.
However, if you don't mind to add another helper div, you can easily solve the problem.
First lets start with the html:
- Add a helper div before the head section.
<div id="contenedor">
<!--HELPER DIV GOES HERE: BACKGROUND FIX-->
<div id="bgfix"></div>
<header id="arriba">
...
</header><!--header#arriba-->
...
<div class="push"><!--Sticky Footer Push--></div>
</div><!--contenedor-->
And now let's modify the CSS:
- Remove the background from the body, and put it into the new helper div like so.
body {
height:100%;
min-height:100%
text-align:center;
// background:url(../img/bg_body.png) center top repeat-y;
color:#fff;
}
#contenedor {
position:relative; /* For #bgfix to attach here */
...
}
#bgfix {
background:url(../img/bg_body.png) center top repeat-y;
position: absolute;
width: 100%; height: 100%;
z-index:-1;
}
And VOILA!
Hope it helps!!!
The solution I found for this problem is to set min-height to the
min-height: 900px;
900px was the actual height of the background image i used.
I would need to see exactly what do you want to accomplish in order to help you better,
but i will make my best giving you some tips in advance
you shouldn't be applying a background to the HTML tag.
dont play with the height property of your body, it will mess up the sticky footer, instead let body height grow naturally with content.
body will grow with the content, but html wont. html tag IS NOT a container.
I'm giving new life to a boring web page. Please see what my template should look like here: Correct body page
Pretty page!
Now - when I go to add my existing background / menu/ footer - I am somehow loosing my container image -
/* structure */
.container {
background: url(/img/bgcontainer.gif) repeat-y;
margin: 0 auto;
width: 702px;
position:relative;
}
I removed position:relative; (but it still failed). Please note I'm having to use a web content manager only because I have no other access to site. For this reason - my css sheet is in the middle of the page.
This is how the page looks now w/missing bgcontainer.gif:
Current page
Please help - thank you
With the help of firebug I can see that the html structure of the two pages is quite different. On the "good" one you have a ".container" div as a wrapper of most of the content, you can see it here with the black border:
But on the "wrong" one you have a "#container" div in the same position and another ".container" div further down, nested inside that "#container", and it wraps that header only.
The "#container" div of the "wrong" page spans the whole witdh.
By the way, I like your design.
EDIT:
This is the look of the page with float: left; and left:107px; added to the ".container" div.
Here's your biggest problem:
The structure of the HTML pages is MUCH too different to pin this problem on one single line of code. In the "old" page there are 5 stylesheets including your own; in the "new" page there is only one stylesheet.
The reason your old and new pages don't look the same when you add your default.css stylesheet is because the old page has FOUR other stylesheets also applying styles, many of which are overriding your own.
I am trying to change thematic default theme to take the whole browser page ...
for example: http://themeshaper.com/demo/thematic/
Is there a simple fix that can be done? I tried few things on that page with firebug but none seemed to have worked..
You can make the main container 100% width with CSS, but that would not only imply that you change all the width properties of the markup to percent values, as you'll not have the same result on different screens.
Also, it's quite difficult to work just with percent values when dealing with markup.
So, in conclusion, it might be possible, but quite hard if you don't master CSS.
The theme appears to be built with a "fixed" width layout -- meaning that the width of the page is set to a fixed value and resizing your browser window will not change the layout of the page. You are trying to change it into a "fluid" layout -- meaning that the page will adjust sizes to fit the browser window. Unfortunately, themes (and webpage layouts in general) are typically built as one or the other (fixed vs. fluid) and it is hard to switch between the two without changing a large amount of the CSS. So the answer to your question is: no, there is no simple fix.
Not sure about simple, here is some CSS to get you started, but you will probably find more as you dig into the different page styles, etc. Add it to the end of the main style.css for the theme.
#access, #branding, #main, #footer { padding-left: 20px; padding-right: 20px;}
#branding, #header .menu, #siteinfo, #main { width: auto }
#container { width: 70% }
#content { width: 90% }
.main-aside { width: 28% }
Also, beware of IE specific stylesheets, etc, that might change these same selectors.