CSS:
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-color: #E6E6E6;
}
#header {
background-color: black;
width: 100%;
margin-top: 50px;
margin-bottom: 50px;
}
#content {
padding-bottom: 80px;
text-align: center;
}
#footer {
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
background-color: black;
color: #898989;
}
I'm using a really common method to keep the footer at the bottom of the page, and it only half works. I learnt about it through a blog, and it was really helpful at first, however at some point editing my website it became broken. It displays a very small portion of the footer div, and while the rest is there, you have to scroll down to see it.
Without scrolling: http://i.imgur.com/lKH5Byc.png
With scrolling: http://i.imgur.com/GrGKpzm.png
I don't know what I'm missing here, it just isn't working.
EDIT: So I know this was a terrible question, I left out a lot of stuff because it's a company website and I was just worried about what I included. The culprit turned out to be the margins on the #header element. Removing those made everything work like a charm.
So I know this was a terrible question, I left out a lot of stuff because it's a company website and I was just worried about what I included. The culprit turned out to be the margins on the #header element. Removing those made everything work like a charm.
I have changed only the bottom part
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-color: #E6E6E6;
}
#header {
background-color: black;
width: 100%;
margin-top: 50px;
margin-bottom: 50px;
}
#content {
padding-bottom: 80px;
text-align: center;
}
#footer {
width: 100%;
height: 80px;
position: absolute;
bottom: -100px;
left: 0;
background-color: black;
color: #898989;
}
<div id="header">
.
</div>
<div id="content">
.
</div>
<div id="footer">
.
</div>
does that help?
Related
We are writing a custom website, but we want it to look similar to Wordpress, so we have written the code with the 'sticky' left position bar, and the scrolling right one.
But when you bring the page inward, the right columns wraps under the left one. Any ideas why and how to resolve?
Here is the CSS code:
html, body, section, article, aside {
min-height: 100%;
}
.sidemenu
{
position: sticky;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
float: left;
}
.menu-link a
{
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody
{
float: left;
max-width: 95%;
text-align: left;
padding: 20px;
}
So you have two DIVs, left is 'sidemenu' right is 'pagebody'.
Hope you can help.
To fix the position of the sidebar, you need to used position: fixed;. After that, wrap the sidebar div and body div into one container and set its width to 100% (I also gave the body a margin of 0 at this point to remove gaps).
Give the body div a left-margin equal to the width of the sidebar, then set the width of the body using a calculation (as shown below). I also gave it a really long height to demonstrate scrolling.
You can omit your floats.
Here is the adjusted code:
html,
body,
section,
article,
aside {
min-height: 100%;
margin: 0;
}
.main {
width: 100%;
}
.sidemenu {
position: fixed;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
}
.menu-link a {
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody {
width: calc(100% - 199.75px);
text-align: left;
padding: 20px;
height: 300vh; /**** used to demonstrate scrolling ****/
margin-left: 160px;
background-color: #BBB;
}
<div class="main">
<div class="sidemenu">
Side Menu
</div>
<div class="pagebody">
body
</div>
</div>
Firstly I attempted the only way I can think of to add 3 different
colours for the background, but now it won't allow me to display my
text.
I tried to use the position feature but it doesn't work and I am not sure what I am doing wrong or is there a better way to do the 3 colour background?
* {
margin: 0;
padding: 0;
}
div {
height: 1500px;
position: relative;
}
.a {
background: black;
}
.b {
background: #1e1d1d;
}
.a:after,
.c:before,
.c:after {
content: '';
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 200px;
display: block;
position: relative;
font-family: Arial;
}
.a:after {
background: black;
}
.c:before {
background: #1e1d1d;
right: 0;
height: 100%;
}
.c:after {
background: white;
right: 0;
height: 100%;
}
p {
position: fixed;
font-family: Arial;
color: white;
}
<div class="a">
<h1>DeadTreeStudios</h1>
</div>
<div class="b" style="position:absolute;">
<h1>
-I'm James, a freelance software developer & designer.
</h1>
<p>
I've always had a keen interest in design and development. Allthough there is always alot to learn, my skills are broad: from front end to back end development to app development. I enjoy it all!
</p>
<p>
I'm avaliable for remote work, or if you like to build somthing together, please get in touch.
</p>
</div>
<div class="c"></div>
<article></article>
There were multiple things wrong with your css that broke it, check this out.
You don't need position: absolute to do stuff like this
with height: 100vh; width: 100%; i make sure a section is filling the screen from top to bottom left to right
note that you could also use width:100vw; to fill it horizontally but in some cases it adds a horizontal scroll bar
* {
box-sizing: border-box;
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: arial;
}
section {
width: 100%;
height: 100vh;
}
#first {
background-color: black;
color: white;
padding-top: 48vh;
}
#second {
background-color: grey;
color: white;
}
#first h1 {
text-align: center;
vertical-align: middle;
}
<section id="first">
<h1>DeadTreeStudios</h1>
</section>
<section id="second">
<h1>
-I'm James, a freelance software developer & designer.
</h1>
<p>
I've always had a keen interest in design and development. Allthough there is always alot to learn, my skills are broad: from front end to back end development to app development. I enjoy it all!
<br> I'm avaliable for remote work, or if you like to build somthing together, please get in touch.
</p>
</section>
<section id="third">
</section>
I just fiddled your stuff.
I removed the
position:absolute;
inline style....
and gave .a and .b a color ofc you cant see black on black....
https://jsfiddle.net/nabrzovg/
I can't really understand what you are trying to do here. I removed all positions and changed colors to see whats happening.
* {
margin: 0;
padding: 0;
}
div {
height: 1500px;
}
.a {
background: red;
}
.b {
background: yellow;
z-index:22;
}
.a:after, .c:before, .c:after {
content: '';
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 200px;
display: block;
font-family: Arial;
}
.a:after {
background: black;
}
.c:before {
background: purple;
}
.c:after {
background: white;
}
p{
font-family: Arial;
color: white;
}
h1{
color: white;
}
I have been working on a website the last couple of days, and today I just ran into a problem when I wanted to move the navigation bar down from the top of the page. This have never been a problem for me, but I have read my code so many times by now, that I'm not able to find the mistake.
What I did was to add a margin-top: 50px; to my navigation div, but it then proceeds to create a white border above the parent div.
CSS
#section1 {
background-image: url("images/section1bg.jpg");
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
#topnav {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
text-align: right;
width: 400px;
padding-bottom: 10px;
border-bottom: 1px solid white;
position: relative;
}
HTML
<div id="section1">
<div id="topnav">
Languages
Contact
</div>
... other content
</div>
The image below should show the issue.
http://i.stack.imgur.com/8e1mW.png
If anyone has an idea about what to do, I would love to hear from you.
Thank you :)
Change margin-top: 50px; to padding-top: 50px;
#topnav {
padding-top: 50px;
margin-left: auto;
margin-right: auto;
text-align: right;
width: 400px;
padding-bottom: 10px;
border-bottom: 1px solid white;
position: relative;
}
Now define your #section1 id css overflow:hidden;
#section1 {
overflow: hidden;
}
Demo Fiddle
What color do you want the 'white' space you could create a div on top
<div style="background-color:#black;width:100%;height:50px"><div>
How can I remove the white border on bottom of the browser (google chrome)?
This is the code I have used:
footer {
color: white;
width: 101%;
margin-left: -8px;
background-color: #343434;
margin-left: -16px;
width: 101.5%;
margin-top: -8px;
height: 40px;
z-index: 100;
}
footer > div {
width: 1000px;
margin: 0 auto;
}
<main>
<!--main things-->
</main>
<footer>
<div>
<p>FastCycle werdt gecreëerd door HP-programming vzw. Copyright © 2015</p>
</div>
</footer>
I have try to place the margin-button to set on zero but it didn't help. Also I have place the margin-left to -16px and width to 101.5%? Why?
Can anyone help me?Thanks
You can try adding the following to the <body> tag:
<body style="padding: 0; margin: 0;">
or alternatively, create a new CSS class:
body {
padding: 0;
margin: 0;
}
If that doesn't work, in Chrome, if you press F12, it will bring up a panel that allows you to view the styles of elements. Hover over the elements until you find the one that's creating the whitespace, and remove the padding/margin from it.
Try to add to your css
body{
margin:0;
}
And some cleaning for your css footer
footer {
color: white;
width: 100%;
background-color: #343434;
height: 40px;
z-index: 100;
bottom:0;
}
footer > div {
width: 1000px;
margin: 0 auto;
}
Use this HTML:
<body>
<div id="footer">
<div id="inner">
FastCycle werdt gecreerd door HP-programming vzw. Copyright © 2015
</div>
</div>
</body>
Use this CSS:
body {
margin: 0px;
padding: 0px;
}
#footer {
background-color: #343434;
color: #ffffff;
height: 40px;
margin: 0px;
padding: 0px;
width: 100%;
}
#inner {
margin: 0px 0px 0px -500px;
padding: 0px;
position: relative;
left: 50%;
top: 0px;
width: 1000px;
}
Also, you've set the Width and the Left Margin twice with 2 different values so you might want to clean that up. Regardless my code gives the same result except without the white space. Feel free to add back some of the stuff I've taken out if other elements depend on it.
We have to support the last two revisions of IE, Chrome and Firefox and I have a feeling this isn't possible with IE 7/8, but perhaps I'm missing something
I have a footer that is moved up behind a content area by -280px. This content area is moved up over a header area by -230px. As a result I have a blank area at the bottom of my page of approx 320px. I can fill this and make it appear to be the bottom end of the gradient, but I'd really rather just cut it out, so there's no scroll bar to nothing.
In the example code below -
<div id = "page">
<div id = "topbar">
</div>
<div id = "header">
</div>
<div id = "content">
</div>
</div>
<div id = "footer">
I AM THA FOOTAH<br/> So much cooler than the header these days
</div>
body
{
/* background-color: #040e22; */
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
div
{
display: block;
}
#page
{
background-color: white;
margin: 0px auto;
padding: 0px;
position: relative;
}
#topbar
{
height: 60px;
background-color: #112247;
color: white;
position: static;
}
#header
{
background-color: navy;
color: yellow;
height: 240px;
position: relative;
}
#content
{
min-height: 280px;
background-color: green;
width: 480px;
margin: auto;
position: relative;
top: -230px;
z-index: 1;
height: 2000px;
}
#footer
{
/*background: url("footerGradient.png") repeat-x 50% 0%;*/
background-color: navy;
color: white;
text-align: center;
padding-top: 60px;
height: 220px;
top: -280px;
position: relative;
}
.inner
{
width: 940px;
margin: auto;
}
how do I get rid of the white under the navy footer?
just change in your #footer from top: -280px to margin-top: -280px voila!
position relative will move the element relatively to its original location but will perserve its space thus rendering empty area, negative margin will move your element including its bounding space and will do what you need.
You can change the footer position from relative to static like so:
#footer
{
/*background: url("footerGradient.png") repeat-x 50% 0%;*/
background-color: navy;
color: white;
text-align: center;
padding-top: 60px;
height: 220px;
bottom: 0px;
width: 100%;
position: fixed;
}
You might want to take a look at this sticky footer page-- you can modify that technique by NOT making the height of the footer and the negative margin of the previous element the same; you would want the negative margin to be greater.