How to control #id link on a page? - javascript

This FIDDLE will explain more than my words
How to avoid hidden Title when click on Link id 2, Link id 3 and Link id 4?
PS: Please if anyone have a better Name for this question, please help, my English is not that good!
<header id="header">
header
</header>
<div class="catalog">
<div class="col1">
<ul>
<li>Link id 1</li>
<li>Link id 2</li>
<li>Link id 3</li>
<li>Link id 4</li>
<li>Link id 5</li>
</ul>
</div>
<div class="col_alternativ"></div>
<div class="col2">
<div id="id1" class="item">
<h2>Link id 1</h2>
</div>
<div id="id2" class="item">
<h2>Link id 2</h2>
</div>
<div id="id3" class="item">
<h2>Link id 3</h2>
</div>
<div id="id4" class="item">
<h2>Link id 4</h2>
</div>
<div id="id5" class="item">
<h2>Link id 5</h2>
</div>
</div>
</div>
$(window).scroll(function() {
var newValue = {opacity : 100}
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$("#header").addClass("stablemenu").animate(newValue, 1000);
$(".col1").addClass("stable_col1").animate(newValue, 1000);
$(".col_alternativ").css({"display":"inline-block"});
} else {
$("#header").removeClass("stablemenu");
$(".col1").removeClass("stable_col1").animate(newValue, 1000);
$(".col_alternativ").css({"display":"none"});
}
});


I was able to do what you wanted... I think. See here: http://jsfiddle.net/wilsonjonash/tdz3H/8/
Edit: Here's the code
<header id="header">
header
</header>
<div class="catalog">
<div class="col1">
<ul>
<li>Link id 1</li>
<li>Link id 2</li>
<li>Link id 3</li>
<li>Link id 4</li>
<li>Link id 5</li>
</ul>
</div>
<div class="col_alternativ"></div>
<div class="col2">
<div class="item">
<div id="id1" class="hederid"></div>
<h2>Link id 1</h2>
</div>
<div class="item">
<div id="id2" class="hederid"></div>
<h2>Link id 2</h2>
</div>
<div class="item">
<div id="id3" class="hederid"></div>
<h2 id="id3">Link id 3</h2>
</div>
<div class="item">
<div id="id4" class="hederid"></div>
<h2>Link id 4</h2>
</div>
<div class="item">
<div id="id5" class="hederid"></div>
<h2>Link id 5</h2>
</div>
</div>
</div>
CSS:
#header {
width: 100%;
height: 100px;
background-color: red;
}
.stablemenu {
position: fixed;
top: 0px;
left:0px;
z-index: 2;
background-color: yellow !important;
}
.catalog {
display: block;
width: 100%;
margin-top: 40px;
}
.catalog .col1 {
display: inline-block;
border: 1px solid #ccc;
width: 25%;
height: auto;
padding: 1%;
margin-right: 1%;
}
.catalog .col_alternativ {
border: 1px solid #fff;
width: 25%;
height: auto;
padding: 1%;
margin-right: 1%;
display: none;
}
.stable_col1 {
position: fixed;
top: 140px;
left: 0px;
}
.catalog .col2 {
display: inline-block;
width: 70%;
height: auto;
vertical-align: top;
}
.item {
border: 1px solid #ccc;
width: auto;
height: 300px;
margin-bottom: 40px;
position: relative;
}
.item .hederid {
position: absolute;
background: #ccc;
width: 20px;
height: 20px;
left: 0px;
top: -140px;
}
JavaScript:
$(window).scroll(function() {
var newValue = {opacity : 100}
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$("#header").addClass("stablemenu").animate(newValue, 1000);
$(".col1").addClass("stable_col1").animate(newValue, 1000);
$(".col_alternativ").css({"display":"inline-block"});
$('.col2').css('margin-top','100px');
//$("#topbar").show().animate(newValue, 1000);
} else {
$("#header").removeClass("stablemenu");
$(".col1").removeClass("stable_col1").animate(newValue, 1000);
$(".col_alternativ").css({"display":"none"});
$('.col2').css('margin-top','0');
}
});

Related

Select a div inside another div outside the currect div:hover

