I am trying to make my footer stick to the bottom of the page. I want it to have 40px margin above and below but its not working out and keeps going over content in my site. Can someone help me out?
<div id="footer">
<div id="footer-line"> </div>
<div id="footer-nav"> Home | Expertise | Doctors | Facility | Contacts</div>
<div id="footer-copyright">© 2013 Website, Inc. All Rights Reserved.</div>
</div>
#footer {
margin: auto;
width: 900px;
height: 50px;
margin-bottom: 40px;
position: fixed;
bottom: 0;
}
#footer-line {
margin: auto;
width: 900px;
height: 2px;
background-color: #C9DA2A;
margin-top: 35px;
}
#footer-nav {
margin: auto;
float: left;
width: auto;
height: 30px;
color: #666666;
font-size: 16px;
font-family: "Times New Roman", Times, serif;
margin-top: 15px;
text-decoration: none;
}
#footer-nav a {
color: #666666;
font-size: 16px;
font-family: "Times New Roman", Times, serif;
text-decoration: none;
}
#footer-copyright {
margin: auto;
float: right;
width: auto;
height: 33px;
color: #666666;
font-size: 16px;
font-family: "Times New Roman", Times, serif;
margin-top: 17px;
text-decoration: none;
}
You have 2 margins defined in #footer:
#footer {
margin: auto; <----
width: 900px;
height: 50px;
margin-bottom: 40px; <----
position: fixed;
bottom: 0;
}
It should be margin: 40px auto; As a fixed element, it's going to go over the content on your site. You need to accomodate that by shrinking your content container to the height of the fixed bar.
Put a div at the bottom of your content. Something like...
<div class="push"></div>
Then style it with something like this...
.push {
height: 30px;
clear: both;
}
Should get everything pushed down. Works fine on every site I've used it on.
check out the fiddle
http://jsfiddle.net/HZ5NW/
add another div around your code as shown in the fiddle, remove these two lines of css from the footer and add them to the container div.
#container {
position: fixed;
bottom: 40px;
}
Related
I don't understand why my footer is sitting slightly above the bottom of my webpage and not directly on the bottom
h6 {
font-family: Neue Haas Grotesk, sans-serif;
font-weight: 300;
font-size: 1.4vw;
color: white;
position: relative;
display: block;
}
.footer {
position: relative;
display: inline;
bottom: 0;
width: 100%;
height: 100%;
margin-bottom: 0;
padding: 0;
}
<div class="footer">
<h6>© Alex Burger. All rights reserved<br>Further information can be requested through email.</h6>
</div>
The <h6> tag has a native margin. So your problem will be solved with:
.footer h6 {
margin-bottom: 10px;
}
Note that setting margin: 0px have not the result that you expect, this will only be solved changing other parts fo your document.
My banner is meant to be directly under the navigation bar but as of now, there is a space between it. I tried to use top for css and it doesn't move.
The css for the banner is:
/*Index CSS*/
* {
margin:0px; padding: 0px;
}
body {
position: absolute;
width: 1250px;
height: auto;
margin-left: auto;
margin-right: auto;
}
#wrapper {
background-color: rgb(161, 193, 217);
position: absolute;
width: 1250px;
height: auto;
margin-left: 5px;
margin-right: 5px;
}
#welcome {
background: url(../Resources/Header/CUiZMwBXAAAQy1M.jpg);
width: 1250px;
height: 480px;
}
#WelcomeTo {
color: white;
font-size: 55px;
text-align: center;
font-family: Bebas;
margin-top: 100px;
}
#LittleChef {
color: white;
font-size: 60px;
text-align: center;
font-family: Candy Shop Personal Use;
}
<div id="welcome" name="banner">
<div id="WelcomeTo" name="WelcomeTo">
<h1>WELCOME<br>TO</h1>
</div>
<div id="LittleChef" name="LittleChef">
<h1>Little Chef</h1>
</div>
</div>
I've had this problem for a very long time. Here is a screenshot to what it looks like as of now.
it is because the margin of your h1 element.
the solution is set the margin-top of h1 to 0.
Or you can set the padding of the wrapper
I have the following HTML & CSS:
body {
font-size: 16px;
overflow: scroll;
}
html {
position: absolute;
min-height: 100%;
}
.mainContainer {
position: absolute;
padding-top: 40px;
margin: 0px auto;
width: 1200px;
}
.mainpagetitleContainer {
position: absolute;
padding-top: 20px;
}
.mainpagetitle {
font-size: 4em;
font-weight: 300;
margin: 0px auto;
}
.mainpagetitleContainer > .subtitle {
color: #333;
width: 400px;
margin: 0px auto;
font-size: 1.2em;
font-weight: 300;
}
<div class="mainContainer">
<div class="mainpagetitleContainer">
<div class="mainpagetitle">
Text.
</div>
<div class="subtitle">
Text.
</div>
</div>
</div>
I am attempting to centre my divs as outlined in this answer to Horizontally center a div in a div, however my divs seem intent on being stuck to the left-hand side of the page rather than the centre.
The idea is to have a background and a central column to the page, like so:
I tried messing with margin: 0px auto; to no effect.
What am I doing wrong, and how can I fix this?
To center divs horizontally using margin: 0 auto, you should use position relative on container and on inner divs.
Try something like this:
body {
font-size: 16px;
overflow: scroll;
}
html {
position: relative;
min-height: 100%;
}
.mainContainer {
position: relative;
padding-top: 40px;
margin: 0px auto;
width: 1200px;
}
.mainpagetitleContainer {
position: relative;
padding-top: 20px;
}
.mainpagetitle {
font-size: 4em;
font-weight: 300;
margin: 0px auto;
}
.mainpagetitleContainer > .subtitle {
color: #333;
width: 400px;
margin: 0px auto;
font-size: 1.2em;
font-weight: 300;
}
To understand more about layout in CSS, I recommend reading this site: http://learnlayout.com/toc.html
Just get rid of absolute positioning.
Using position: absolute on html makes it shrink-to-fit. Since .maincontainer is out-of-flow, body will be 0px wide. Then centering makes no sense.
And just adding auto margins won't center an absolutely positioned element. You would also need left: 0 and right: 0.
body {
font-size: 16px;
overflow: scroll;
}
html {
min-height: 100%;
}
.mainContainer {
padding-top: 40px;
margin: 0px auto;
width: 500px;
background: yellow;
}
.mainpagetitleContainer {
padding-top: 20px;
}
.mainpagetitle {
font-size: 4em;
font-weight: 300;
margin: 0px auto;
}
.mainpagetitleContainer > .subtitle {
color: #333;
width: 400px;
margin: 0px auto;
font-size: 1.2em;
font-weight: 300;
}
<div class="mainContainer">
<div class="mainpagetitleContainer">
<div class="mainpagetitle">
Text.
</div>
<div class="subtitle">
Text.
</div>
</div>
</div>
I am trying to add a div to the side of my wrapper. It will be a link / button.
I want it to be able to slide up and down, fixed to the right hand side border when scrolling.
The button is:
#booknow {
position: absolute;
right: 0;
margin-left:25px;
text-align:center;
font-family: 'Raleway',sans-serif;
font-size:22px;
color:#ffffff!important;
font-weight:700;
line-height:26px!important;
text-transform:uppercase;
}
And the inner wrapper (Where the border is), is:
.wrapper_inner{
position:relative;
z-index:10!important;
padding:30px!important;
background:#fff!important;
border:1px solid #D4D4D4!important; }
HTML:
<div class="wrapper">
<div class="wrapper_inner">
<div id="booknow">
Book <br> Now
</div>
</div>
</div>
At the minute I have this:
If I set it to fixed it slides up and down but it won't position perfectly to the outside of .wrapper_inner.
The HTML wasn't that helpful, so I just threw something together. The color scheme is to display the elements. I removed .inner_wrapper and added the surrounding layout so it would be possible to demonstrate that #booknow floats. If you click the #booknow it'll scroll down to a faux form at the bottom.
Demo: https://plnkr.co/edit/qACqW4O4rJn7YHoPRWLy?p=preview
Full screen: https://run.plnkr.co/njw73AIIIuHXEooM/
Relevant CSS
body {
position: relative;
overflow-y: scroll;
overflow-x:hidden;
font: 500 16px/1.4 'Arial';
min-height: 100vh;
}
.spacer {
position: absolute;
bottom: -200px;
height: 60%;
}
#booknow {
position: fixed;
top: 30px;
right: 0;
float: right;
margin-left: 25px;
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 22px;
color: #ffffff;
font-weight: 700;
line-height: 26px;
font-variant: small-caps;
z-index: 10;
background: #fc3;
padding: 10px;
width: 50px;
}
.wrapper {
position: absolute;
top: -110px;
margin: 25px;
padding: 5px 10px;
width: 100%;
border: 3px double grey;
min-height: 70px;
background: #eff999;
}
I've been meaning to replace the tables in my site with css positioning and have been trying to teach myself through tutorials etc. I've had some early success but it all came crashing down when I tried to create a sidebar. I'm hoping the problem has some kind of simple solution. The relative/absolute positioning of the elements is not going anywhere close to what I wanted to do. My goal is to have a sidebar with images that stack (float?) from top to bottom, with the middle elements being part of an unordered list. I got it to work once but now that stack on top of each other. It has to be the way I am setting the float and the absolute/relative positioning. After reading some articles here I tried adding a div wrapper to put them inside but I think I got myself even more confused. Is it possible someone could nudge me in the right direction? Here is the code:
CSS
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 50px;
padding: 0px;
color: #696969;
height: 160px;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS ----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* PRIMARY LAYOUT ELEMENTS ---------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
top: 0px;
left: 0px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 0px 4px 4px 4px;
min-height: 420px;
width: 500px;
float: left;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* MISC ----------------------------------------------------------*/
.clear
{
clear: both;
width: 936px;
height: 35px;
}
.title
{
display: block;
float: left;
text-align: justify;
}
.bold
{
font-weight: bold;
}
p.clear
{
clear: both;
height: 0;
margin: 0;
padding: 0;
}
#wrapper
{
position:relative;
height: 500px;
width: 900px;
}
#insidemain
{
position:absolute;
float: left;
width: 500px;
height 180px;
}
/* ---------------- Sidebar Items ---------------------*/
#sidebar /* Sidebar container */
{
position:absolute;
border-top: 1px solid #99CC33;
border-left: 1px solid #99CC33;
height: 300px;
width: 180px;
margin-right: 5px;
padding: 5px 0 0 5px;
}
#sidebarHeader
{
position:absolute;
height: 37px;
width: 172px;
float: left;
background-image: url(../img/TopMenu.jpg);
background-repeat:no-repeat;
}
#sidebarItems ul
{
position:absolute;
height: 27px;
width: 172px;
float:left;
background-image: url(../img/MenuItems.jpg);
background-repeat:no-repeat;
/*left: 6px;
top: 45px;*/
background-position: 0px -27px;
}
#sidebarFooter
{
position:absolute;
height: 46px;
width: 172px;
float:left;
background-image: url(../img/BottomMenu.jpg);
background-repeat:no-repeat;
}
And the HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<link href="Styles/Simple.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div class="header">header
<div class="title">
<h1>
Test Page
</h1>
</div>
</div>
<p class = "clear">clear</p>
<div id="wrapper">
<div id="sidebar">
<div id="sidebarHeader">
</div>
<div id="sidebarItems">
<ul>
<li>test item</li>
</ul>
</div>
<div id="sidebarFooter">
</div>
</div>
</div>
<div id="insidemain">
main
</div>
</div>
<div class="clear">clear</div>
<div class="footer">
<a href="http://www.google.com/">
Blah blah test to see how far this will go across the page blah blha lorem ipsum and various other stuff that is meaningless etc
</a>
</div>
</body>
</html>
Typically (for non-responsive sites especially), you'd have your .wrapper div around the entire content (header, content, sidebar, footer, etc). Then set your .wrappers width. Your .sidebar would have a set width and it would either float: left; or float: right; depending on the side you want it on. Set your .content div's width which would be less than or equal to your .wrapper width - your .sidebar width. Then add your .clearfix below so the .footer falls beneath everything. In most cases (at least for the large page chunks) you can avoid position:absolute; which helps make things more easily fall into place.
You really shouldn't have to float your div's or list. Those are block elements by default and will stack vertically regardless.
Also, as Scrimothy mentioned, you do not want absolutely positioned elements as that will take the element out of the page flow. In other words, they no longer take up "real" space in the page, and instead render at whatever coordinates you position them.
Similarly, floats also take up no space, except with other floated elements. That's why some UI developers will float almost every element on the page and "clear" them using a footer or at key breaks in the page. I personally don't recommend positioning in that fashion, but to each his own.
See if this quick tutorial helps you with some key positioning concepts: HERE
Don't target the same element with both float and position:absolute. It doesn't make much sense. Anywhere where you have float, you should get rid of position:absolute
Next, get rid of those silly class="clear" elements. Instead, target .footer with clear:both and .page with overflow-y:hidden;