How to make a footer placed below 'bottom:0' CSS? - javascript

I am trying to add footer on a HTML page. The HTML then printed and the footer should be on the bottom of every page. But, I got a problem.
There's a table generated in the HTML. The table row may need 2 or more pages to be displayed. The footer on the page with the table is overlapped with the table rows. How to fix this? My plan is to make the footer placed below bottom:0, but then the footer is not even displayed. Are there any work around for this problem?
This is my footer:
<footer>
<div class='div_footer'>
<?php echo "This is footer"; ?>
</div>
</footer>
This is my CSS for printing:
#media print {
footer {
position: fixed;
bottom: 0;
}
}
EDIT:
this is a fiddle : http://jsfiddle.net/88mnq8xo/

First need to setup footer in bottom of the page and bottom of the content. Then wright the same code inside the #media print.
First need to work with body and html.
html{
height: 100%;
width: 100%;
}
body{
height: 100%;
padding-bottom: 100px; /* This is footer height */
position: relative;
width: 100%;
}
Second need to work with the footer.
footer{
bottom: 0;
height: 100px; /* Footer height */
left: 0;
position: absolute;
width: 100%;
z-index: 1;
}
Third need to work with #media print.
#media print{
body{
padding-bottom: 100px; /* Footer height */
position: relative;
}
footer{
bottom: 0;
height: 100px; /* Footer height */
left: 0;
position: absolute;
width: 100%;
z-index: 1;
}
}
HTML
<html>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>
*,
*:after,
*:before{
box-sizing: inherit;
}
html{
box-sizing: border-box;
height: 100%;
width: 100%;
}
body{
background-color: #121212;
height: 100%;
margin: 0;
padding: 0 0 100px;
position: relative;
width: 100%;
}
footer{
background-color: #009688;
bottom: 0;
color: white;
font-size: 15px;
height: 100px;
left: 0;
line-height: 100px;
position: absolute;
text-align: center;
width: 100%;
z-index: 1;
}
#media print{
body{
background-color: #121212;
height: 100%;
margin: 0;
padding: 0 0 100px;
position: relative;
width: 100%;
}
footer{
background-color: #009688;
bottom: 0;
color: white;
font-size: 15px;
height: 100px;
left: 0;
line-height: 100px;
position: absolute;
text-align: center;
width: 100%;
z-index: 1;
}
}
<body>
<header></header>
<main></main>
<footer>© StackOverflow 2017</footer>
</body>
Hope this will help!!!

Try adding margin to the table. margin should be the same height of fixed positioned footer. Or you same amount of padding to the containing div.

Try this instead :
you should give the fixed position a height and a width of 100%,
for the body or the wrapper you can give it a padding-bottom same as the footer height.
if you dont want it to be fixed, you can change it to absolute but give it height and width.
html :
<html>
<body>
<div class="wrapper">
<div class="row" style="margin:0 1cm 0cm 1cm" id="div_print">
.
.
.
</div>
<footer></footer>
</div>
</body>
</html>
css:
#media print {
footer {
position: fixed;
bottom: 0;
height:40px;
background-color:#000;
width:100%;
left:0;
padding-left:22px;
color:#fff;
}
}
body,html{
min-height: 100%;
position: relative;
}
.wrapper{
position: relative;
width:100%;
padding-bottom:80px;
}

Related

Navigation bar : position Absolute and Sticky

