I have a navbar that has its position fixed. If i give the content of the body position relative it is causing that content to move over the navbar, instead of moving underneath the navbar. I tried giving navBar higher z-index values, but that didn't work out. Is there any workaround? (Using transform(translate()) is also causing the content with that style applied to come on top.)
P.S. Giving z-index of -1 to the contents who has either relative positioning or has transform applied can make the content to go beneath. But then, I have to apply that to all the contents of the page. So I would prefer something that can be done easier.
I have added some dummy code to illustrate the issue. I would like the content to go beneath the navbar by changing the css of just the navbar because I have a lot of content in reality and changing all the code would be difficult.
Code to illustrate the issue.
hello my friend i thing this code might be better then yourse check it
<!DOCTYPE html>
<html>
<head>
<title>exircice</title>
<!--styling -->
<style type="text/css">
.navbar
{
background-color: red;
width:100vw;
position: fixed;
left: 0;
right: 0;height:40px;
z-index: 2;
}
.content
{
position: relative;
top: 45px;
height: 1000px;
background: #000;
z-index: 1;
}
</style>
</head>
<body>
<!--navbar -->
<div class="navbar">
<p>text here</p>
</div>
<!--navbar -->
<div class="content"> <!--navbar -->
</div>
</body>
</html>
Related
I have not been able to get any of the solutions to work.
The footer keeps on leaving a gap at the bottom of this page
The footer leaves a gap of white space.
I have tried
#footer {
position:absolute;
bottom:0;
}
and it seems to make it worse...
Any ideas?
UPDATE:
still can't get it to work. tried setting the height of the body and wrapper. tried all code below. and it just ends up overlapping
Try this...
#footer-wrap {
position: fixed;
bottom: 0;
width: 100%;
}
Here you go:
#footer {
position:fixed;
bottom:0;
left:0;
width:100%;
}
Based on your question I don't think you want to use position: fixed because if your page were to get any taller (to the point that vertical scrolling was required), the footer would stay attached to the bottom of the page wherever you went. I think what you want is this:
<style>
.footer-wrap{position: absolute; bottom: 0px; width: 100%;}
body{overflow: hidden;}
</style>
You need to add the overflow: hidden on the body because the 100% width on the footer will create a horizontal scroll.
The footer is an automatically defined element in HTML5 you basic page should look like this and everything should be place
<!DOCTYPE html>
<html lang="en">
<head>
<title>Place title here</title>
<meta charset="utf-8">
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>
A good CSS configuration for each could be something like
<style>
header {
background-color:place color here;
}
nav {
background-color:place color here;
}
main {
background-color:place color here;
}
footer {
background-color:place color here;
}
</style>
NOTE:Footer and header should be same color as the body color makes page more presentable
I was able to fix it by setting a bottom margin in the post
article.post-72.page.type-page.status-publish.hentry {
margin-bottom: 124px!important;
}
and adding some height and overflow the the footer
.footer-wrap {
height: 115px;
overflow: hidden;
}
Try this:
#footer {
position:fixed;
bottom:0;
width:100%;
}
I believe that is what you are after. Position absolute relates to the document whereas position fixed relates to the screen view.
EDIT
Assuming your footer has a height of 50px say, you need to add a margin to an element that is above the footer in the DOM, some sort of wrapper ideally that appears on every page of your site (this makes the most sense structurally.
Even if you add this element yourself assuming you have access to a template.
So it could look something like this:
<header></header>
<div class="content">
//wrap all of your main content block here
</div>
<footer></footer>
Then for the css add margin-bottom:70px to the .content wrapper
I might be a little late, but I stumbled upon this today and I know the solution for it.
Just use: display:flex;
This'll make this white space vanish. Hope this helps someone.
I have a navigation div anchored at the top of my page. The div is entirely text, and works fine, however when scrolling over an image or text, it cannot be seen clearly. I tried to remedy this by adding a background color to the div tag, but for some reason, the background color changes the color of the entire page, covering everything.
Is this due to the div being anchored to the top? Is there a way to clear it?
Apologies for lack of code before. Here is a essentially what I am doing:
<html>
<head>
<title>stack overflow</title>
<style type="text/css">
#nav {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: #0000FF;
}
</style>
<link href="yotb.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav"><center>HEADER</center></div>
<div id="container">
<div id="content">
PAGE CONTENT
</div>
</div>
</div>
EDIT: Karim's answer fixed it. Thank you for your help, everyone.
What you've done here is that you set position:fixed; to the element and you declare it's boundaries to top:0 bottom:0 so it's gonna spread from top to bottom, AND left:0 right:0 so it's gonna spread from left to right, simply remove right and bottom (you really don't need those bro).
Check out this FIDDLE.
<style type="text/css">
.anchored-top
{
float:left;
position:relative; /* Highlight only text in the div by wrapping objects in a span */
}
.anchored-top span
{
background-color: blue;
}
.clear
{
clear:both; /* use an empty div with a class of clear to clear the floats */
}
</style>
<div class="anchored-top">
<span>Stuff in Here</span>
</div>
<div class="clear" />
It is quite hard to provide a question without seeing what you have already, but I would recommend firstly the below. (Firstly let me apologies if you are already familiar with HTML)
Check that the div has been closed
Set a width and height to the div
Make sure you are only changing the background-color of that div and not another element
I hope this helps!
Here's my footer css:
.footer {
background-color: #CACACA;
font-size: 20px;
height: 50px;
padding-top: 10px;
position: absolute;
text-align: center;
width: 100%;
}
On multiple pages I have containers that content text. On some pages there is just enough content that the footer appears at the end of the page. But in some cases there isn't enough content so the footer still shows under the container but there is a gap between that and the end of the page. How can I fix this so it adjusts regardless of the length of the container?
like so
<!DOCTYPE html>
<html>
<head>
<title>My Amazing Footer</title>
<style>
html, body {
margin:0;
padding:0;
height:100%;
}
.wrapper {
min-height:100%;
position:relative;
}
footer{
background:#F1F1F1;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height:300px;
}
footer p{
text-align: center;
padding-top:100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="Content">
<p>HTML Ipsum Presents</p>
</div>
<footer>
<p>© My Website 2013. All Rights Reserved!</p>
</footer>
</div>
</body>
</html>
see we have the footer in the wrapper and the footer is absolute to the bottom and left of the wrapper then we just add the height of the footer to the wrapper bottom padding and some default height on the wrapper and body and that's sorted, take a look on jsfiddle here - http://jsfiddle.net/eTwJh/2/ and here is one with no content - http://jsfiddle.net/eTwJh/3/
Without seeing the corresponding HTML, it's a bit hard to guess what your issues might be. It sounds like there's a bottom margin on your main content that's pushing the page bottom downward past the footer when there's only limited content inside that main section.
To fix it, either adjust that margin or else change the positioning of the footer. At the moment, the position is absolute, which means that the footer is positioned based upon the its parent element in the HTML. Switching the positioning to relative will make it appear just after whatever element comes just before it in the HTML.
I suggest you read more about CSS positioning before trying to work on the issue further.
I have an image that is 115px that I want at the very bottom of my page. I searched online how to make it stay at the bottom of the page always and got a lot of complicated answers. I made with code of my own one that works (at least in my browser). I realize it might be an immature way to do it, and wanted to see if there were any potential problems with it. Here is my code
<div id="footer" style="position:fixed;top:100%;margin-top:-115px;left:0%;repeat:repeat-x;background:url(http://EXAMPLE.com/images/bottom-border.png);height:115px;width:100%;">
</div>
Here is how you do the footer always at the bottom of page. You can replace footer with <div id="footer">...</div>, but I prefer HTML5 footer.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
body { height: 100%;}
footer {background: url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5);
position: fixed; bottom: 0; left: 0; height:115px;width:100%; }
</style>
</head>
<body>
<footer>
</footer>
</body>
</html>
you may want to consider what will happen if the body text is as long as the viewport height. The text might go behind the fixed footer and you may not be able to see it
I would recommend;
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
then make sure to give the div wrapping all the content has a padding bottom the same as the height of the footer.
#main { padding-bottom: 150px; } /* must be same height as the footer */
This is my code:
<html>
<head>
<style type="text/css">
#superdown{
position :relative;
right: 10px;
top: 10px;
}
#down{
position: absolute;
top: 10px;
right :10px;
}
</style>
</head>
<body>
<div id="superdown">
<img src="http://images4.alphacoders.com/177/177506.jpg">
<div id="down">
<img id="yes" src="http://img.wallpaperstock.net:81/hi%2c-loser-wallpapers_17839_1024x768.jpg">
</div>
</div>
</body>
</html>
Obviousy, my background image is too large so i needed to scroll my horizontal bar to view full of it. I wan my my pink picture to be 10px from top and 10px from right of my background picture.But it seems according to the browser that the px I set.I want the pink image to be at the top right, how?Sorry for my bad english...
I hope you are looking like this :- DEMO
Just give the position:absolute; to Parent Div
For some reason, when you use position: relative; on the #superdown image, the absolute positioning of the #down image is based on the browser's boundaries. One way to fix this is to set #superdown to position: absolute;, although I'm of course not certain if that won't mess up other things in your page.