I’m trying to create layout using zurb foundation.
Currently, I’ve got very basic one, but one feature blocks me on that very beginning.
I’d like to make my <main> section to take at least 100% - header height - footer height, so <footer> would be on the bottom of the screen (or, if there is too much content, then you’d have to scroll down to see footer)
I created (as I said before, very basic version) here: http://jsfiddle.net/42VcD/2/
I’m not sure if it’s possible without JS, but I’d much more prefer CSS based solution.
Here is a sample for what you are looking, however its not done in foundation.
http://codepen.io/tusharbandal/full/lmrgD
Its done using position: absolute to footer.
Importantly you done need js for that.
Even if content increases the footer move down.
you can specify the height for the main section to your requirement.
here is a fiddle with a class(main) for section 100%.link
.main{
height:100%;
}
Related
Well I know there are a million questions regarding this topic - but I haven't found an answer for my specific case.
I am wanting to create a sticky footer (not position: fixed) but one that will stay at the bottom if the content isn't sufficient to fill the page space. If there is enough content the footer will act as normal.
Well on other pages not using bootstrap I have been able to do this:
http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
See it working on my site here:
http://www.magnetize.ca/policies.shtml#/pp
But on part of my site I am forced to use bootstrap and when I try the flexbox method things go really wrong:
http://my.magnetize.ca/knowledgebase.php
On most browsers I only see the footer get cut off on that page - but on Safari things get seriously messed up.
So, to summarize, I am looking for:
A sticky footer solution that:
Isn't the fixed footer solution (acts as a normal footer if content is sufficient to fill page)
Doesn't require a fixed footer height
Works with bootstrap
Any help you could give me with this specific problem?
EDIT:
I am just trying out the "table trick" method as listed:
http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
It is live now at: http://my.magnetize.ca/knowledgebase.php (on all my.magnetize.ca pages)
It is working much better than flex-box so I have ditched that idea. Everything is working beautifully on all browsers...except safari. On safari there are massive margins at the top and bottom of the page even though no margins are set.
You could try using http://stickyjs.com/ I have used it for navigation bars that start in the middle of the page and then stick to the top.
I also found this http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/# which looks more like what you are looking for.
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'm designing this site: http://ecostructionny.com. I'm just at the point where I'm laying out the home page and I'm a bit stuck. I want a footer row at the bottom that lists contact info, and then directly above it is a row of 3 blurbs of information. The background images are the main visual feature of the page, so I'm trying to leave space for them to show through.
Can anyone help with some suggestions? If there's a better way to lay it out, I'd love some other advice.
Thanks!
There is a good footer tutorial at
http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/
The demo page is here:
http://www.lwis.net/profile/CSS/sticky-footer.html
The basic premise is that the main body page is stretched to a 100% of the page. With a min-height of 100% too.
The footer is then given the following rules:
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
Of course you know you will get as many ideas as people that respond. Everyone's opinion is different when it comes to design. Based on your statement above I would direct you to the bootstrap sticky-footer example that comes with the download of bootstrap. In addition, in my experience, it works better if you do some work and resize the photos so they appear natural in the carousel. When images are stretched to fit it distorts things a bit. Take some time and experiment. Also, I have found that using the hero template page with bootstrap works really well for the thing you are trying to do. Experiment around.!!
Tony Tambe: bootstrap has all the responsive code yes, but you will have to add some #media queries to your styling to make the header resize and the underline under the title move down etc. You can add #media query in the html page using a style element (In the head section). Keep experimenting, is looking good.
I'm seeing div class="page-wrap" used extensively in web applications.
What is the convention for the page-wrap class, what goes inside?
It all depends on your css layout you are applying... Sometimes, people use wrap containers to use sticky footer technique (header and content in the wrap, footer after the wrap - google it); sometimes with this wrapper the designer just wants to fix the entire page to certain width and center it (not saying that this is the best way or that there is a best way), etc... It is really subjective, because it is mostly a design thing.
By convention it can take ONLY the following:
*
Yes, everything. I am sure there's no such convention about it. The possible reason to use this div tag with page-wrap class may be to clarify that before it is the header region and after it come sthe footer part. So if I have a simple 5-page website, I'll have a common header and common footer, shared by each of 5 pages. My about-us page will be different from my contact-us page only inside <div class="page-wrap">.
I am building a website but I started with a template and gutted it, changed a lot and got rid of the entire center section and now I have to start over with the body but whenever I try to insert the navigation menu, which is a javascript code that is inserted from another program I used to build it. Well, every time I try to insert the menu on the left side of the page, it falls outside the alignment of the header and footer, so instead of it being straight aligned with the header and footer on the left side, it is on the outside of where it should be. I'm absolutely retarded when it comes to this stuff so if someone could tell me the trick here and for building the content of the body. Just simple stuff like what html code and tags to use for making the boxes that you can insert things into, not image placeholders but boxes to input content like navigation menu or anything really?
HELP PLEASE.
here is the site.
Retairacket.thexdt.com
I also get an invalid URL error.
By the sounds of your problem though, you should be able to fix it relatively quickly and easily. I assume from the sounds of it that your header and footer are a fixed width and that there is likely a fixed width block within the body that is forcing the body to be wider when you add in the (most likely) fixed width nav as well. If that's the case, then you will just need to change the way you are controlling the widths to suit the new nav bar. So reduce the width of one block to accomodate the width of the new one, make sense?
Remember, I haven't actually seen what the problem is, so I'm just guessing from your question here based on the most likely sceanario.
I would also recommend learning the basics first. Designing a website isn't as everyone makes it out to be. As an extreme beginner without using WYSIWYG editors, coding HTML can be very complex. There aren't just "tags to use for making the boxes that you can insert things into."
Yes, there are <p> and <div> tags that will do what you want, but you need to understand what each tag does and when to use it.
I recommend the following sites:
w3schools
HTML Goodies
Webmonkey
Search Google for "HTML basics"
That URL isn't valid, apparently.
I also can't see your page, but I can see http://www.thexdt.com. Is the design similar to that page?
That page uses tables for the general structure. Is there is a large image or something bigger that the width of the external container?