I am trying to get the background image of my content to appear behind the header and footer. Currently, the top of the content's background is sticking out onto the header, and you can see that the bottom has slightly covered the footer (notice the slight change of the footer's border colour). I have tried setting applying z-index:-100; to content which worked but also makes the text unselectable. I then tried applying z-index:1; to content, but that did not make the content appear under the header/footer.
link to website
//html
<div id="wrapper">
<header>
<div id="logo"></div>
<nav>
<ul>
<li id="aboutNav">home</li>
<li id="menuNav">menu</li>
<li id="specialsNav">specials</li>
</ul>
</nav>
</header>
<div id="content">
content <br> goes <br> here <br>
google
</div>
</div>
<footer>
<div id="thumbsDesc"></div>
<div id="thumbs"></div>
</footer>
//css
header {
width: 100%;
height: 100px;
background: url(../img/top.png) repeat-x;
z-index: 110;
}
#wrapper #content {
color: #FFFFFF;
background: url(../img/body.png) repeat-y;
width: 524px;
padding: 25px 30px 25px 30px;
position: absolute;
bottom: 100px;
top: 90px;
margin: 0 0 0 150px;
z-index: 1;
}
footer {
margin: -107px 0 0 0;
width: 100%;
height: 107px;
background: url(../img/bottom.png) repeat-x;
z-index: 100;
}
To solve the issue, you are using the z-index on the footer and header, but you forgot about the position, if a z-index is to be used, the element must have a position:
Add to your footer and header this CSS:
position: relative;
EDITED:
Also noticed that the background image on the #backstretch has a negative z-index, don't use that, some browsers get really weird...
Remove From the #backstretch:
z-index: -999999;
Read a little bit about Z-Index here!
For z-index to work, you also need to give it a position:
header {
width: 100%;
height: 100px;
background: url(../img/top.png) repeat-x;
z-index: 110;
position: relative;
}
Set your header and footer position to "absolute" and that should do the trick. Hope it helps and good luck with your project!
Related
I have a simple HTML document (snip):
<html lang="en">
<body>
<div class="background"></div>
<header class="main-header">
<div>
<a href="../index.html" class="main-header__brand">
uHost
</a>
</div>
</header>
</div>
</body>
</html>
I noticed the following.
If I apply the following style:
background {
background: url('../images/macbook.jpeg');
position: fixed;
height: 100%;
z-index: -1;
width: 100%;
}
Then the background image covers the whole viewport as expected.
If I then add:
html {
margin-left: 10%;
margin-right: 10%;
}
The margin is correctly applied to the left and right of my content. But also to the left side only of the background. Ie:
I am confused as to why, as I thought fixed elements were positioned relative to the viewport? So why is a style on the html element influencing the rendering of the background?
As a solution to get what I wanted (some margin on both sides), I can do something like:
html {
width: 80vw;
margin: auto;
}
.background {
background: url('../images/macbook.jpeg');
position: fixed;
height: 100%;
z-index: -1;
width: 80vw;
}
Which produces:
But again, I'm unsure why the margin property on the html element is affecting my fixed background div?
When using position fixed, the element will still follow its natural initial placement, unless otherwise specified via the top left bottom or right attributes. Here you can see, even though the body element has a margin of 10px, the background element is still at the top left.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 10px;
}
h1 {
color: white;
text-align: center;
}
.background {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Solar_Eclipse_May_20%2C2012.jpg/1024px-Solar_Eclipse_May_20%2C2012.jpg");
width: 300px;
height: 300px;
background-size: cover;
z-index: -1;
position: fixed;
top: 0;
left: 0;
}
<body>
<div class="background">
<h1> Solar Eclipse </h1>
</div>
</body>
I have a navigation bar under a header div tag
and a slideshow div afterwards ... as the code shows
<div class="header">
<div id="navbar">
content
</div>
</div>
<div class="container">
<div class="slideshow" id="slideshow">
slideshow content
</div>
</div>
the header and navbar have a fixed position to stay on top of the page when scrolling , the problem is when I scroll my "slideshow" appears on top of the navbar but the rest of the page content does not, how can I fix this ?
CSS styles
.slideshow {
position: relative;
margin-bottom: 10px;
padding: 50px 0 0 0 ;
}
Different CSS sheet for header and navbar
.header {
background: #2f3036;
height: 51px;
position:fixed;
width: 100%;
}
#ime-nav {
position: fixed;
width: 100%;
z-index: 10000;
background:#FF9900;
}
apparently I just needed to add a z-index to the header, completely overlooked it
.header {
background: #2f3036;
height: 51px;
position:fixed;
width: 100%;
z-index: 1;
}
I've a html structure like:-
<body>
<div class="header">header</div>
<div class="content">
hello
</div>
<div class="footer">footer</div>
</body>
And the applied style on it are:-
<style>
body {
padding: 0px !important;
margin: 0px !important;
}
.header {
height: 30px;
background: gray;
}
.footer {
height: 30px;
background: green;
position: fixed;
bottom: 0px;
width: 100%;
}
.content{
background: yellow;
}
</style>
What I want is, the content div's height will be equal to the full height of the window except the header & footer part. Currently I'm just seeing a small yellow strip for the content part, as the text within it very minimal, the rest of the page is white. I want, the content div will occupy that place. I tried to use height : 100%; in the content div, but it didn't work. please help.
Try to modify your content class like:-
.content{
background: yellow;
position: fixed;
width: 100%;
top: 30px;
bottom: 30px;
}
The top and bottom is 30px as the height of header and footer is 30px. it'll work for you.
Try making a div class="wrapper" that surrounds your div class="content"... In the css give the .wrapper 100% width and height. I hope that helps.
I am trying to put a ribbon that is as wide as my content but 'spill' the sides over to the body. Example here. This is the HTML I have so far. There are three images: the middle part of the ribbon and then two sides. I put the middle part in the h1 and now I am trying to line up the sides.
<body>
<div id="container">
<div id="leftside">
</div>
<div id="rightside">
</div>
<div id="content">
<header>
<h1>This is the body of the ribbon</h1>
</header>
</div>
</div>
</body>
My shot at the CSS. I've been experimenting and this does what I need it to but I am sure there are a million better solutions. I want to know what the best practice would be for this since I am sure I'm kind of breaking a lot of rules here.
#container {
width: 825px;
min-height: 960px;
margin: 0 auto;
}
#left {
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
height: 48px;
position: absolute;
margin-top: 20px;
margin-left: -58px;
}
#right {
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
height: 48px;
position: absolute;
margin-top: 20px;
margin-left: 825px;
}
#content {
width: 825px;
min-height: 700px;
margin: 0 auto;
background: url(other.jpg) repeat;
margin-top: 20px;
margin-bottom: 20px;
top:0;
overflow: auto;
}
h1 {
text-indent: -9999px;
background-image: url(banner.jpg);
background-repeat: repeat-x;
margin-top: 0;
height: 48px;
}
There definitely are a million ways to accomplish this. The best approach will depend greatly on how your site progresses.
What it comes down to is relative and absolute positioning.
One way to accomplish this is to structure your site something like so:
<body>
<div id="header">
<div id="ribboncenter"></div>
<div id="ribbon1"></div>
<div id="ribbon2"></div>
</div>
<div id="content">
Your content
</div>
<div id="footer">
Your footer
</div>
</body>
That's very loose frameworking for a typical site. The CSS would be something like so:
#header{
width:800px; //Subjective to however big you want your site
margin:0 auto; //Positions the header in the center
position:relative; //Tells nested absolute elements to base their positions on this
}
#ribbon1, #ribbon2{
position:absolute; //Position is now based on #header and is pulled from the regular DOM flow
width:50px; //Subjective to whatever the width of your "ribbon" is
top:10px; //Subjective to how far down from the top of #header you want it
}
#ribboncenter{
width:100%; //Sets width to the width of #header
background:url(ribboncenter.png); //Subjective to image
#ribbon1{
left:-50px; //Subjective to the width of the image, moves it 50px left of #header
background:url(my-ribbon1.png); //Subjective to whatever your image is
}
#ribbon2{
right:-50px; //Subjective to the width of the image, movesit 50px right of #header
background:url(my-ribbon2.png); //Subjective to whatever your image is
}
Here's the example http://jsfiddle.net/NZ8EN/
This is all very loose but hopefully gives you an idea of the direction to take.
There are definitely other ways to solve this as well.
Try putting the #right and #left divs inside the #content div, give #content a position of relative (so that it becomes the parent reference for the children #left and #right) and position absolutely the #left and #right:
HTML:
<body>
<div id="container">
<div id="content">
<div id="leftside"></div>
<div id="rightside"></div>
<header>
<h1>This is the body of the ribbon</h1>
</header>
</div>
</div>
</body>
CSS:
#left {
position: absolute;
top: 0;
left: -59px;
}
#right {
position: absolute;
top: 0;
right: 59px;
}
Unless you're supporting IE7, I'd probably go with something like this:
http://jsfiddle.net/G5jkt/
This is the CSS you'd need to add:
h1 {
position: relative;
}
h1:before {
content: '';
height: 100%;
left: -59px;
top: 0;
position: absolute;
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
}
h1:after {
content: '';
width: 59px;
height: 100%;
background-image: url(side.jpg);
background-repeat: no-repeat;
right: -59px;
top: 0;
position: absolute;
}
And you've have to change your HTML like so:
<div id="container">
<div id="content">
<header>
<h1>Hello Here</h1>
</header>
<div>
</div>
Using :before and :after helps remove design specific HTML from the document and gets the job done.
The key is using absolute positioning. In your example, you have your ribbon ends at the top of the page -- they have no relationship with the H1 you're trying to base their position off of.
The easiest way to do this would be dropping the HTML responsible for this ribbon ends within the H1. This, however, is not semantically the best. You could add a wrapper around the ribbon ends AND the H1, but that's extra markup.
By using :after and :before, you're using the H1 as the parent since it has a position of relative, and absolutely positioning the pseudo :before and :after elements relative to that H1. This is ideal since the pseudo elements can now inherit things like the height, background color, etc.
I would like to put footer on the bottom of the page (or bottom of the screen, if page is shorter than a screen). I am using code:
<div id="wrapper">
<div id="header-wrapper">
...
</div> <!--header-wrapper-->
<div class="clear"></div>
<div id="body-wrapper">
<div class="row960">
<div class="menu">...</div>
<div class="content">...</div>
</div> <!--row960-->
</div> <!--body-wrapper-->
<div class="clear"></div>
<div id="footer-wrapper" class="gray">
</div> <!--footer-wrapper-->
</div> <!--wrapper-->
and css:
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:24px;
margin:0px
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
background-color: #000000;
color: #FFFFFF;
font-size: 14px;
}
#wrapper{
min-height: 100%;
position: relative;
}
#header-wrapper{
height: 100px;
}
#body-wrapper{
padding-bottom: 50px;
}
#footer-wrapper{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
.row960{
width: 960px;
margin: auto;
overflow: auto;
}
#menu{
width: 200px;
float: left;
}
.content{
width: 740px;
margin-left: 20px;
float: right;
}
The problem is that footer is on the bottom of the screen even if the page is longer than a screen (it covers a text). I've checked it with Firebug and body-wrapper has right height, but row960 has height of screen instead of height of page. I can't figure out how to fix it. Does any one have idea what to do?
You can see my page on http://www.domenblenkus.com/fiap/notice.php
Thanks for your help!
EDIT: I don't know if I emphasized it enough, so I would like to point it out that the main problem is that height of row960 is not right.
Hmmm, I think I have a solution that fits the requirements you stated. There are certainly other ways to do this though, so you can keep looking around if you don't agree with this method. (Also, when I looked on your site it appeared that your #wrappper element was a sibling of #footer-wrapper, and not a parent.)
So, the HTML would look like (structure copied from your site):
<div id="wrappper">
<div id="header-wrapper" class="gray">
<div class="clear"></div>
<div id="body-wrapper"></div>
<div class="clear"></div>
<div class="spacer"></div>
</div>
<div id="footer-wrapper" class="gray"></div>
Note the addition of the .spacer element at the bottom of #wrappper, it's required for this approach of the "sticky footer".
Now, CSS you'll need to add (add to any current definitions if you already have them):
body, html{
height: 100%;
}
#wrappper{
min-height: 100%;
margin-bottom: -50px;
height: auto;
}
.spacer{
height: 50px;
}
If you're wondering why I chose 50px for the height, it's because that's the height of your footer element, #footer-wrapper.
Anyways, I only really tested this in the Firebug console, so I'm not sure how it will behave in a live environment, but I'm fairly certain this will give you what you want. If this isn't what you were looking for, let me know and I'll be happy to help further!
If you want it at the bottom, then you don't need the position:absolute or bottom:0, it will be at the bottom of your div anyway.
You can try doing it using margin. Here is a fiddle of what I'm taking about: http://jsfiddle.net/8WLyP/
Basically for your HTML, place all your content inside a "container" element and then your footer will be a sibling of that element.
Then in your CSS what you will need is to give them html and body elements a min-height: 100%
You "container" element will also have min-height: 100%
You will then need to give your footer a heightof X, in my example it's 50 pixels.
The "container" element will need to have margin-bottom: -50px or whatever value you give the height of the footer.
With all that done, make sure you don't give "container" and "footer" any other margins or paddings than the ones shown, if you need to give them, then you will need to give it to the child elements, in my example p element.
With this technique, as opposed to position: fixed the footer will stick to the bottom of the window if the content is too short, and it will move with the content when the content is bigger than the window/viewport.
HTML:
<div id="container">
<header>
<p>Header</p>
</header>
<section>
<p>Section</p>
</section>
</div>
<footer>
<p>Footer</p>
</footer>
CSS:
html, body, header, footer, section, p, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
p {
padding: 5px 10px;
}
header {
width: 100%;
background: #f00;
color: #fff;
}
section {
width: 100%;
height: 200px;
background :#0f0;
color: #fff;
}
#container {
width: 100%;
min-height: 100%;
margin-bottom: -50px;
}
footer {
width: 100%;
background :#00f;
color: #fff;
height: 50px;
}
You want to place the footer at the bottom of the content. BUT: You want to have it at the bottom of the viewport (window) if the content above it is shorter.
So, try this:
the CSS:
#footer-wrapper {
position: relative;
width: 100%;
height: 50px;
}
#body-wrapper {
position: relative;
height: 100%;
}
… and the JavaScript (jQuery):
var bodyWrap = $('#body-wrapper'),
footerWrap = $('#footer-wrapper'),
windowHeight = $(window).height();
var heightRemaining = parseInt(windowHeight - bodyWrap.outherHeight() - footerWrap.outerHeight());
if (heightRemaining > 0) bodyWrap.css('min-height', heightRemaining);
Didn't test it due to little time.
Give it a try.