I am trying to show the .right-text1 element (which is inside .right-container div) when the mouse hovers over .project1 element (which is inside .left-container div). However, I am unable to code it with CSS since selectors work only inside the current parent div.
I have the following code:
.left-container {
float: left;
width: 25%;
}
.left-container li {
list-style: none;
padding: 10px;
font-size: 20px;
border: 2px solid;
margin-top: 5px;
}
.right-container {
width: 74%;
float: right;
margin-top: 16px;
height: 200px;
}
.right-text1,
.right-text2,
.right-text3,
.right-text4 {
border: 2px solid;
padding: 5px;
height: 50%;
margin-bottom: 3px;
}
/* This is where I try to show RIGHT-TEXT1 upon hovering on PROJECT1 div,
but the selector does not work due to trying to access .right-text1 but it is outside the current DIV */
.project1:hover~.right-text1 {
display: none;
}
<div class="left-container">
<ul>
<div class="project1">
<li>Project 1</li>
</div>
<div class="project2">
<li>Project 2</li>
</div>
<div class="project3">
<li>Project 3</li>
</div>
<div class="project4">
<li>Project 4</li>
</div>
</ul>
</div>
<div class="right-container">
<div class="right-text1" style="background-color: tomato;">
Information about Project 1
</div>
<div class="right-text2" style="background-color: teal;">
Information about Project 2
</div>
<div class="right-text3" style="background-color: green;">
Information about Project 3
</div>
<div class="right-text4" style="background-color: yellow;">
Information about Project 4
</div>
</div>
It is imperative to keep the format, where the two containers reside next to each other and 25% and 74% width stays.
It might be super easy, but I am learning CSS for a week now and this stumbled me.
Any help would be greatly appreciated.

As explaned in the comments, you'll need JS for that.
Here a sample that adds a class on mouse enter, and remove it on mouse leave, mimicking the hover effect.
document.querySelectorAll('[data-project]').forEach(project => {
const name = project.dataset.project
const infoElement = document.querySelector(`[data-project-info="${name}"]`)
// Mouse enter
project.addEventListener('mouseenter', () => {
infoElement.classList.add('is-hovered')
})
// Mouse leave
project.addEventListener('mouseleave', () => {
infoElement.classList.remove('is-hovered')
})
})
.left-container {
float: left;
width: 25%;
}
.left-container li {
list-style: none;
padding: 10px;
font-size: 20px;
border: 2px solid;
margin-top: 5px;
}
.right-container {
width: 74%;
float: right;
margin-top: 16px;
height: 200px;
}
.right-text1,
.right-text2,
.right-text3,
.right-text4 {
border: 2px solid;
padding: 5px;
height: 50%;
margin-bottom: 3px;
display: none;
}
.right-text1.is-hovered,
.right-text2.is-hovered,
.right-text3.is-hovered,
.right-text4.is-hovered {
display: block;
}
<div class="left-container">
<ul>
<div class="project1" data-project="1">
<li>Project 1</li>
</div>
<div class="project2" data-project="2">
<li>Project 2</li>
</div>
<div class="project3" data-project="3">
<li>Project 3</li>
</div>
<div class="project4" data-project="this-text-matches-here">
<li>Project 4</li>
</div>
</ul>
</div>
<div class="right-container">
<div class="right-text1" style="background-color: tomato;" data-project-info="1">
Information about Project 1
</div>
<div class="right-text2" style="background-color: teal;" data-project-info="2">
Information about Project 2
</div>
<div class="right-text3" style="background-color: green;" data-project-info="3">
Information about Project 3
</div>
<div class="right-text4" style="background-color: yellow;" data-project-info="this-text-matches-here">
Information about Project 4
</div>
</div>

Jquery Move custom tabs to next