I'm trying to make a navigation bar that overlap my header and stick to the top of the window on scroll.
It will start at top: 45px and stick at top: 0 on scroll.
My first approach was to set it at position: fixed; top: 45px and change the value with JS on a scroll event. But Firefox gave me the warning about "asynchronous panning" discussed on this post.
I have been able to do it with a bit of CSS trickery, but I am wondering if there is a simpler CSS way or a valid JS approach to do this (not throwing a warning).
body {
position: relative;
height: 100%;
width: 100%;
background-color: grey;
overflow-x: hidden;
margin: 0;
}
.container {
position: absolute;
top: 0;
left: -1px;
width: 1px;
bottom: 0;
padding-top: 45px;
overflow: visible;
}
nav {
position: sticky;
top: 0;
transform: translateX(-50%);
margin-left: 50vw;
width: 300px;
height: 70px;
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
width: 100%;
background-color: green;
}
<div class="container">
<nav></nav>
</div>
<header>
</header>
<main>
</main>
You can simplify your code and avoid using an extra container:
body {
background-color: grey;
margin: 0;
}
nav {
position: sticky;
top: 0;
width: 300px;
height: 70px;
margin:45px auto -115px; /* 115 = height + margin-top */
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
background-color: green;
}
<nav></nav>
<header>
</header>
<main>
</main>

Horizontally fix background image to logo in header

