Working with Express, Jade, and Twitter Bootstrap - trying to use the Sticky Footer example. Everything renders - EXCEPT that the footer is not sticky. Kind of defeats the purpose. Anyone have any luck?
layout.js
!!! 5
html
head
title= title
script(src='/javascripts/jquery-1.9.1.min.js')
script(src='/javascripts/bootstrap.min.js')
link(rel='stylesheet', href='/stylesheets/bootstrap.css')
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/stylesheets/bootstrap-responsive.css')
body
block content
index.js
extends layout
block content
#wrap
.container
.page-header
h1 #{title}
p.lead Taco hunger can strike at any moment. With TacoQuest on your BlackBerry® 10 smartphone, you'll always know where the best tacos near you are.
p Use the sticky footer with a fixed navbar if need be, too.</p>
#push
#footer
.container
p.muted.credit Copyright 2013 #{title}
style.css
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
#media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
}
.container .credit {
margin: 20px 0;
}
Try adding html to the body CSS so that its height is also 100%..
html,body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
Related
I am having real difficulties centering and aligning a theme in Wordpress called "Amadeus". The website is heidikaloustian.com. I want the width of .content-area which is 740px and center it, the menu should be left aligned and the menu right aligned within it according to the mockup. Help, what am I missing?
Mockup of centered design;
Here's a start for you:
/* Line 1117 in style.css */
.site-header {
text-align: left;
background-color: #fff;
width: 740px;
margin: auto;
}
/* Line 1199 in style.css */
.site-content {
text-align: center;
margin-top: 0px;
width: 740px;
}
Since your content is limited to 740px I set the entire page content and header to that width and it gives the look you show in your mock-up.
What you could do is the following:
#page {
width: 740px;
margin: 0 auto;
}
.site-header {
display: flex;
}
.main-navigation {
align-self: flex-end;
}
.main-navigation li {
padding: 14px;
}
You will need to remove the container class from the site header and from the main-navigation.
Also remember to add the flexbox prefixes, in case you're going to support other browsers.
I am trying to make a basic responsive structure for a website with CSS. So far I have managed to make three column divs, a menu, a sidebar and one for content.
What I would like to achieve now is to have the menu and the sidebar to be 100% of the viewport height and fixed so that the content div is "scrollable" but the menu and the sidebar stays on top no matter how much content there is in the col content column. Naturally, I do not want this to happen in the media query though.
How can I achieve this most efficiently with CSS. Do I have to restructure the divs in HTML or is there any way to achieve this with CSS?
/* SECTIONS */
.section {
clear: both;
}
/* COLUMN SETUP */
.col {
display: block;
float: left;
}
/* GRID OF THREE */
.menu {
width: 33%;
background-color: #98D2ED
}
.sidebar {
width: 33%;
background-color: #D3ADAD
}
.content {
width: 33%;
background-color: #C9E4D1
}
/* GO FULL WIDTH BELOW 480 PIXELS */
#media only screen and (max-width: 480px) {
.menu {
width: 100%;
}
.sidebar {
width: 100%;
}
.content {
width: 100%;
}
}
<div class="section">
<div class="col menu">
<p>
Menu
</p>
I want this cloumn to be fixed and full height of the viewport when the screen size is above 480px.
</div>
<div class="col sidebar">
<p>
Sidebar
</p>
I want this cloumn to be fixed and full height of the viewport when the screen size is above 480px.
</div>
<div class="col content">
Content
</div>
</div>
What I am trying to achieve:
You can use flexbox, either for known/unknown width and height elements, The key is to set the content area to overflow:auto, and switch the flex-direction to column in media queries.
jsFiddle
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
}
.content {
flex: 1;
overflow: auto;
}
.menu { background: grey; }
.sidebar { background: silver; }
#media (max-width: 480px) {
body {
flex-direction: column;
}
}
<div class="menu">Menu</div>
<div class="sidebar">Sidebar</div>
<div class="content">
<!-- scroll test -->
<div style="height:1000px;">Content</div>
</div>
Or, the traditional way to set the menu and sidebar to position:fixed.
jsFiddle
html, body {
height: 100%;
margin: 0;
}
body {
margin-left: 200px;
}
.menu, .sidebar {
position: fixed;
top: 0;
height: 100%;
overflow: auto;
}
.menu {
left: 0;
width: 100px;
background: grey;
}
.sidebar {
left: 100px;
width: 100px;
background: silver;
}
.content {
overflow: auto;
}
#media (max-width: 480px) {
body {
margin: 100px 0 0;
overflow: hidden;
}
.menu, .sidebar {
left: 0;
width: 100%;
height: 50px;
}
.sidebar {
top: 50px;
}
.content {
height: calc(100% - 100px);
}
}
<div class="menu">Menu</div>
<div class="sidebar">Sidebar</div>
<div class="content">
<!-- scroll test -->
<div style="height:1000px;">Content</div>
</div>
As I understand, you want your .menu and .sidebar to be stuck to the screen in one place and have the content be scrollable. And add some more code to other things as well, I know that sounds vague, but it would be a waste of time to write everything down, as I have edited you I finished copy, and I have notes that explain all my changes (and the reasons for doing so) in the code below.
I removed the floats and their classes, as I believe those are not necessary, and that the floats do more harm than good. As well as moved the .content to be in the middle column (between .menu and .sidebar). However, if you need to, feel free to change any or al of these things back.
Here's the updated code: (and here's a JSFiddle: JSFiddle)
I know that .menu has a weird space above it (when running the snippet and the JSFiddle), but I have it live on my website here, and it behaves perfectly fine, and uses the same code.
* {
margin: 0px; /* Added to remove margin from everything */
padding: 0px; /* Added to remove margin from everything */
}
.section, .menu, .sidebar, .content {
display:inline-block !important; /* Added so they will line up next to each other */
}
.section {width:100%;} /* Pretty self explanatory, added to set ".section" to a width of 100% */
/* GRID OF THREE */
.menu {
width: 33%; /* Was already here */
background-color: #98D2ED; /* Was already here */
height:100vh; /* Makes it be 100% of the Viewport Height, or 100% of the browser window height */
position: fixed; /* Makes it stay "fixed" to one place on the screen */
}
.sidebar {
width: 33%; /* Was already here */
background-color: #D3ADAD; /* Was already here */
position:absolute; top:0px; left: 67%; /* To make the element in the right place, add the width of "menu" and "content" */
height:100vh; /* Makes it be 100% of the Viewport Height, or 100% of the browser window height */
position: fixed; /* Makes it stay "fixed" to one place on the screen */
}
.content {
width: 34%; /* Was already here, but changed it to 34 to make the website fill the page */
background-color: #C9E4D1; /* Was already here */
position:absolute; top:0px; left:33%; /* To make the element in the right place, make this the width of "menu" */
}
/* The CSS below this was already here */
/* GO FULL WIDTH BELOW 480 PIXELS */
#media only screen and (max-width: 480px) {
.menu { width: 100%; }
.sidebar { width: 100%; }
.content { width: 100%; }
}
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="section">
<div class="menu">
Menu
</div>
<div class="content">
Content
</div>
<div class="sidebar">
Sidebar
</div>
</div>
Really Hope that helped!
I'm trying to show a footer at the bottom of my pages. And if the page is longer then 1 screen I like the footer to only show after scrolling to the bottom. So I can't use 'position: fixed', because then it will always show.
I'm trying to copy the following example: http://peterned.home.xs4all.nl/examples/csslayout1.html
However when I use the following, the footer is showing halfway my long page for some reason.
position: absolute; bottom:0
I have both short pages and long pages and I would like it to be at the bottom of both of them.
How can I keep the footer at the bottom on a long page as well?
Fiddle
I've created these Fiddles to show the problem and test the code.
Please post a working example with your solution.
Short page
Long page
My footer css:
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}
.content {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
/* --- Footer --- */
.footerbar { position: absolute;
width: 100%;
bottom: 0;
color: white;
background-color: #202020;
font-size: 12px; }
a.nav-footer:link,
a.nav-footer:visited { color: white !important; }
a.nav-footer:hover,
a.nav-footer:focus { color: black !important;
background-color: #E7E7E7 !important; }
I would suggest the "sticky footer" approach. See the following link:
http://css-tricks.com/snippets/css/sticky-footer/
Again, here's where flexboxes come with a clean hack: flex-grow.
First of all, let's see the code:
div#container {
/* The power of flexboxes! */
display: flex;
display: -webkit-flex;
flex-direction: column;
min-height: 100vh;
}
div#container div#content {
/* Key part: Eat the remaining space! */
flex-grow: 1;
}
div#container footer {
flex-basis: 100px;
}
/* Appearance, not important */
body {
margin: 0;
font-family: Fira Code;
}
#keyframes changeHeight {
0% {height: 30px}
10% {height: 30px}
50% {height: 400px}
60% {height: 400px}
100% {height: 30px}
}
div, footer {
color: white;
text-align: center;
}
div#content section {
background-color: blue;
animation: changeHeight 10s infinite linear;
}
footer {
background-color: indigo;
}
<div id="container">
<div id="content">
<!-- All other contents here -->
<section>Main content</section>
</div>
<footer>
Footer
<!-- Footer content -->
</footer>
</div>
If the content in #content cannot reach the footer, then flex-grow extends the element to fit the remaining space, as the #container has the minimum height of 100vh (i.e. the viewport height). Obviously, if the height of #content plus the footer exceeds the viewport height, #container will be scroll-able. This way, footer always remains at the very bottom.
The animation in the snippet, which belongs to a sample section inside #content, tries to show you the exact same thing: its height is changing between 30px and 400px (change it to a greater value if needed).
Also, for the sake of information, see the difference between flex-basis and height (or width).
Tip: In CSS3, if something does not work, take a look at flexboxes and grids. They often provide clean solutions.
Hope it helps.
Replace Height with overflow:auto; & give body a position
html,body {
position:relative; <!--Also give it a position -->
margin:0;
padding:0;
overflow:auto; <!-- HERE -->
}
Position the footer to be relative to body
/* --- Footer --- */
.footerbar {
position: relative; <!-- HERE -->
width: 100%;
bottom: 0;
color: white;
background-color: #202020;
font-size: 12px;
}
It at all possible it is always better to relatively position your elements, especially your main elements, like footers in this case.
Short Page Edit
min-height:400px; <!-- Give this a real number like 400px
or whatever you want...dont leave it to 100% as -->
}
Now we have flex-box which is very straight forward.
body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
Note: we must contain only two div inside the body. One for footer and another for rest items
There is an excellent footer tutorial here.
The demo page is here.
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:
.footerbar {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
We have been struggling with this issue for some time. The div with in several nested divs coupled with hacks and patches was turning into a nightmare for us.
There were always surprises that required more hacks and more patches.
here is what we have settled for:
css:
html, body {
margin: 0px;
padding: 0px;
height: 100%;
color: #6f643a;
font-family: Arial;
font-size: 11pt;
}
form {
height: 100%;
}
body:
<table style="z-index: 1; margin: 0px; left: 0px; top: 0px; overflow:auto" border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center" >
contents goes here
</td>
</tr>
<tr>
<td valign="top" bgcolor="gray" align="center" style="padding:20px">
<font color="#FFFF00">copyright:Puppy</font>
footer goes here
</td>
</tr>
</table>
That is all you need.
- if you are using asp.net don't ignore form height.
html,body {
margin:0;
padding:0;
height:100%;
}
.content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
.footerbar {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
}
If IE7
<!--[if lt IE 7]>
<style type="text/css">
.content { height:100%; }
</style>
<![endif]-->
Putting "position" as "fixed" with the "bottom: 0" solved my problems. Now it is responsive, the footer appears correctly (and remains there even with scroll) on both bigger screens (pc, laptop) and smaller ones (smartphone).
.footerbar {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: fixed;
bottom: 0;
width: 100vw;
min-height: 3vh;
}
position:fixed;
bottom:0;
Add this on the footer if you want to make the footer on the bottom while scrolling.
I'm still new to Bootstrap. If I'm designing within the 960 container and want the footer to fit correctly inside and stick to the bottom, how do I code that? Everything I find only applies to running the footer/nav across the entire view.
Ive tried the github example and even my classmates aren't sure how to fix this.
Add this CSS below bootstrap.css reference:
<!-- CSS -->
<style type="text/css">
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
#media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 960px;
}
.container .credit {
margin: 20px 0;
}
</style>
Then you can render the footer as follows:
<div id="footer">
<div class="container">
<p class="muted credit">Example </p>
</div>
</div>
NOTE: If you are experiencing problems try to set max-width: 680px; in .container at CSS code
I'm having a hard time with a simple css snippet for footer text.
The footer text must always be at the end of the page and the end of the screen whatever comes later.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
For a working example which you could pick apart I had previously done this exact same thing for a client of ours:
Pushed Down Page -
Fixed Position Page
Use the bottom property:
#footer
{
position:absolute;
bottom:2px;
}