i have some basic html/css tabs and i want want to move tab to next by clicking a link at bottom of every tab.
HTML
<ul class="tabs">
<li class="active">
Explainer (2mins)
<div class="content">
<div id="Video" class="tabcontent">
<div class="coltab">
content A
</div>
<h4>Next tab: View Some Sample Lessons</h4>
</div>
</div>
</div>
</li>
<li>
Sample Lessons
<div class="content coltab">
<div>
Content B
</div>
<h4> Next tab: See the Your Offer. </h4>
</div>
</li>
</ul>
Jquery for this is
$(document).ready(function(){
$(".tabs").after("<div class='tabContent'></div>");
$(".tabs li>a").on("click", function(e){
var $tab = $(this).parent();
var tabIndex = $tab.index();
$tab.parent("ul").find("li").removeClass("active");
$tab.addClass("active");
var tabContent = $tab.find(">div").clone(true);
$(".tabContent").html(tabContent);
e.preventDefault();
});
});
it is working fine for me now as i click on tab its changes.
Live demo
$(document).ready(function(){
$(".tabs").after("<div class='tabContent'></div>");
$(".tabs li>a").on("click", function(e){
var $tab = $(this).parent();
var tabIndex = $tab.index();
$tab.parent("ul").find("li").removeClass("active");
$tab.addClass("active");
var tabContent = $tab.find(">div").clone(true);
$(".tabContent").html(tabContent);
e.preventDefault();
});
});
.coltab{
height: 51vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tabs {
margin: 0;
padding: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
overflow: hidden;
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.tabs li {
display: table-cell;
margin: 0;
padding: 0;
list-style: none;
border-right: 1px solid #000;
}
.tabs li>a {
display: block;
font-weight: bold;
text-align: center;
padding: 5px;
}
.tabs li>a:hover,.tabs li.active a {
background-color: #D3D3D3;
}
.tabs li .content {
display: none;
}
.tabContent {
padding: 15px 15px 0px 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs">
<li class="active">
Explainer (2mins)
<div class="content">
<div id="Video" class="tabcontent">
<div class="coltab">
content A
</div>
<h4>Next tab: View Some Sample Lessons</h4>
</div>
</div>
</div>
</li>
<li>
Sample Lessons
<div class="content coltab">
<div>
Content B
</div>
<h4> Next tab: See the Your Offer. </h4>
</div>
</li>
<li>
Special Offer
<div class="content">
<div class="coltab">
Content C
</div>
<h4>Next tab: To Register and Subscribe>>></h4>
</div>
</div>
</li>
<li>
Subscribe
<div class="content coltab">
<div>
Content D
</div>
<div>
<h4>Next tab: To Request a callback</h4>
</div>
</div>
</li>
<li>
Request a Callback
<div class="content coltab">
<div>
Content E
</div>
<h4>Next tab: Reviews</h4>
</div>
</div>
</div>
</li>
<li>
Reviews
<div class="content">
<div>
Content F
</div>
<h4>Back to first tab</h4>
</div>
</div>
</div>
</li>
</ul>

You can add this code:
$("h4").click(function(){
var activeTab = $("ul.tabs > li.active");
var nextTab = (activeTab.is(':last-child') == true ? $("ul.tabs > li:first") : $("ul.tabs > li.active").next("li"));
nextTab.find("a").trigger("click")
});
it will allow you to click on the h4 aka next and move to the next content
Working demo
$(document).ready(function(){
$(".tabs").after("<div class='tabContent'></div>");
$(".tabs li>a").on("click", function(e){
var $tab = $(this).parent();
var tabIndex = $tab.index();
$tab.parent("ul").find("li").removeClass("active");
$tab.addClass("active");
var tabContent = $tab.find(">div").clone(true);
$(".tabContent").html(tabContent);
e.preventDefault();
});
$("h4").click(function(){
var activeTab = $("ul.tabs > li.active");
var nextTab = (activeTab.is(':last-child') == true ? $("ul.tabs > li:first") : $("ul.tabs > li.active").next("li"));
nextTab.find("a").trigger("click")
});
});
.coltab{
height: 51vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tabs {
margin: 0;
padding: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
overflow: hidden;
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.tabs li {
display: table-cell;
margin: 0;
padding: 0;
list-style: none;
border-right: 1px solid #000;
}
.tabs li>a {
display: block;
font-weight: bold;
text-align: center;
padding: 5px;
}
.tabs li>a:hover,.tabs li.active a {
background-color: #D3D3D3;
}
.tabs li .content {
display: none;
}
.tabContent {
padding: 15px 15px 0px 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs">
<li class="active">
Explainer (2mins)
<div class="content">
<div id="Video" class="tabcontent">
<div class="coltab">
content A
</div>
<h4>Next tab: View Some Sample Lessons</h4>
</div>
</div>
</div>
</li>
<li>
Sample Lessons
<div class="content coltab">
<div>
Content B
</div>
<h4> Next tab: See the Your Offer. </h4>
</div>
</li>
<li>
Special Offer
<div class="content">
<div class="coltab">
Content C
</div>
<h4>Next tab: To Register and Subscribe>>></h4>
</div>
</div>
</li>
<li>
Subscribe
<div class="content coltab">
<div>
Content D
</div>
<div>
<h4>Next tab: To Request a callback</h4>
</div>
</div>
</li>
<li>
Request a Callback
<div class="content coltab">
<div>
Content E
</div>
<h4>Next tab: Reviews</h4>
</div>
</div>
</div>
</li>
<li>
Reviews
<div class="content">
<div>
Content F
</div>
<h4>Back to first tab</h4>
</div>
</div>
</div>
</li>
</ul>

Open one div at a time and close all others which are opened jquery

Trying to implement a show/hide description box.
If the user clicks on the first showDesc link it opens it's description box.
Then if the user clicks the second showDesc link it opens it's description box and should close all the others which are opened.
it below :
Below is my code:
$(".showDesc").click(function () {
$(".descContainer").toggleClass("show");
});
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
display: none;
line-height: 24px;
background-color: #fdfdfd;
}
.descContainer.show {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
display: block;
line-height: 24px;
background-color: #fdfdfd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
</section>
</main>

Your issue is because you're changing the class on all the .descContainer elements at once, not just the one related to the clicked .showDesc.
To fix this you need to use DOM traversal to get the closest('.feedContainer) then next() to get the element you want to toggle, like this:
$(".showDesc").click(function() {
var $target = $(this).closest('.feedContainer').next(".descContainer").toggleClass("show");
$(".descContainer").not($target).removeClass('show'); // hide other open elements
});
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0, 0, 0, .08);
display: none;
line-height: 24px;
background-color: #fdfdfd;
}
.descContainer.show {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0, 0, 0, .08);
display: block;
line-height: 24px;
background-color: #fdfdfd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
</section>
</main>

You don't need jQuery for that, you don't even need javascript for that. Setting ids and internals links on your HTML + using the :target CSS pseudo-class will do.
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
line-height: 24px;
display:none;
}
.descContainer:target {
display:block;
}
<main>
<section>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc" href="#1">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer" id="1">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc" href="#2">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer" id="2">
<div>Description Text</div>
</div>
</article>
</section>
</main>

Make nested child element full width

I would like to maintain markup structure and have nested child element go full screen width to have different background color.
HTML example can be seen here (fiddle)
li {
float: left;
width: 50%;
outline: 1px solid pink
}
.section-bg-color {
display: inline-block;
background-color: gray;
}
.page-bg-color {
background-color: yellow;
}
<div class="page-bg-color">
<div class="section-bg-color">
<ul class="addon-list">
<li>
<div class="header">1 Headline</div>
<div class="hidden-content" id="1" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">2 Headline</div>
<div class="hidden-content" id="2" style="display: block;">Hidden content is shown</div>
</li>
<li>
<div class="header">3 Headline</div>
<div class="hidden-content" id="3" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">4 Headline</div>
<div class="hidden-content" id="4" style="display: none;">Hidden content</div>
</li>
</ul>
</div>
</div>
This is what I have:
Wanted result:

The only way to make your hidden divs stretch full width is to position them absolutely, and will only work if none of the parents up to the page div are positioned. Along with this I assume you are using js to hide / show these divs, so when you show the div, you will need to add some bottom margin to the containing li to make room for the hidden content.
Here is a quick mockup of what I mean:
$('.header').hover(function() {
var title = $(this),
content = $(this).next();
content.show();
title.parent().css('margin-bottom', content.outerHeight());
},
function() {
var title = $(this),
content = $(this).next();
content.hide();
title.parent().css('margin-bottom', 0);
});
li {
float: left;
width: 50%;
outline: 1px solid pink
}
li:nth-child(odd) {
clear:left;
}
.section-bg-color {
width:50%;
display:inline-block;
background-color: gray;
}
.page-bg-color {
background-color: yellow;
position:relative;
}
.hidden-content {
position:absolute;
left:0;
right:0;
background:lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-bg-color">
<div class="section-bg-color">
<ul class="addon-list">
<li>
<div class="header">1 Headline</div>
<div class="hidden-content" id="1" style="display: none;">Hidden content 1</div>
</li>
<li>
<div class="header">2 Headline</div>
<div class="hidden-content" id="2" style="display: none;">Hidden content is shown</div>
</li>
<li>
<div class="header">3 Headline</div>
<div class="hidden-content" id="3" style="display: none;">Hidden content 3</div>
</li>
<li>
<div class="header">4 Headline</div>
<div class="hidden-content" id="4" style="display: none;">Hidden content 4</div>
</li>
</ul>
</div>
</div>
Updated fiddle

Try adding
.yourSelectorForDesiredContent {
margin-left: -100%;
background-color: yourColourCode;
}
That should pull it across the screen for you. Not the prettiest way but should achieve result you want.

It's ugly, but you can do something with negative margin and viewport units..
I've used a pseudoelement to make it stretch to the left edge.
fiddle
body {
margin: 0;
}
li {
float: left;
width: 50%;
outline: 1px solid pink
}
.section-bg-color {
display: inline-block;
background-color: gray;
}
.page-bg-color {
background-color: yellow;
}
.hidden-content {
width: calc(100vw - 40px);
margin-left: -100%;
background: orange;
padding: 2% 0%;
position: relative;
}
.hidden-content:after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: orange;
width: 3em;
margin-left: -3em;
}
<div class="page-bg-color">
<div class="section-bg-color">
<ul class="addon-list">
<li>
<div class="header">1 Headline</div>
<div class="hidden-content" id="1" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">2 Headline</div>
<div class="hidden-content" id="2" style="display: block;">Hidden content is shown</div>
</li>
<li>
<div class="header">3 Headline</div>
<div class="hidden-content" id="3" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">4 Headline</div>
<div class="hidden-content" id="4" style="display: none;">Hidden content</div>
</li>
</ul>
</div>
</div>
EDIT
To make this work for all hidden divs you can use the nth-of-type selector on the list item.
fiddle

Try:
li {
float: left;
width: 50%;
outline: 1px solid pink
}
.section-bg-color {
//display:inline-block;
background-color: gray;
}
.page-bg-color {
background-color: yellow;
padding: 5px 10px;
}
.addon-list {
content: "";
display: table;
clear: both;
}

li {
float: left;
width: 50%;
outline: 1px solid pink
}
.section-bg-color {
display: block;
background-color: gray;
}
.page-bg-color {
background-color: yellow;
}
.clr {
clear: both;
}
<div class="page-bg-color">
<div class="section-bg-color">
<ul class="addon-list">
<li>
<div class="header">1 Headline</div>
<div class="hidden-content" id="1" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">2 Headline</div>
<div class="hidden-content" id="2" style="display: block;">Hidden content is shown</div>
</li>
<li>
<div class="header">3 Headline</div>
<div class="hidden-content" id="3" style="display: none;">Hidden content</div>
</li>
<li>
<div class="header">4 Headline</div>
<div class="hidden-content" id="4" style="display: none;">Hidden content</div>
</li>
<div class="clr"></div>
</ul>
</div>
</div>
fiddler link is https://jsfiddle.net/e3sngy3s/8/

Show Div on top..its not working in Chrome browser

I have this div and I have set its z-index : 99999, its working fine on firefox and safari, but when I ma testing it on chrome , the footer is not the top element,
What else should I do to make it topmost element
<div id="footer" style="z-index: 99999 !important; width: 100%; height: 65px; position: fixed; bottom: 0px; ">
<div class="container">
<div class="footer-nav">
<ul>
<li>Team</li>
</ul>
<ul>
<li>Jobs</li>
</ul>
<ul>
<li><Twitter></li>
</ul>
</div>
<hr>
</div>
</div>

http://jsfiddle.net/A5jcT/2/
<div id="footer">
<div class="container">
<div class="footer-nav">
<ul>
<li>Team</li>
</ul>
<ul>
<li>Jobs</li>
</ul>
<ul>
<li><Twitter></li>
</ul>
</div>
<hr>
</div>
</div>
#footer
{
border:1px solid blue; z-index: 9999;width: 100%;
height: 65px;position: ; bottom: 0px;
}
.container
{
border:1px solid red;position:relative;z-index: -10
}
.footer-nav
{
border:1px solid green;position:relative;z-index: -20
}
it looks like you have to make other elements also positioned. Now you have the footer on top.

Categories

Resources