I just want the footer to appear on top of the background image. There is a background image which is the color and a logo of the company full screen except of the bottom 2 cm. There I want simple text with a link. Will do that myself, but cant get the text on top of the background color or background image.
Here is the HTML:
<link href="voorblad.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.poptrox-1.0.js"></script>
<script type="text/javascript" src="static_init.js"></script>
</head>
<body>
<div id="bg1"></div>
<img alt="full screen background image" src="gallery/voorblad.jpg" id="full-screen-background-image" />
<div id="wrapper">
</div>
<footer>
<p><h2>Framing your memories. Enter here. </h2></p>
</footer>
</body>
</html>
And here is my css:
#charset "utf-8";
/* CSS Document */
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow-y:hidden;
}
#full-screen-background-image {
z-index: 2;
min-height: 90%;
min-width: 1024px;
width: 100%;
height: auto;
position: relative;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
#bg1 {
min-width: 1255px;
width: 100%;
height: 1090px;
background: url(images/bg1.jpg) top center no-repeat;
position: absolute;
top: 0;
z-index: 1;
}
#footer {
position:relative;
bottom:0;
z-index: 3;
}
A few basic things:
What is the purpose of the empty bg1 and wrapper divs?
You have css for an element with ID 'footer', but there is no such element in your html.
Wrapping an h2 tag in a p tag is semantically incorrect.
A quick clean-up gives us something like this:
<body>
<div id="full-screen-background-image"></div>
<div id="footer">
<h2>Framing your memories. Enter here. </h2>
</div>
</body>
Try adding a working jsfiddle so people can help you better. I can't access your local image, so I used a red background. See this fiddle for a basic idea of positioning one item on top of another: https://jsfiddle.net/cp35y75z/1/
If you use position: absolute instead of position: relative the element will not take up space in the DOM, meaning there will be no white space where the footer would have been originally.
To style the footer make sure you take away the # unless you have an ID on the element. The proper css should look like this:
footer {
position:relative;
bottom:0;
z-index: 3;
}
Related
I know this is a duplicate question, I've read through many questions on this particular question like this one.
But I can't for the life of me get mine to work. I've tried many combinations of height and min-height for my html and body, using both % and vh. I tried setting the margin to 0 as well but that doesn't help. I tried this on both Chrome and Firefox, neither browser works. There were some answers that suggested using position: absolute but that messes up the styling for all the content I have.
Some combos I tried:
html, body{
height: 100%;
min-height: 100%;
}
html{
height: 100%;
}
body {
min-height: 100%;
}
html{
height: 100%;
margin: 0;
}
body {
margin: 0;
min-height: 100%;
}
My HTML layout:
<html>
<head>
... stuff
</head>
<body class=".container">
... stuff
</body>
</html>
You can use a fixed position for the bottom, but that can leave you with display problems as content gets covered.
I recommend using something like
body {
height: calc(100vh - 100px);
}
if you want to leave 100 px for your header and footer
What you're looking for is position: fixed, which tells the element to be fixed to that location, regardless of the other content. Couple this with bottom: 0, to state that the element should be fixed to the bottom of the page:
body {
margin: 0;
}
div {
padding: 5px;
}
.container {
background: #DDD;
height: 50px;
}
.footer {
position: fixed;
bottom: 0px;
height: 20px;
width: 100%;
background: #DDD;
}
<body>
<div class="container">Text</div>
<div class="footer">Copyright</div>
</body>
Hope this helps! :)
Solution :You can use the html 5 elements like
Header,
Article,
Section,
Footer
And set there height and width according to your requirements...
you can use this code to create a fixed footer at the bottom of your page
.yourfooterclass {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
basically what this is doing is positioning the footer at the very bottom of the page, so it doesnt matter how much content you have on the page it will always be at the bottomn
Since I couldn't change anything on the height-property of the body, I found this solution at https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/1, also pure CSS:
The html structure:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
And the CSS accordingly:
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
I have a dynamically created header on a page. Sometimes, there are left and right buttons to the sides of it, sometimes only left or right, and sometimes none.
Is there a way to center the main text and keep it centered when adding other elements next to it? Currently, when I add the left/right buttons, the whole assembly is centered. If I only add one button, the whole thing is shifted off to one side.
How do I keep the main element centered but add other elements around it?
This works fine:
<h1>
<img src="left.png" />
Main Title
<img src="right.png" />
</h1>
This doesn't work:
<h1>
<img src="left.png" />
Main Title
</h1>
I discovered an answer to my question incase anyone in the future finds this post.
Keep the element in the markup (HTML), but style it using CSS to visibility: hidden instead of display: none. This keeps the formatting on the page, but doesn't render the object to view.
visibility: hidden NOT display: none
Read this article for more information...
This could be a solution:
<!doctype html>
<html>
<head>
<title>Select Test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
width: 100%;
position: fixed;
left: 0px;
top: 0px;
}
h1 {
text-align: center;
width: auto;
line-height: 53px;
}
.left {
position: fixed;
top: 5px;
left: 5px;
}
.right {
position: fixed;
top: 5px;
right: 5px;
}
</style>
</head>
<body>
<div id="header">
<img class="left" src="http://files.softicons.com/download/internet-icons/user-icons-by-2shi/png/48/user1.png" />
<h1>My Title</h1>
<img class="right" src="http://files.softicons.com/download/internet-icons/user-icons-by-2shi/png/48/user1.png" />
</div>
</body>
</html>
But you can find many more. Try to remove right or left img and title should remain centered.
P.S.
If you don't want a fixed header, change #header to
#header {
width: 100%;
margin-top: 0px;
margin-left: 0px;
}
I've got a question regarding positioning of two objects: image and div. I want bg2.png image to stay under div. I keep encountering problem with image pushing div down by img's height. How do I avoid that?
I tried pushing down image with "top:" value but of course it leaves me with empty area above div. Also I tried adding negative "top:" value and relative position to "maincontent" div but again it left me with empty area, only difference was that this time it was under the div.
HTML:
<body>
<img src="./images/bg2.png" class="bgimg" />
<div id="maincontent">
</div>
</body>
CSS:
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
Thanks in advance.
edit - what I'm trying to achieve:
Click me!
2 solutions:
Change your HTML structure:
<body>
<div id="maincontent">
</div>
<img src="./images/bg2.png" class="bgimg" alt="some">
</body>
or make it as the background-image:
<body>
<div id="maincontent">
</div>
</body>
#maincontent {
background: url(./images/bg2.png) no-repeat 0 100%;
padding-bottom: height_of_image_in_px;
}
<style>
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
</style>
<body>
<div id="maincontent">
<img src="./images/bg2.png" class="bgimg" alt="some info about image here">
</div>
</body>
if you want that image inside the div use this code. or if you want make that image background of that div use css background property
Im having some problems getting the Sticky Footer to work on my site. If the content is smaller than the window the footer should stay at the bottom of the window and the dead space should be filled up with a div. I think the CSS Sticky Footer does this, but I cant get the "push div" to work push the content all the way down. As you can see my code isn't just body-wrapper-footer.
<body>
<div id="banner-bg">
<div id="wrapper">
<div id="header-bg">
<!-- header stuff -->
</div> <!-- end header-bg -->
<div id="content-bg">
<div id="content">
<!-- content stuff -->
</div> <!-- end content -->
</div> <!-- end content-bg -->
</div> <!-- end wrapper -->
</div> <!-- end banner-bg -->
</body>
body {
color: #00FFFF;
background-image: url("Images/img.gif");
font-size: 1em;
font-weight: normal;
font-family: verdana;
text-align: center;
padding: 0;
margin: 0;
}
#banner-bg {
width: 100%;
height: 9em;
background-image: url("Images/img2.gif"); background-repeat: repeat-x;
position: absolute; top: 0;
}
#wrapper {
width: 84em;
margin-left: auto;
margin-right: auto;
}
#header-bg {
height: 16em;
background-image: url("Images/header/header-bg.png");
}
#content-bg {
background-image: url("Images/img3.png"); background-repeat: repeat-y;
}
#content {
margin-right: 2em;
margin-left: 2em;
}
Im confused about where the CSS Sticky Footer-code should go in my case.
Edit, heres what I got and what I want to do:
alt text http://bayimg.com/image/gacniaacf.jpg
Your HTML is a tad strange. For example, why does banner-bg wrap around everything?
That said, in order to use Sticky Footer technique you need to wrap everything but the footer into a single DIV. So your <body> tag would only contain two top DIVs - wrapper and footer. All the stuff you currently have would go inside that wrapper DIV.
Note that Sticky Footer may not work for you if background images you're using include transparent areas as it relies on wrapper background being covered by the header.
Update: Ok, here's the version that works. "Sticky Footer" style sheet is taken from cssstickyfooter.com and should work in all modern browsers. I've streamlined your HTML a bit (there's no need for separate background layers based on your picture) but you can modify it as you like so long as you keep the basic structure in place. Also, since I don't have your images I've added solid background colors for illustration purposes, you'll need to remove them.
<html>
<head>
<style>
* {margin: 0; padding: 0}
html, body, #wrap {height: 100%}
body > #wrap {height: auto; min-height: 100%}
#main {padding-bottom: 100px} /* must be same height as the footer */
#footer {position: relative;
margin-top: -100px; /* negative value of footer height */
height: 100px;
clear:both;
}
/* CLEAR FIX*/
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden}
.clearfix {display: inline-block}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%}
.clearfix {display: block}
/* End hide from IE-mac */
/* Do not touch styles above - see http://www.cssstickyfooter.com */
body {
background-image: url("Images/img.gif");
background: #99CCFF;
color: #FFF;
font-size: 13px;
font-weight: normal;
font-family: verdana;
text-align: center;
overflow: auto;
}
div#banner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 9em;
background: url("Images/img2.gif") repeat-x;
background: #000;
}
div#wrap {
background: #666;
width: 84em;
margin-left: auto;
margin-right: auto;
}
div#header {
height: 16em;
padding-top: 9em; /* banner height */
background: url("Images/header/header-bg.png");
background: #333;
}
div#footer {
background: #000;
width: 84em;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="banner">Banner</div>
<div id="wrap">
<div id="main" class="clearfix">
<div id="header">Header</div>
<div id="content">
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content
</div> <!-- end content -->
</div> <!-- end main -->
</div>
<div id="footer">
Footer
</div>
</body>
</html>
Instead of modifying your existing styles (or using CSS Sticky Footer), its a lot easier for me to just redo it. So here goes:
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
}
#container {
height: 100%;
margin: 0 0 -200px 0;
position: relative;
}
#footer {
position: relative;
height: 200px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">Oh Beautiful Header</div>
<div id="content">Lots of Content</div>
</div>
<div id="footer">Stay Put Little Footer</div>
</body>
Basically the negative margin should match the height of the footer, height 100% needs to be applied to html/body, and the position relative should be declared.
Also in reference to the xHTML, notice how the "footer" div is not INSIDE the "container" div, but rather, outside of it (so that there are 2 separate container-like divs, container and the footer).
If your still having trouble, the main problems with your markup IS:
100% height needs to be declared for html and body tag.
negative margin is missing on the container div which is the #banner-bg
if footer is 100px tall, #banner-bg should have margin-bottom: -100px
position needs to be relative on both #banner-bg and the #footer
html { height: 100%;}
body {
color: #00FFFF;
background-image: url("Images/img.gif");
font-size: 1em;
font-weight: normal;
font-family: verdana;
text-align: center;
padding: 0;
margin: 0;
height: 100%;
}
#banner-bg {
width: 100%;
height: 100%;
background-image: url("Images/img2.gif"); background-repeat: repeat-x;
position: relative;
margin: 0 0 -200px 0;
}
#wrapper {
width: 84em;
margin-left: auto;
margin-right: auto;
}
#header-bg {
height: 16em;
background-image: url("Images/header/header-bg.png");
}
#content-bg {
background-image: url("Images/img3.png"); background-repeat: repeat-y;
}
#content {
margin-right: 2em;
margin-left: 2em;
}
#footer {
position: relative;
height: 200px;
}
and the rest:
<body>
<div id="banner-bg">
<div id="wrapper">
<div id="header-bg">
<!-- header stuff -->
</div> <!-- end header-bg -->
<div id="content-bg">
<div id="content">
<!-- content stuff -->
</div> <!-- end content -->
</div> <!-- end content-bg -->
</div> <!-- end wrapper -->
</div> <!-- end banner-bg -->
<div id="footer">
Footer Content
</div>
</body>
</html>
I'm not sure what Sticky Footer meant to do when the content is actually longer than your page height...
If it should be floating over the text while you are scrolling then I would use Javascript to calculate the bottom coordinates and place the footer on a new layer in the fixed position. This could be made quite cross-browser friendly as well...
It's great to be able to implement the sticky footer using CSS and HTML alone, but I'm not a big fan of adjusting my markup / document structure for something cosmetic.
I much prefer a JavaScript approach, no graceful degradation. If no JS, no sticky footer. I typically use jQuery to implement:
jQuery
$(window).resize(function() {
if ($('body').height() < $(window).height()) {
$('#footer').addClass('fixed');
}
else {
$('#footer').removeClass('fixed');
}
}).resize();
CSS
#footer.fixed { position: fixed; bottom: 0; width: 100%; }
here you can find some code as follows
Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).
In CSS:
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.
In HTML Body:
Your website content here.
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2013</p>
</div>
I need to put a thin banner on the top of the page kinda like the orange notification one on this page. I need it to be absolutely positioned though, because when you click on it it needs to drop down (over the current page, not pushing the current page down). The banner needs to stretch the entire width of window but the content needs to be within 800px in the middle. I have it already made but I am having trouble with the CSS positioning of it.
Thanks!!
Below is an example. The main #banner element stretches the full screen and is pinned to the top of the viewport using position: absolute; top: 0; left: 0. The width: 100% makes it stretch the full width.
The #banner-content is where you put your content. This is centered and fixed at 800px in width. I've put a border around it so you can see.
Note: I've also 'reset' the margins and padding of all the elements to clear the default padding. You might want to use something like Eric Meyer's Reset CSS in your final application.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
div#banner {
position: absolute;
top: 0;
left: 0;
background-color: #DDEEEE;
width: 100%;
}
div#banner-content {
width: 800px;
margin: 0 auto;
padding: 10px;
border: 1px solid #000;
}
div#main-content {
padding-top: 70px;
}
</style>
</head>
<body>
<div id="banner">
<div id="banner-content">
This is your banner text, centered and fixed at 800px in width
</div>
</div>
<div id="main-content">
<p>Main page content goes here</p>
</div>
</body>
</html>
#banner {
position: absolute;
top: 0px;
left: 0px;
margin: 0 auto;
text-align: center;
}
#banner_contents {
width: 800px;
}
Should be as simple as making two divs...the main one wraps the content one and centers it.