I'm having an issue with my site's footer. Whenever more content is added further down the page and a scrollbar is made available, the user scrolls and the footer is not at the bottom. The footer is in position absolute, and shows neatly at the bottom of the screen before the user scrolls down. This would be find if the user didn't have to scroll down, but obviously some pages are longer than others. All the code is shown below. Using fixed would obviously not do what I want. I want the user to scroll down to the bottom of a page to find the footer there, like with most websites.
HTML:
<div id="topbox">
<img style="position:relative;left:12px;top:3.5px;width:121.55px;
height:42.5px;">
<div id="box" class="boxa">
text1
</div>
<div id="box" class="boxb">
text2
</div>
</div>
<div style="position:absolute;top:10px;right:0px;">
<img>
</div>
<div id="textbox" style="top:40px;left:90px;margin-right:500px;">Imagine a lot of text here, possibly enough to cause the page to overflow downwards.</div>
<img style="width:15%;height:15%;float:right;z-index:1;
position:relative;bottom:200px;margin-right:100px;">
<div class="backgroundimage"></div>
<div id="footer"><p style="position:relative;top:39px;left:5px;font-size:80%;">Footer text.</p></div>
CSS:
#box {
position:relative;
}
.boxa {
left:173px;
bottom:34px;
width:249px;
}
.boxb {
left:430px;
bottom:55px;
width:90px;
}
#textbox {
position:relative;
background:rgba(255,255,255,1);
padding:7.5px;
font-family:arial;
z-index:1;
//box-shadow:0 0 30px rgba(000,000,000,1);
border-radius:15px;
line-height:25px;
font-size:90%;
}
#topbox {
background-color:white;
width:50000px;
height:50px;
position:relative;
bottom:8px;
right:8px;
padding-right:20px;
}
#media screen and (min-width:1008px) {
#textbox {
width:auto;
}
}
#media screen and (max-width:1006px) {
#textbox {
width:auto;
}
}
#footer {
background-color:gray;
height:75px;
position:absolute;
bottom:0px;
left:0px;
color:lightgray;
font-family:arial;
width:100%;
}
.backgroundimage {
border-bottom:300px solid rgb(247,145,47);
border-right:3000px solid transparent;
z-index:0;
position:relative;
right:110px;
bottom:70px;
}
Please read carefully through my code tosee what I have attempted, and how everything works together. I have had no issues with the page at all, so if there is code completely irrelevant to the footer just leave it as is. Also please actually read through what I have already said so you are fully aware of what I am trying to achieve. Many thanks in advance.
If you mean a sticky footer, which is always on bottom position at less content. When more content is visible the footer is scollable again.
One way is to use flexbox. Use a wrapper and two divs inside. The Second is the footer. Then you give the first div more space.
This technic works in all modern browsers.
*{
padding: 0;
margin: 0;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
<body>
<header>header…</header>
<main>main…</main>
<footer>footer…</footer>
</body>
Make it position:absolute
#footer {
position:absolute;
bottom:0;
left:0;
right:0;
}
if I understood correctly what you want, try this:
.backgroundimage {
border-bottom: 300px solid rgb(247,145,47);
z-index: 0;
position: relative;
right: 110px;
}
#footer {
background-color: gray;
height: 75px;
bottom: 0;
left: 0;
right: 0;
margin-top: 0px;
color: lightgray;
font-family: arial;
width: 100%;
}
Wrap all the elements in a div
<body>
<div> ...all your content... </div>
<div id"footer"></div>
</body>
jsfiddle link
#box {
position: relative;
}
.boxa {
left: 173px;
bottom: 34px;
width: 249px;
}
.boxb {
left: 430px;
bottom: 55px;
width: 90px;
}
#textbox {
position: relative;
background: rgba(255, 255, 255, 1);
padding: 7.5px;
font-family: arial;
z-index: 1;
//box-shadow:0 0 30px rgba(000,000,000,1);
border-radius: 15px;
line-height: 25px;
font-size: 90%;
}
#topbox {
background-color: white;
width: 50000px;
height: 50px;
position: relative;
bottom: 8px;
right: 8px;
padding-right: 20px;
}
#media screen and (min-width:1008px) {
#textbox {
width: auto;
}
}
#media screen and (max-width:1006px) {
#textbox {
width: auto;
}
}
html {
height: 100%;
box-sizing: border-box;
}
body {
min-height: 100%;
padding-bottom: 75px;
/*size of the footer*/
position: relative;
margin: 0;
box-sizing: border-box;
}
#footer {
background-color: gray;
height: 75px;
position: absolute;
bottom: 0px;
left: 0px;
color: lightgray;
font-family: arial;
width: 100%;
}
.backgroundimage {
border-bottom: 300px solid rgb(247, 145, 47);
border-right: 3000px solid transparent;
z-index: 0;
position: relative;
right: 110px;
bottom: 70px;
}
<div id="mainpart">
<div id="topbox">
<img style="position:relative;left:12px;top:3.5px;width:121.55px;
height:42.5px;">
<div id="box" class="boxa">
text1
</div>
<div id="box" class="boxb">
text2
</div>
</div>
<div style="position:absolute;top:10px;right:0px;">
<img>
</div>
<div id="textbox" style="top:40px;left:90px;margin-right:500px;">Imagine a lot of text here, possibly enough to cause the page to overflow downwards.</div>
<img style="width:15%;height:15%;float:right;z-index:1;
position:relative;bottom:200px;margin-right:100px;">
<div class="backgroundimage"></div>
</div>
<div id="footer">
<p style="position:relative;top:39px;left:5px;font-size:80%;">Footer text.</p>
</div>
Related
I'm a beginner to Html & CSS and have a probably really simple question, but I just can't seem to find the answer: How could you span an html element(child div, text, etc.) across multiple divs using only CSS & Html(no Javascript/JS)? I'm building a simple event calendar(using HTML+CSS) and am currently working on multiple day events.
html, body {
left: 0;
margin: 0;
background:white;
height:100%;
}
b{
font-family:calibri;
padding-left:10px;
}
#container{
margin: 0 auto;
width:300px;
padding-top:50px;
}
.colorone{
background:#FFEB3B;
width:150px;
height: 150px;
float:left;
}
.colortwo{
width:150px;
height: 150px;
background:#8BC34A;
overflow:hidden;
}
<html>
<head></head>
<body>
<div id="container">
<div class="colorone"><b>4</b>
</div>
<div class="colortwo"><b>5</b>
</div>
</div>
</body>
</html>
Desired result:
The blue div/rectangle should also be able to span more than two parent divs if wanted.
I've searched and researched online & on StackOverflow but I still can't seem to find the answer. Any help would be greatly appreciated.
Here's a quick example using your code with a few changes. I added the position to the container and the 3rd element and set the z-index to 2 on the div with the class of .colorthree.
var width = 0,
container = $('#container');
container.children('div').each(function(){
if(!$(this).hasClass('colorthree')) {
width += $(this).width();
}
});
container.width(width);
$('.colorthree').width(width-20);
html, body {
left: 0;
margin: 0;
background:white;
height:100%;
}
b{
font-family:calibri;
padding-left:10px;
}
#container{
margin: 20px auto;
width:300px;
height: 150px;
position:relative;
white-space: nowrap;
}
.colorone, .colortwo, .colorfour {
width:150px;
height: 150px;
background:#8BC34A;
overflow:hidden;
float:left;
}
.colorone{
background:#FFEB3B;
}
.colorfour {
background: red;
}
.colorthree {
z-index: 2;
top: 20px;
left: 10px;
position: absolute;
width:90%;
height: 40px;
background:blue;
overflow:hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="colorone"><b>1</b></div>
<div class="colortwo"><b>2</b></div>
<div class="colorfour"><b>4</b></div>
<div class="colorthree"><b>3</b></div>
</div>
You can do that with position: absolute
No javascript needed, only with html and css
html,
body {
left: 0;
margin: 0;
background: white;
height: 100%;
}
b {
font-family: calibri;
padding-left: 10px;
}
#container {
margin: 0 auto;
width: 300px;
padding-top: 50px;
position: relative;
}
.colorone {
background: #FFEB3B;
width: 150px;
height: 150px;
float: left;
}
.colortwo {
width: 150px;
height: 150px;
background: #8BC34A;
overflow: hidden;
}
.colorthree {
background-color: blue;
display: block;
position: absolute;
width: calc(100% - 50px);
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
left: 0;
right: 0;
color: white;
text-align: center;
line-height: 50px;
}
<html>
<head></head>
<body>
<div id="container">
<span class="colorthree">I'm Span!</span>
<div class="colorone"><b>4</b>
</div>
<div class="colortwo"><b>5</b>
</div>
</div>
</body>
</html>
I am not good in web-designing, I am working on a web template that was automatically generated by Adobe Dreamweaver.
I want to push the footer's DIV to the bottom of page even I have no content on the page.
This is .CSS (I have omitted some of it)
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}
.container {
width: 960px;
background: #FFF;
margin: 0 auto;
}
.header {
background: #ADB96E;
}
.sidebar1 {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
float: left;
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #CCC49F;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the
}
And this is the common markup of my pages.
<body>
<div class="container">
<?php
include('templates/header.php');
include_once('templates/sidebar.php');
?>
<div class="content">
<!-- end .content --></div>
<div class="footer">
<p>This is a simple footer.</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
And footer on page looks like
I have tried this for footer.
position: fixed;
bottom: 0;
width: 100%;
But then page looks like
Here is a solution that I use, its a HTML 5. But this should work for you. Just change the class and you should be good to go.
footer {
background: #000;
position: absolute;
bottom: 0px;
display: flex;
height: 40px;
width: 100%;
}
See Fiddle
Also you can use the fixed position approach which works just as good or better
footer {
background: #000;
position: fixed;
bottom: 0px;
display: flex;
height: 40px;
width: 100%;
}
Check the DEMO.
Check the 3 lines at bottom are responsible to keep the footer at bottom.
.footer {
padding: 10px 0;
background: #CCC49F;
clear: left;
/*Below 3 lines are the responsible to keep it at bottom*/
position: absolute;
bottom:0;
width: 100%;
}
you can try
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
}
.container {
width: 960px;
margin:auto;
min-height:100%;
position:relative;
background: #FFF;
}
.header {
height: 50px;
background: #ADB96E;
}
.sidebar1 {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
}
.content {
background:#5ee;
padding: 10px 0;
width: 780px;
float: left;
}
.content {
padding-bottom:80px; /* Height of the footer element */
}
.footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background: #CCC49F;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
</div>
<div class="sidebar1">
</div>
<div class="content">
</div>
<div class="footer">
<p>This is a simple footer.</p>
</div>
</div>
</body>
I have some elements that are getting out of my parent div. Why?
Here is what I have
CSS:
.lightbox img {
margin-top: 2%;
}
.viewer-v3.lightbox {
overflow: auto;
display: block;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: black;
background: rgba(0,0,0,0.8);
}
.viewer img {
margin-top: 2%;
max-width: 100%;
margin-bottom: 2%;
}
.borderLightbox
{
border:#cccccc;
border-width:1%;
border-top-style:none;
border-right-style:solid;
border-bottom-style :solid;
border-left-style:solid;
position:relative;
width: 80%;
background-color:#e5e5e5;
margin-left:auto;
margin-right:auto;
}
.headerLightbox
{
position:fixed;
background-color:#e5e5e5;
border:#cccccc;
border-width:1%;
width: inherit;
float:left;
border-top-style:solid;
border-right-style:none;
border-bottom-style :none;
border-left-style:none;
}
.actionsLightbox
{
background-color:#ffffff;
}
And HTML:
<div class="viewer-v3 lightbox">
<div class="borderLightbox">
<div class="headerLightbox">
HEADER
<div class="actionsLightbox">
ACTIONS
</div>
</div>
<img class="image" src="http://www.goldbergjones-or.com/blog/wp-content/uploads/2013/05/how-to-get-divorced.jpg">
</div>
</div>
The problem is with headers and action always getting out of parent div. I don't know why, because all the widhts are inherited from parent div, and my header and actions div are always getting out of parent?
UPDATE 3
The solution is to add a content box around the content and let him have the scrollbar.
See this example.
HTML
<div class="viewer-v3 lightbox">
<div class="borderLightbox">
<div class="headerLightbox">
HEADER
<div class="actionsLightbox">
ACTIONS
</div>
</div>
<div class="contentbox">
<img class="image" src="http://www.goldbergjones-or.com/blog/wp-content/uploads/2013/05/how-to-get-divorced.jpg">
</div>
</div>
</div>
CSS
.lightbox img {
margin-top: 2%;
}
.viewer-v3.lightbox {
overflow: auto;
display: block;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
overflow: hidden;
text-align: center;
top: 0;
left: 0;
background: black;
background: rgba(0,0,0,0.8);
}
.viewer img {
margin-top: 2%;
max-width: 100%;
margin-bottom: 2%;
}
.contentbox {
height: 100%;
overflow: auto;
}
.borderLightbox
{
border:#cccccc;
border-width:1%;
border-top-style:none;
border-right-style:solid;
border-bottom-style :solid;
border-left-style:solid;
position:relative;
width: 80%;
height: 100%;
background-color:#e5e5e5;
margin-left:auto;
margin-right:auto;
overflow: visible;
}
.headerLightbox
{
position:fixed;
background-color:#e5e5e5;
border:#cccccc;
border-width:1%;
width: inherit;
float:left;
border-top-style:solid;
border-right-style:none;
border-bottom-style :none;
border-left-style:none;
}
.actionsLightbox
{
background-color:#ffffff;
}
UPDATE 2
Understood your requirements, and I am afraid it is not possible.
The reason for the behavior is that .viewer gets a scrollbar, therefore its content width won't equal to the width of the body.
Thus: 80% of viewer != 80% of body (which is what you have for the position: fixed .header)
To see what I mean, just remove the height: 100% from the .viewer, and everything pops into place (only that .viewer won't be scrollable which is a no go)
UPDATE 1
If you need it fixed: do pixel sizes help?
.borderLightbox {
width: 500px;
}
http://jsbin.com/AkAhawa/5
ORIGINAL
It is because you have the position: fixed; property.
Think about it as that takes it out of the context of its parent and makes the body its parent, so from then on, positioning and sizing the .headerLightbox will be relative to the viewport.
If you wish to simply display the header with width: 100% (regarding its parent) then use
.headerLightbox
{
width: 100%;
}
How to center (vertically,horizontally) properly over an image in a ?
<div class="category-info">
<div class="image">
<h1>Title</h1>
<img src="image.jpg" />
</div>
</div>
CSS
.category-info {
text-align: center;
height: 200px;
width: 770px;
overflow: auto;
margin-bottom: 20px;
}
The image is 770px width and 200px height. I don't what to do next with . I tried several things, without success.
Here you go: http://jsfiddle.net/QjLuP/4/
The CSS:
.image{
position: relative;
background: green; /* IE */
}
.image h1{
z-index: 2;
position: absolute;
top: 50%;
left: 0;
right: 0;
font-size: 20px;
width: 100%;
height: 26px;
padding: 0;
margin: 0;
margin-top: -13px; /* 1/2 height */
text-align: center;
background: red;
background: rgba(170, 0, 0, 0.8); /* CSS3 */
}
.image img{
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
background:green
}
I threw a position relative on the .image class and set the width and height on the image element (that way it doesn't resize when it loads). I changed the table back to the h1 and added your line-height of 200px. That is the only downside, you'll still have to manually set the line-height of the h1.
HTML:
<div class="category-info">
<div class="image">
<h1>Title</h1>
<img src="http://placekitten.com/770/200" />
</div>
</div>
CSS:
.category-info {
text-align: center;
margin-bottom: 20px;
}
.image{
position:relative;
}
.image img{
width:770px;
height:200px;
}
.image h1{
position:absolute;
width:100%;
color:white;
line-height:200px;
margin:0;
}
JSFiddle: http://jsfiddle.net/5wGwL/2/
Have you tried this?
h1 { text-align:center; }
html
<h1 style="background-image:url(your php source.img)">Title</h1>
css :
h1 {
height: 200px;
width: 770px;
margin-bottom: 20px;
text-align:center;
vertical-align:middle;
line-height:200px;
background:transparent no-repeat scroll 50% 50%;
}
and nothing else
I am trying to implement cosntruction, described here.
<div id="wrap">
<div id="header">
header
</div>
<div id="main">
main<br/>main<br/>main<br/>main<br/>main<br/>main<br/>
</div>
</div>
<div id="footer">
footer
</div>
#header {
border-top:20px solid #fff;
height: 33px;
line-height: 33px;
text-align: center;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%;background-color:gray;}
#main {
overflow: auto;
padding-bottom: 53px; /* must be same height as the footer */
background-color: red;
border: solid 1px blue;
height: 90%;
}
#footer {
position: relative;
margin-top: -53px; /* negative value of footer height */
height: 33px;
line-height: 33px;
border-bottom:20px solid #fff;
text-align: center;
}
The whole page has background color (gray), header and footer are transparent (so you can see the page's background through it) and the content block has red background. Despite the fact that content part is stretchable it doesn't fill with the background the whole block, only the actual.
Is it possible to fill the whole content block with the color?
While minimizing window the footer floats on content. is it possible to disable such behaviour?
Here is a workaround of what you are looking for. Hope this helps.
Add this lines of code below to your code:
#main{
position: absolute;
top: 33px;
bottom: 33px;
left: 0;
right: 0;
}
#wrap{
position: relative;
}