my problem is quite simple. I need the diagonal line in the background image to align with the "X" in the logo and make it stay there no matter how wide the viewport is. I tried to achieve it with css only but with no result. It´s gonna need some javascript I suppose but I have no idea where to start.
<body>
<header>
<div class="container">
<svg class="logo"></svg>
</div>
</header>
</body>
* {
box-sizing: border-box
}
body {
background: url(http://mujtest.tk/ci/site/templates/img/hero2.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
height: 100vh;
}
header {
opacity: 1;
height: 135px;
line-height:135px;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 5;
transition: all 0.3s;
z-index: 1000;
text-align: center;
}
.container {
width: 100%;
max-width: 1200px;
line-height: 135px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
padding: 0 80px;
}
.logo {
max-width: 200px;
float: left;
}
http://codepen.io/easynowbaby/pen/qdLbgP
Thanks!
looks like what you want is to play around with the background position, try something like this,
background: url(http://mujtest.tk/ci/site/templates/img/hero2.jpg) no-repeat center -110px;

Centering CSS Boxes(Html and Css)

I am trying to center these boxes in the middle of the screen both horizontally and vertically. Another question is how can I make it where it re-sizes automatically when I scale my page?
/*-------------------------
Simple reset
--------------------------*/
*{
margin:0;
padding:0;
}
/*-------------------------
General Styles
--------------------------*/
/*----------------------------
Color Themes
-----------------------------*/
.nav-colors{
position: relative;
background: white;
height: 200px;
width: 60%;
margin: 0 auto;
padding: 20px;
overflow: auto;
}
.home-link{
background-color:#00c08b;
width: 15%;
height: 80px;
display: inline-block;
margin-left: 10%;
}
.portfolio-link{
background-color:#ea5080;
width: 15%;
height: 80px;
display: inline-block;
}
.social-link{
background-color:#53bfe2;
width: 15%;
height: 80px;
display: inline-block;
}
.contact-link{
background-color:#f8c54d;
width: 15%;
height: 80px;
display: inline-block;
}
.blog-link{
background-color:#df6dc2;
width: 15%;
height: 80px;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>Neiko Anglin | Front-End Develper </title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="css/styles.css" />
<!-- Font Awesome Stylesheet -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.css" />
</head>
<body>
<div class="nav-colors">
<div class="home-link">
</div>
<div class="portfolio-link">
</div>
<div class="social-link">
</div>
<div class="contact-link">
</div>
<div class="blog-link">
</div>
</div>
</body>
</html>
You can use absolute positioning on the container to center vertically and horizontally:
/*-------------------------
Simple reset
--------------------------*/
* {
margin:0;
padding:0;
}
/*-------------------------
General Styles
--------------------------*/
/*----------------------------
Color Themes
-----------------------------*/
.nav-colors {
position: absolute;
background: white;
height: 84px;
width: 60%;
margin: auto;
padding: 20px;
overflow: auto;
top:0;
right:0;
bottom:0;
left:0;
}
.home-link {
background-color:#00c08b;
width: 15%;
height: 80px;
display: inline-block;
margin-left: 10%;
}
.portfolio-link {
background-color:#ea5080;
width: 15%;
height: 80px;
display: inline-block;
}
.social-link {
background-color:#53bfe2;
width: 15%;
height: 80px;
display: inline-block;
}
.contact-link {
background-color:#f8c54d;
width: 15%;
height: 80px;
display: inline-block;
}
.blog-link {
background-color:#df6dc2;
width: 15%;
height: 80px;
display: inline-block;
}
<div class="nav-colors">
<div class="home-link"></div>
<div class="portfolio-link"></div>
<div class="social-link"></div>
<div class="contact-link"></div>
<div class="blog-link"></div>
</div>
To align vertically you need a wrapper class with position absolute in CSS. Search for vertical center which will fetch you lots of results.
To resize boxes along with screen resize - is responsive template. I could suggest you to use Twitter Bootstrap which takes care of your dimensions.
Change your .nav-color class to
.nav-colors{
position: fixed;
background: white;
height: 80px;
width:60%;
margin: -60px 0 0 0;
padding: 20px;
overflow: auto;
top:50%;
left:20%;
}
/*-------------------------
Simple reset
--------------------------*/
* {
margin: 0;
padding: 0;
}
/*-------------------------
General Styles
--------------------------*/
/*----------------------------
Color Themes
-----------------------------*/
.nav-colors {
position: fixed;
background: white;
height: 80px;
width: 60%;
margin: -60px 0 0 0;
padding: 20px;
overflow: auto;
top: 50%;
left: 20%;
}
.home-link {
background-color: #00c08b;
width: 15%;
height: 80px;
display: inline-block;
margin-left: 10%;
}
.portfolio-link {
background-color: #ea5080;
width: 15%;
height: 80px;
display: inline-block;
}
.social-link {
background-color: #53bfe2;
width: 15%;
height: 80px;
display: inline-block;
}
.contact-link {
background-color: #f8c54d;
width: 15%;
height: 80px;
display: inline-block;
}
.blog-link {
background-color: #df6dc2;
width: 15%;
height: 80px;
display: inline-block;
}
<div class="nav-colors">
<div class="home-link">
</div>
<div class="portfolio-link">
</div>
<div class="social-link">
</div>
<div class="contact-link">
</div>
<div class="blog-link">
</div>
</div>
You just have to add some properties to your .nav-colors:
.nav-colors{
position: relative;
background: white;
height: 200px;
width: 60%;
margin: 0 auto;
padding: 20px;
overflow: auto;
line-height: 200px;
text-align: center;
}
And add vertical-align: middle; to elements you want to center vertically.
First the explanation, then some code.
Vertical centering is a classic css issue. The vh unit has come in very handy for this recently. Coupled with margin (and maybe calc) its now a solvable thing.
Centering it horizontally is simple enough, and you have that figured out. Just have a width and set margin: 0 auto and you are good to go.
With Vertical Centering the key thing to remember is you are centering your element, so half is over the middle, half is under the middle. With that we can make margin: calc(50vh-40px) auto 0 for your 80px high element and presto, it's in the middle vertically.
One step further:
Like horizontal centering, you seem to already have the dynamic width down by using %.
For a dynamic vertical size we can again turn to vh. The nice thing is this saves us the css calc function. Just subtract half the height from the 50vh margin and you'll get your margin. So for height: 20vh the margin is margin: 40vh auto 0
Here is a JsFiddle
and here is some code:
CSS:
*{
margin: 0;
padding: 0;
}
html, body{
width: 100vw;
height: 100vh;
}
.nav-colors{
width: 80%;
height: 20vh;
margin: calc(40vh) auto 0;
}
.nav-colors div{
width: 18%;
margin: 0 0 0 1%;
height: 100%;
display: inline-block;
}
.home-link{background-color:#00c08b;}
.portfolio-link{background-color:#ea5080;}
.social-link{background-color:#53bfe2;}
.contact-link{background-color:#f8c54d;}
.blog-link{background-color:#df6dc2;}
HTML:
<div class="nav-colors">
<div class="home-link"></div>
<div class="portfolio-link"></div>
<div class="social-link"></div>
<div class="contact-link"></div>
<div class="blog-link"></div>
</div>
enjoy.

Positioning z-index does not work as expected

I cannot position info-pop-title on top of bar-header as you can see from my current code the text "TEST----" is visible but under the bar-header element.
http://jsfiddle.net/uvh4ymh9/
Could you point me out what am I doing wrong and how to fix it
PS: I cannot change structure for the HTML, only CSS solution
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.bar-header, .bar-footer {
position: fixed;
left: 0px;
width: 1280px;
z-index: 1;
background-color: rgba(50,50,50,0.5);
text-align: center;
}
.bar-header {
top: 0px;
height: 60px; /* safearea top 25 + content 20 + space bottom 15*/
}
.bar-header h1 {
position: fixed;
top: 25px; /* safearea top 25 */
left: 25px; /* safearea left */
font-size: 20px; /* content */
}
.bar-footer {
top: 670px;
height: 50px; /* safearea bottom 20 + content 20 + space top 10 */
font-size: 20px; /* content */
}
.bar-footer > ul {
position: fixed;
top: 680px; /* footer top 670 + space top 10*/
left: 1150px;
}
.bar-footer > ul li {
float: left;
}
.bar-footer li:nth-child(1) span {
color: blue;
}
#scene-main {
position: fixed;
top: 0px;
left: 0px;
width: 1280px;
height: 720px;
/*background: #ffffff url("/auth/assets/tv-safearea-transparent.png") no-repeat left;*/
background-color: darkgrey;
}
#btn-up, #btn-down {
position: fixed;
left: 1230px;
width: 50px;
height: 50px;
background-color: yellow;
outline: 1px solid black;
z-index: 200;
}
#btn-up {
top: 0px;
}
#btn-down {
top: 50px;
}
#content {
position: fixed;
top: 0px; /* header */
}
.content-section:first-child {
margin-top: 60px; /* header height content does not go under header */
}
.content-section {
background-color: lightgray;
outline: 1px solid black;
width: 1280px;
}
/* Content sizes */
.content-snippet {
height: 360px; /* 1 slots */
width: 1280px;
background-color: lightblue;
outline: 1px solid green;
}
.content-snippet:nth-child(even) {
background-color: lightcoral;
}
.content-section h2 {
position: relative;
top: 30px; /**avoid to go under the header bar*/
}
.active {
background-color: violet !important;
}
.snippet-pop-info {
position: fixed;
top: 640px; /*430 = final position as visible / 670 = final position as not visible */
width: 1280px;
height: 240px;
background-color: darkblue;
opacity: 1;
color: white;
}
.snippet-pop-info ul {
position: absolute;
top: 0px;
left: 1155px;
width: 100px;
}
.snippet-pop-info ul li {
width: 100px;
}
.snippet-pop-info .rating {
position: absolute;
top: 65px;
left: 25px;
unicode-bidi: bidi-override;
direction: rtl;
}
.snippet-pop-info .rating > span {
display: inline-block;
position: relative;
width: 20px;
}
.snippet-pop-info .rating > span:hover:before,
.snippet-pop-info .rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
}
#info-pop-title {
position: fixed;
top: 0px;
left: 250px;
z-index: 1;
font-size: 30px;
color: white;
font-weight: bold;
}
#info-pop-description {
position: absolute;
overflow: hidden; /* hide content that does not fit in the columns*/
top: 25px;
left: 300px; /* TEST */
height: 80px;
width: 800px;
font-size: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
</style>
</head>
<body>
<div id="viewport">
<div id="scene-main" class="scene" style="">
<div class="bar-header"><h1>ChannelLive logo</h1></div>
<div id="page">
<div id="content">
<div id="snippet-cnt-0" class="content-snippet">
0
<div class="snippet-pop-info" style="top: 720px;">
<h1 id="info-pop-title" style="word-wrap: break-word;">TEST-----------------</h1>
<div class="rating"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div>
<div id="info-pop-description" style="word-wrap: break-word;">null</div>
<ul>
<li class="focusable" data-href="movie-play">Play</li>
<li class="focusable" data-href="movie-details">Details</li>
</ul>
</div>
</div>
</div>
</body>
</html>
It's not clear what you're trying to accomplish, but I can make Chrome work like Firefox by getting rid of the
position: fixed;
style from #content. Whether that will work in the larger context of your layout, I don't know, but the problem is that the way z-index works is weird and complicated, and involves not just individual fixed elements but also any fixed parents they might have.
edit — oh also, set the z-index of .snippet-pop-info to 2. Here is an updated version of your fiddle.
Make your
.bar-header, .bar-footer{
z-index:0;
}
This will do the trick. Since your z-index for .bar-header and .info-pop-title are the same.
Add z-index in your content div
#content
{
position:fixed;
top:0;
z-index:1;
}
I'm afraid you can't make it work with the way your html is nested.
The element you want to pull on top to cover the rest is located in the main container while your second element is isolated in the header. If you want to bring your info-pop-title there you'll have to change the z-index of your #page element, which will cover everything.
The only thing I see you can achieve with this structure would be to position your diverse containers relatively and change the css of your info-pop-title with a negative margin, position absolutely this time.

3 column layout auto middle col width

I am trying to make a 3 column layout webpage with percentage wrapper width, fixed (pixels) left and right side width and a varying middle column width but i cannot get it to work for the middle column. Here is the source:
html
<aside class="left">
<span>Categories</span>
</aside>
<section>
<span>Main</span>
</section>
<aside class="right">
<span>Test</span>
</aside>
css
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
width: 100%;
}
.container > aside.left {
float: left;
width: 197px;
border-right: black dashed 3px;
}
.container > section {
float: left;
width: auto;
}
.container > aside.right {
float: left;
background-color: #005f98;
width: 200px;
}
Have you looked at the flexible box model? http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
If you don't have to support IE7, this will work:
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
width: 100%;
}
.container {
display: table;
height: 100%;
width: 100%;
min-width: 600px;
}
.container > aside, .container > section {
display: table-cell;
width: auto;
}
.container > aside.left {
width: 197px;
border-right: black dashed 3px;
}
.container > aside.right {
background-color: #005f98;
width: 200px;
}
You could replace your floats with absolutely positioned sidebars:
<aside class="left">
<span>C</span>
</aside>
<section>
<span>M</span>
</section>
<aside class="right">
<span>T</span>
</aside>
And
.left {
position: absolute;
top: 0;
left: 0;
width: 50px;
display: block;
background: #ffe;
height: 100%;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 50px;
display: block;
background: #fef;
height: 100%;
}
section {
display: block;
margin: 0 50px; /* Margin sized to match the sidebars */
background: #fee;
}
Live: http://jsfiddle.net/ambiguous/puPbu/
The colors and sizes are just to clarify where everything is. If you're going to put a wrapper <div> around the whole thing then you'll want to have position: relative on it to get the absolutely positioned sidebars in the right place.
in CSS3 you can use
#multicolumn{
column-count: 3
}
check it on http://jsfiddle.net/ilumin/w7F7c/
reference: http://www.quirksmode.org/css/multicolumn.html
Try setting the widths according to percentages, so for example:
.container > aside.left {
float: left;
width: 31%;
border-right: black dashed 3px;
}
.container > section {
float: left;
width: 31%;
}
.container > aside.right {
float: left;
background-color: #005f98;
width: 31%;
}
Thats how i've overcome this problem before.
If you specify width and float for the left and right column, the middle column will automatically fill up the gap:
http://jsfiddle.net/xHnDX/4/
As you can see, the content div actually overlaps the side divs, although the content will stay between them. If you like, you can add an extra container to compensate for the width of the content div as shown here:
http://jsfiddle.net/YauQc/

Categories