I'm making a webpage with a fixed footer. If there is a lot of content, there must be a scroll bar. If there is only one line of input in the content-part, there is no need to scroll. The way the page is made now, gives me a scroll bar all the time! It scrolls just as far so that the header disappears from the screen. --> My header is 150px high and I can scroll exactly 150px. But I don't want this. What is wrong with my html or CSS?
This is the html:
<body>
<div id="header">
<h1>The <span>ultimate</span><br />DVD collection</h1>
</div>
<div id="main_wrapper">
<div id="main">
<div id="choose">#abcdefghijklmnopqrstuvwxyz</div>
<div id="content">Main content comes here.</div>
</div>
</div>
<div id="footer">
<p>My Name <span>admin log-in</span>
</p>
</div>
Here's my CSS:
html, body {
height: 100%;
margin: 0 auto;
}
body {
font-family: Helvetica, Arial, sans-serif;
color: #666;
font-size: 12px;
line-height: 1.5em;
/*position: relative;*/
}
#header {
height: 150px;
background: linear-gradient(left, #2a2620, #a35e47);
border-top: 10px solid #f6e6c5;
border-bottom: 10px solid #f6e6c5;
background-color: #a35e47;
}
h1 {
width: 960px;
margin: 35px auto 0;
font-family:'Luckiest Guy', cursive;
font-size: 3.5em;
line-height: 1em;
text-transform: uppercase;
font-weight: 400;
color: #a35e47;
text-shadow: 0px 0px 2px #f6e6c5, 4px 4px 8px #000000;
}
h1 span {
font-family:'Aclonica', Verdana, sans-serif;
font-size: 1.75em;
}
#main_wrapper {
height: 100%;
min-height: 100%;
background-image: url('http://4.bp.blogspot.com/-jPxP0Hgum7o/T0OiL_IupqI/AAAAAAAAAMs/Xu5zNtqULoE/s1600/IMG_0665+Hollywood+star.jpg');
background-repeat: no-repeat;
background-position: 50% 60%;
background-color: #5a646d;
}
#main {
width: 960px;
height: 100%;
margin: 0 auto;
background-color: #fff;
opacity: .75;
/*overflow: auto;*/
}
#choose {
margin-left: 20px;
font-family: georgia, serif;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
font-size: 1.5em;
line-height: 2em;
letter-spacing: 20px;
overflow: hidden;
}
#content {
margin-left: 20px;
margin-right: 20px;
}
#footer {
height: 40px;
width: 100%;
border-top: 10px solid #f6e6c5;
background: linear-gradient(left, #2a2620, #a35e47);
position: fixed;
left: 0;
bottom: 0;
}
You can also see my code in this jsFiddle.
What am I doing wrong? (look at the scroll bar in the picture)
Thanks in advance!
Remove height:100% on the main-wrapper. The height of 100% means 100% of the available space inside the parent (the header and the main-wrapper has the same parent). But the main-wrapper is not aware of the headers height. So the result will be 100% + 150px.
I have made a few adjustment in style.
I have given percentage height for your container(you can adjust them as per you need) and scroll property to div.
<style>
html, body {
height: 100%;
margin: 0 auto;
}
body {
font-family: Helvetica, Arial, sans-serif;
color: #666;
font-size: 12px;
line-height: 1.5em;
/*position: relative;*/
}
#header {
height: 15%px;
background: linear-gradient(left, #2a2620, #a35e47);
border-top: 10px solid #f6e6c5;
border-bottom: 10px solid #f6e6c5;
background-color: #a35e47;
}
h1 {
width: 960px;
margin: 35px auto 0;
font-family:'Luckiest Guy', cursive;
font-size: 3.5em;
line-height: 1em;
text-transform: uppercase;
font-weight: 400;
color: #a35e47;
text-shadow: 0px 0px 2px #f6e6c5, 4px 4px 8px #000000;
}
h1 span {
font-family:'Aclonica', Verdana, sans-serif;
font-size: 1.75em;
}
#main_wrapper {
/*height: 100%;*/
/*min-height: 100%;*/
background-image: url('http://4.bp.blogspot.com/-jPxP0Hgum7o/T0OiL_IupqI/AAAAAAAAAMs/Xu5zNtqULoE/s1600/IMG_0665+Hollywood+star.jpg');
background-repeat: no-repeat;
background-position: 50% 60%;
background-color: #5a646d;
}
#main {
width: 960px;
height: 70%;
margin: 0 auto;
background-color: #fff;
opacity: .75;
/*overflow: auto;*/
overflow:scroll;
}
#choose {
margin-left: 20px;
font-family: georgia, serif;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
font-size: 1.5em;
line-height: 2em;
letter-spacing: 20px;
overflow: hidden;
}
#content {
margin-left: 20px;
margin-right: 20px;
}
#footer {
height: 15%;
width: 100%;
border-top: 10px solid #f6e6c5;
background: linear-gradient(left, #2a2620, #a35e47);
position: fixed;
left: 0;
bottom: 0;
}
</style>
I worked around it using this explanation: http://dorayme.netweaver.com.au/ciaran.html
My wrapper now has a position:absolute with top: and bottom: equal to the height of header and footer (+ height of borders)
#main_wrapper{
position: absolute;
top: 170px; /* header + bordertop + borderbottom */
bottom: 50px; /* footer + bordertop */
left: 0;
right: 0;
background-image: url('path/to/img.jpg');
background-repeat: no-repeat;
background-position: 50% 40%;
background-color: #5a646d;
}
Thx to Johan Sundén for pushing me into the right direction!!
Related
I have a header that needs to have a greeting div inside of it. And that div has to be styled with :before and :after. I cannot add it via HTML. But when you resize the window, everything gets messed up. And I have no idea how to stop it from happening, without changing the font-size.
Can someone please take a look and tell me if there's something I can do? Thank you!
.header {
background-image: url('http://lorempixel.com/1300/800/');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 765px;
}
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
padding: 0px 20px 7px 20px;
border: 1px solid #fff;
outline: 2px solid #000;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, .375);
font-size: 3em;
font-weight: 700;
color: #fff;
line-height: 1.3;
}
.title:before {
font-family: FontAwesome;
content: "\f051";
font-size: 1.5em;
vertical-align: bottom;
}
.title:after {
content: "Hello hello";
position: absolute;
font-size: 17px;
font-weight: 400;
text-transform: uppercase;
display: block;
top: 15px;
left: 75px;
line-height: 1;
}
<div class="header">
<div class="title">
Hello
</div>
</div>
you may try this code, removed the absolute position :
.header {
background-image: url('http://lorempixel.com/1300/800/');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 765px;
text-align:center;
}
.title {
position: relative;
display:inline-block;
margin-top:15%;
padding: 0px 20px 7px 20px;
border: 1px solid #fff;
outline: 2px solid #000;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, .375);
font-size: 3em;
font-weight: 700;
color: #fff;
line-height: 1.3;
}
.title:before {
font-family: FontAwesome;
content: "\f051";
font-size: 1.5em;
vertical-align: bottom;
}
.title:after {
content: "Hello hello";
position: absolute;
font-size: 17px;
font-weight: 400;
text-transform: uppercase;
display: block;
top: 15px;
left: 75px;
line-height: 1;
}
<div class="header">
<div class="title">
Hello
</div>
</div>
My code is suppose to make a two-column layout, the header at the top, footer at the bottom, navigation at the left column in between the top and bottom, and finally the main at the right column. The problem is that the main is overlapping with the navigation column.
Here is the CSS for my file:
body { background-color: #000033;
background-image: url(primehorizontal.png);
color: #003300;
font-family: Arial, Helvetica, sans-serif;
margin-left:180px;
padding: 0px 20px 180px 0px;}
header { background-repeat: no-repeat;
height: 100px; }
h1 { white-space: nowrap;
overflow: hidden;}
h2 { color: #003366; }
h3 { padding-top: 10px;
color: #006600; }
nav { float: left;
width: 150px;
font-weight: bold;
font-size: 1.2em; }
nav a { text-decoration: none;
text-align: center;
color: #FFFFCC;
font-weight: bold;
border: 3px outset #CCCCCC;
padding: 5px; }
nav a:link { background-color: #003366; }
nav a:visited{ background-color: #48751A; }
nav a:hover { border: 3px inset #333333; }
nav ul { list-style-type:none;
margin: 0;
padding-left: 0; }
dd { font-style: italic;
font-size: .90em;
height: 200%; }
.contact { font-weight: bold;
font-size: .90em;
font-family: "Times New Roman", sans-serif; }
.floatleft { float: left;
padding: 0 20px 20px 0; }
.clear { clear:left; }
footer { font-size: .60em;
clear:both;
margin-left: 180px;}
img { border-style:none; }
#wrapper { background-color:#FFFFCC;
min-width: 700px;
max-width: 960px;
padding: 0px 0px 20px 30px;
border: 1px ridge blue;
width: 80%;
margin-right: auto;
margin-left: auto;
box-shadow: inset -3px -3px 3px 3px #00332B;}
header, nav, main, footer {display:block;}
Here is one of my html5 files:
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="prime.css"/>
<title>Prime Properties :: Financing</title>
</head>
<body>
<div id="wrapper">
<header>
<h1><img src="primelogo.gif" width="650" height="100" alt="Prime Logo"></h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Listings</li>
<li>Financing</li>
<li>Contact</li>
</ul>
</nav>
<main>
<h2>Financing</h2>
<p>We work with many area mortgage and finance companies.</p>
<h3>Morgages FAQs</h3>
<dl>
<dt>What amount of morgage do I qualify for?</dt>
<dd>The total basic monthly housing cost is normally based on 29% to 41% of your gross monthly income<dd>
<dt>Which percentage is most often used?</dt>
<dd>The perecentage used depends on the lending institution and type of financing.</dd>
<dt>How do I get started?</dt>
<dd>Contact us today to help you arrange financing for your home</dd>
</dl>
</main>
<footer>
Copyright © 2014 Prime Properties<br>
Paul Clef Ube
</footer>
add this:
main{
float:left;
width:calc(100% - 150px);
}
I have added the new width (you might want to add a fallback) so the main always fit with your fixed sized nav (plus the padding on the wrapper)
Got the issue worked out. Just played around with your code a bit, thought you may find it useful.
Though calc() is tempting, it's not necessarily the best choice due to compat issues.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
body {
background-color: #000033;
background-image: url(primehorizontal.png);
color: #003300;
font-family: Arial, Helvetica, sans-serif;
}
header {
position: relative;
background: #003366 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/156843/worldmap.png) no-repeat center 35%;
height: 100px;
margin-left: -21px;
margin-right: -21px;
overflow: hidden;
}
header img {
position: absolute;
top: 0;
left: 24px;
bottom: 0;
right: auto;
margin: auto;
display: inline-block;
max-width: 140px;
height: 65px;
}
h1 {
padding-left: 55px;
font-size: 25px;
line-height: 100px;
color: white;
}
h2 {
margin-bottom: 5px; color: #003366;
}
h3 {
margin: 2px 0px 6px;
padding-top: 15px;
color: #006600;
}
nav {
float: left;
display: inline-block;
margin: 0;
padding-top: 20px;
width: 150px;
font-size: 1.2em; }
nav a {
display: inline-block;
width: 100%;
text-decoration: none;
text-align: center;
color: #FFFFCC;
font-weight: bold;
border: 3px outset #CCCCCC;
padding: 5px;
margin: 2px 0;
}
nav a:link {
background-color: #003366;
}
nav a:visited {
background-color: #48751A;
}
nav a:hover {
border: 3px inset #333333;
}
nav ul {
list-style-type:none;
}
dt {
}
dd {
display: inline-block;
margin: 4px 0 10px 18px;
line-height: 1.2;
font-style: italic;
font-size: .90em;
height: 200%;
}
dt:first-child {
margin-top: 15px;
}
.contact {
font-weight: bold;
font-size: .90em;
font-family: "Times New Roman", sans-serif;
}
.floatleft {
float: left;
padding: 0 20px 20px 0;
}
.clear {
clear:left;
}
footer {
font-size: .60em;
width: 100%;
clear: both;
}
img {
border-style: none;
}
#wrapper {
background-color: #FFFFCC;
width: 80%;
min-width: 700px;
max-width: 960px;
padding: 30px 20px 15px;
border: 1px ridge blue;
margin: auto;
box-shadow: inset -3px -3px 3px 3px #00332B;
}
main {
padding: 20px 0px 20px 20px;
display: inline-block;
width: 100%;
max-width: 77%;
}
I see you have a class "floatleft", but you never assign it to anything.
Try giving your elements locations. For instance if you wanted something to float left tell it how from from the left it should go. In your CSS you may trying something like this in .floatleft{ float: left; left: 10px}. .floatright{ float: right; right: 10px;}.
I'm sort of a noob to developing websites, but hope to learn more. The problem I'm having is that my main page content goes under my footer if the page holds more and more content. ( https://i.imgur.com/LeqVBwl.png )
Either I'm doing something wrong, or I'm just missing something but, here's how I did it:
How could I fix this? Do I have to add/remove something?
The "position: absolute" is so it says at the bottom
CSS:
body {
margin: 0 0 65px;
background: #000000 url(../images/bg.png);
padding-bottom: 65px;
}
#menu {
height: 50px;
padding-left: auto;
padding-right: auto;
background: #ccc no-repeat left top;
font-family: Arial, Helvetica, sans-serif;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
float: left;
padding: 18px;
margin-right: 1px;
background: lightgray no-repeat;
text-decoration: none;
font-size: 10px;
color: #FFFFFF;
}
#menu a:hover {
color: #FFFFFF;
background: darkgray;
}
.main {
width: 1300px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
border: 1px black solid;
}
.content {
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin-top: 40px;
margin-right: auto;
border: 1px solid #ccc;
width: 800px;
float: left;
background: white;
border-radius: 2px;
}
.content h2 {
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #ccc;
text-align: center;
}
.sidebar {
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin-top: 40px;
margin-left: 30px;
margin-right: auto;
border: 1px solid #696969;
width: 300px;
float: right;
background: #EDEDED;
border-radius: 2px;
}
.sidebar h2 {
font-size: 15px;
font-weight: bold;
border-bottom: 2px solid #ccc;
text-align: center;
}
#footer {
font-family: "Trebuchet MS", Helvetica, sans-serif;
background: #ccc no-repeat left;
border-top: 3px solid;
left: 0;
bottom: 0;
height: 65px;
width: 100%;
}
#footer .footer-content {
font-weight: bold;
color: #262626;
font-size: 14;
}
#footer .footer-content a {
color: #545454;
text-decoration: none;
font-size: 14px;
}
#footer .footer-content a:hover {
color: #6E6E6E;
text-decoration: none;
font-size: 14;
}
HTML:
<div id="footer">
<div class="footer-content">
<center>
Home | Forums | Contact | Signup |Login
</center>
</div>
</div>
Fixed
I seemed to have fixed my problem. I just added:
<div style="clear: both;"> </div>
It's because you're footer has position: absolute; applied, this means it jumps out of the normal flow of the page. To fix it, add a padding equal to the height of the footer to the bottom of the page.
body {
padding-bottom: 65px;
}
I just tested my new site with my android phone and I am not able to scroll anywhere on the page. On Firefox, opera, ie, and chrome desktop browsers I get vertical scroll when needed. In my html, body css rule I've got overflow-y to scroll; Width should not be scrolled. I'm probably missing something simple here but I've never come across this in any other sites I've done.
Here's my css for the site:
#charset "utf-8";
/* CSS Document */
#body{
min-width: 900px;
width: 75%;
background-size: cover;
background-image: url(../graphics/back2.jpg);
position: relative;
margin: 40px auto;
padding: 10px;
border-style: groove;
border-width: 5px;
border-color: #000;
background-repeat: repeat-y;
}
a:link, a:visited, a:active{
text-decoration: none;
color: inherit;
}
a:hover{
color: #FFF;
text-decoration: underline;
}
html, body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
background-image: url(../graphics/craig-smith-background.jpg);
line-height: 25px;
}
h1{
font-size: 36px;
font-family: "Times New Roman", Times, serif;
color: #000;
margin: 10px;
}
h2{
font-size: 30px;
font-family:"Times New Roman", Times, serif;
margin-left: 30px;
color: #333;
font-weight: 700;
margin: 20px;
}
h3{
font-size: 24px;
margin: 10px;
}
p{
font-size: 20px;
font-family: "Times New Roman", Times, serif;
color: #FFF;
text-indent: 1.5em;
margin-left: 1.5em;
}
#quote{
margin-left: 30px;
font-style: italic;
font-family: lucida;
font-size: 18px;
border-style: inset;
border-color: #333;
border-width: 2px;
height: 80px;
}
#header{
width: auto;
margin: 0 auto;
position: relative;
text-align: center;
}
#nav{
position: absolute;
z-index: 1;
left: 25%;
top: 150px;
}
.picture{
display: inline-block;
position: relative;
margin: 0 auto;
border-style: groove;
border-width: 5px;
border-color: #999;
}
.clear-left{
clear: left;
position: relative;
}
.clear-right{
clear: right;
position: relative;
}
.clear-all{
clear: both;
position: relative;
}
#left-col{
width: 25%;
min-width: 300px;
position: relative;
float: left;
text-wrap: normal;
overflow: hidden;
margin-bottom: 10px;
margin-top: 10px;
text-align: right;
}
#right-col{
min-height: 500px;
min-width: 500px;
width: 65%;
text-align: left;
float: right;
border-style: groove;
border-width: 5px;
border-color: #CCC;
margin-bottom: 10px;
margin-top: 10px;
text-wrap: normal;
text-indent: 10px;
}
#footer{
width: 85%;
height: 40px;
background-color: #999;
text-align: center;
margin: 10px auto;
padding: 0px;
padding-bottom: 10px;
border-style: groove;
border-width: 2px;
border-color: #999;
}
#project-description h1{
text-align: center;
font-size: 36px;
}
.project-description h2{
color: #333;
font-weight: bold;
}
.project-description{
border-style: inset;
border-width: 3px;
border-color: #333;
margin: 10px;
padding: 5px;
}
.project-description p{
margin-left: 70px;
text-indent: 0;
}
table{
border-spacing: 0;
border-collapse: collapse;
}
td, th, tr{
padding: 0;
line-height: 20px;
}
And here's a link the live site.
You don't need to give the body and html tags the overflow-y: scroll; style. That is resulting in a double scrollbar which is failing in mobile browsers. You don't even need to specify that as it is default behavior. You may want to set overflow-y: scroll; and overflow-x: hidden; on the body tag only.
I have add the footer to EasyCareBath.com, and I can get the div to work properly except for ".footer_box", it will not center. I have added "left: 15%" and when you blow the window up, it's no longer aligned. Am I missing something or did I do too much to the css?
.footer_spacer {
height: 50px;
}
.footer_wrapper {
height: 375px;
background-color: #e6dccb;
}
.footer {
border-top: 10px solid #789E65;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
margin-top: 0px;
/*min-width: 1007px;*/
height: 235px;
background-attachment: scroll;
background-image: url(../images_footer/footer_bg.png);
background-repeat: repeat-x;
background-position: center top;
position: relative;
}
.footer_box {
height: 236px;
width: 1007px;
/*position: relative;*/
}
.footer_copyright {
width: 100%;
/* [disabled]height: 100px; */
/*float: left;*/
padding-top: 15px;
position: relative;
text-align: center;
word-spacing: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 100;
font-variant: normal;
text-transform: none;
color: #354245;
}
#footer_col_01 {
position:absolute;
left:11px;
top:3px;
width:164px;
/*height:230px;*/
z-index:1;
}
#footer_col_02 {
position:absolute;
left:186px;
top:3px;
width:164px;
/*height:230px;*/
z-index:1;
}
#footer_col_03 {
position:absolute;
left:361px;
top:3px;
width:164px;
/*height:230px;*/
z-index:1;
}
#footer_col_04 {
position:absolute;
left:535px;
top:3px;
width:183px;
/*height:230px;*/
z-index:1;
}
#footer_col_05 {
position:absolute;
left:728px;
top:3px;
width:265px;
/*height:230px;*/
z-index:1;
font-size: 14px;
}
footer {
font-family: Arial, Helvetica, sans-serif;
color: #fff;
font-size: 11px;
float: left;
width: 100%;
}
footer a {
color: #FFF;
text-decoration: none;
}
footer a:hover {
color: #FFF;
text-decoration: underline;
}
footer h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 500;
color: #00A1CC;
line-height: 46px;
/*margin-bottom: -2px;*/
}
footer li {
line-height: 18px;
list-style-type: none;
margin-left: 12px;
}
.footer_img_center {
text-align: center;
}
Alter your .footer_box rule to this:
.footer_box {
height: 236px;
width: 1007px;
margin: 0 auto;
position: relative;
}
The margin: 0 auto; centers the footer_box.
The position: relative; makes it so your absolutely positioned columns are positioned based on the footer_box instead of the body.
Side note / an analogy I've always liked:
Think of the 'auto' as attaching a rubber band to that side of the item connected to the edge of the page... in this case, 'auto' is on the right AND the left, so - if there's a rubber band pulling from both left AND right, it will always center, regardless of screen size.
Fix your css as following:
.footer_box {
height: 236px;
margin: 0 auto;
position: relative;
width: 1007px;
}
You were on the right track:
.footer_box {
height: 236px;
width: 1007px;
position: relative;
margin: 0px auto;
}
The auto margin on left and right will make sure the footer is always centered, no matter what the screen size is.