We have a Wordpress site at http://cmagics.eu/digitalmagazinepublishing which uses the responsive2 theme. We are trying to get a sticky header which seems to work just fine, however we are also trying to get a sticky footer which simply sticks to the bottom of the page and works like the one at http://ryanfait.com/sticky-footer/
Because of the slightly cryptic nature of the responsive2 theme how can I;
1. keep the footer stuck at the bottom of the page using the correct sticky method not position:fixed
2. Stop the main content scrolling unnecessarily when there is plenty of room on the page?
html source:
view-source:http://cmagics.eu/digitalmagazinepublishing/
css
#footer {
position: relative;
clear:both;
font-size: 11px;
line-height: 1.5em;
background: rgb(54, 53, 53);
color: #fff;
border-top: 2px solid #444;
text-align:center;
margin-top: -324px; **just a hack to make the footer appear at the bottom incorrectly**
margin-bottom: -25px;
height: 162px;
font-family: Roboto Regular;
}
#site-container {
width: 900px;
margin: 130px auto 0 auto;
overflow:auto;
padding-bottom:162px;
}
.hfeed {
min-height:100%;
height:100%;
height: auto;
}
Here's a solution that I think is very clean. Use absolute positioning for all of your main content elements (header, article, footer). Use #media queries to create breaks at different resolutions if you need to have the header or footer height change for different screen widths (responsive design), and tell your main content area to hide overflow. You can use floated, relative layouts within the main content areas this way, as well.
Here is footer css :-
#footer {
position: fixed;
font-size: 11px;
line-height: 1.5em;
background: rgb(54, 53, 53);
color: #fff;
border-top: 2px solid #444;
text-align: center;
margin-top: -324px;
margin-bottom: -25px;
height: 162px;
font-family: Roboto Regular;
bottom: 0;
width: 100%;
}
Related
I'm trying to make a horizontal scroll gallery for a portfolio of photography on my website, but I want the images to be responsive to height (to fit varying screen sizes). To try and do this I have used the unit: vh and this is causing me problems.I have a position:fixed header and footer so they always stay on the screen while you scroll through the gallery. With the CCS I have used this means as the screen gets smaller, the images go underneath the header & footer rather than constantly staying inbetween them.
I have seen a website with an ideal horizontal gallery very similar to what I am trying to achieve. You can check out the website here. On the linked website the images always seem to stay equidistant from the header and footer.When inspecting the element it looks like they're using tables, which I understood to be a big no, no. Is this how they are achieving this effect on the gallery?
I've linked a JS Fiddle to a very basic version of my design so you can see what I've done so far.
JS Fiddle: https://jsfiddle.net/pmh9zvta/1/
Basically, in a sentence I'm asking how I can achieve the same effect as the example website in the link.
Robin,
Hmm...so vh can actually achieve a pretty similar effect. Your example images are rather extreme, though (1500x100).
Check out this fiddle I made (using your code as a base):
https://jsfiddle.net/Benihana77/5xw21tvc/
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
height: 100%;
box-sizing: border-box;
position: relative;
}
body {
position: relative;
margin: 0;
padding-bottom: 100px;
min-height: 100%;
}
#header {
width: 100%;
padding: 10px;
margin-right: auto;
margin-left: auto;
position: fixed;
background-color: #fff;
background: rgb(255, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, 0.92);
text-align: center;
z-index: 1;
}
#gallery-wrapper {
position: relative;
padding-top: 60px;
overflow-x: scroll;
}
#gallery-wrapper img {
height: 70vh;
width: auto;
}
#footer {
font-family: Corda-Light;
font-size: 14px;
color: #333;
width: 100%;
padding: 5px;
padding-top: 13px;
padding-bottom: 8px;
padding-left: auto;
padding-right: auto;
position: absolute;
bottom: 0;
background-color: #efefef;
text-align: center;
background-color: #fff;
background: rgb(255, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, 0.9);
z-index: 1;
}
/* Navigation Bar Styling */
.nav {
border-bottom: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: 10px;
}
/* Horizontal Gallery Styling */
ul.gallery-row {
white-space: nowrap;
}
ul.gallery-row li {
list-style: none;
display: inline;
}
/* Footer Styling */
.footer {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.footer img:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
Main changes
Added a wrapper around your content for better management (within JSFiddle and out).
Changed your footer to be positioned absolutely, along with a host of other changes that allow it to stick to the bottom until your Viewport is too short. Then it gets pushed down like a normal footer. This keeps your content from going behind the footer.
Made the "gallery-wrapper" with "overflow-x:scroll". I'm personally not a fan of side-scrolling galleries, but if your heart is set on it, this will keep the side-scrolling contained to this block, and no your entire website (in turn obviating the need for a "fixed" footer).
Chose some more realistic image dimensions to work with, and a shorter vh (70).
Regarding your example, as best as I can tell, they're using Javascript to rewrite the height of the "scrollHolder" container DIV. So their solution is not CSS-only, instead using JS to read the height of the browser and adjust the height accordingly.
I'd also say their approach is flawed, as it doesn't scale properly to browser width. On a thinner screen, you can only see zoomed-in pieces of each image.
So, in addition to the above changes, I'd recommend:
Setting media-queries at an appropriate browser width (say 760) so that your images become scaled by browser width, not height (so vw, not vh).
This might require some special "min-height" settings in order to keep your tall images from becoming toooo tall, and short images from becoming little munchkins.
I'm trying to build a page where I have two sidebars both in opposite direction. I'm using a metronic admin theme purchased from evanto, I want it to be fixed even page is being scrolled and the page content to be below that sidebar. I've placed these two menu inside a div with class page-container in which I'm having another div for the page content named page-content-wrapper.
here is the link to my problem
I tried using the following css in editor.css:
body {
color: #333333;
font-family: "Open Sans", sans-serif;
padding: 0px !important;
margin: 0px !important;
font-size: 13px;
direction: ltr;
}
body {
background: #e9ecf3;
}
.page-header-fixed {
margin: 0px;
padding: 20px 20px 0 20px;
position: relative;
z-index: 2;
}
.page-container {
margin-top: 75px;
padding: 0px;
z-index: 2;
}
.page-content-wrapper {
z-index: 3;
}
I tried using absolute position but it becomes more messy as both the sidebars collapse. I tried putting z-index too but its not helping.
Content is also coming down the sidebar.
Please help.
if you want to fix the position of the element with respect to the window even when scrolling then use position: fixed; on that specific element.
So guys, im simply trying to have a clean footer that will appear at the end of the page content consistently, whether or not the content fills up the length of the page.
As of now, I've tried a few options, first, i've done it with a sticky footer:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
header {
padding: 1em;
background:#EFDECD; //#5ee;
text-align: center;
}
.mydiv{
height:calc(100% - 4em);
}
p{
font-family: Verdana, Geneva, sans-serif;
}
.paragraph{
font-size: 1em;
//font-family: Charcoal, sans-serif;
}
#content {
padding: 1em;
padding-bottom: 7em; /* Height of the footer element */
}
footer {
display: block;
width:100%;
height:4em;
// position: fixed;
bottom: 0;
left: 0;
background: #EFDECD; //#EFDECD
text-align: center;
overflow: hidden;
a{
padding: .75rem;
// position:relative;
top: 1.5em;
display: inline-block;
font-size: .72rem;
}
p{
font-size: .72rem;
}
}
video{
width: 100%;
height:auto;
}
//header{
////margin-top: 3ems;
// background-color: lightgrey;
//}
//footer{
// height: 5em;
// background-color: lightgrey;
// position: relative;
// bottom: 0px;
// width: 100%;
//
//}
.label{
margin-left: .5em;
margin-right: .5em;
}
table{
font-size: .75em;
}
.panel.callout a:not(.button):hover{
color: $anchor-font-color-hover;
}
.headingtext{
font-family: Century Gothic, sans-serif;
}
.headtext{
display:inline-block;
// font-size:3em;
margin: 0 10em;
text-align: center;
// font-family:"Courier New";
// font-weight: bold;
// margin-left: 6em;
}
.img2{
// max-height: 20%;
max-width: 25%;
float:right;
display:inline-block;
}
.accorborder{
border: black dotted 1px;
}
h6{font-weight: bold;}
.top-bar-section .right li .dropdown { /* left: auto; */ right: auto; }
dl.tabs dd{background-color:$oil;}
which works, but the footer is always visable and takes up screen space when there is important content on the page.
Ideally, I would like to change the position to 'absolute' and that looks fine on all the pages except on a page where there is not enough content, then the footer appears just below the content, and leaves a large white space gap from the footer to the bottomn of the page.
How can I simply make it so the footer always appears at the bottom of the page regardless of the page length? Also, feel free to inspect element to help. Currently its using the fixed position:
http://ops.emsofl.com/
A way to do it : set body and html to 100% height, then:
<div style="height:calc(100% - 30px);">
<!-- 30px for footer -->
<!-- header and content will be here -->
</div>
<footer style="height:30px;">must be fixed height</footer>
So, if you content is long, footer appears after it, if the page is empty, div will occupancy the whole screen anyway.
UPDATE try if it works in your browser jsfiddle
P.S. I've got a small netbook and don't see much of your page as it is, just header, footer and two lines of content (OK, may be ten lines :) )
You could move the footer into the content div and work with the position: absolute method you did.
It seems your body tag is not getting the full height of the page.. which probably is because you are floating elements and not clearing them properly, or you're using elements in the content div which are positioned absolute.. I haven't really checked the rest of the page..
Hope this helps.
I have my width for the status bar set to 100% in CSS, but yet it is still a little bit more. The rest of my page all cuts off at the right spot but you can scroll right and see my status bar sticking off. Please help! All help is appreciated!
Link to my site
CSS Code:
body{
margin: 0px;
background-color: lightgrey;
}
div.navigation{
width: 99%;
padding: 10px;
height: 25px;
background-color: black;
}
a.navigation{
color: #f5f5f5;
text-decoration: none;
font-size: 20px;
font-family: Century Gothic, sans-serif;
display: inline-block;
vertical-align: middle;
}
a.navigation:hover{
color: grey;
}
a.navigation:active{
color: darkred;
}
a.navigation:visited{
color: #f5f5f5;
}
In your CSS, you have some styles set on the navigation which are adding padding. Change the code starting at line 37 to:
div.navigation {
width:100%;
padding: 10px 0; /* Keeps the padding to the top and bottom only */
height:25px;
background-color: black;
}
Your padding is causing the browser to interpret the width of the bar as 100% of it's container width plus 20px of padding (10px left and 10px right).
You can use the CSS box-sizing: border-box; property to force the browser to render the box with the specified width and height, and place the border and padding inside the box.
div.navigation{
width: 100%;
padding: 10px;
height: 45px;
background-color: black;
box-sizing: border-box;
}
Note you will need to increase the height to 45px because the browser will not extend the height of the box for the top and bottom padding.
JS Fiddle fullscreen; code.
Hi I've got a website up.
I'm a no0b but I learn fast and I learn as I go.
However in one of the pages...the footer has gone up too close to the header. I want the area between the header and the footer fixed. I've tried changing the height of the main content in css but it doesn't seem to work. The front main page is ok. It's the about me page I'm having difficulty with. I just want the space between the header and footer fixed regardless of what's between them.
I use:
#site_content {
width: 950px;
overflow: hidden;
margin: 10px auto 0 auto;
padding: 10px;
}
thanks for your help.
Hey just replace your footer code by the below code
CSS
footer {
width: 100%; /* make width 100% changes done*/
font: normal 100% arial, sans-serif;
padding: 50px 20px 5px 0;
text-align: right;
background: transparent;
position: fixed; /*changes done*/
bottom: 0; /*changes done*/
top: auto; /*changes done*/
text-align: center; /*changes done*/
}
Add this to your #footer selector in your CSS:
#footer {
position:absolute;
bottom:0;
}
You can get an idea about how to do it by inspecting this template from twitter bootstrap:
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
BTW: Twitter Bootstap may result interesting to you (based on the screenshot you show).