I can't wrap my head around this one. I've been working on it for a bit but everything I try and everything I read fails to truly fix the problem.
Problem 1:
My div ".page" is ignoring all of its children divs. Setting it to 100% height and the background color to red for testing results in it only acknowledging certain divs (the .image__header div and the footer). I have set the html and body to width and height 100%; however, this does not resolve the problem.
Problem 2:
This leads to my second problem which would probably be solved by the prior problems solution. Adding the footer and setting a height and background color places the footer directly below the .image__header div. This emphasizes my belief that the other sections (main and nav) are being completely ignored as if they aren't even taking up space (nav is a fixed element glued to the top of my page and main doesn't work even if I change it to a div and "display:block" as it should be innately anyway).
My footer should simply fall below the main section but it fails to acknowledge main's existence.
A couple snippets of code although I have linked the brief CodePen at the bottom.
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body, html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1, h2, h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3, h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
.main__inner:after {
content: '';
display: table;
clear: both;
}
img {
display: block;
margin: 0 auto;
}
.page {
min-height: 100%;
width: 100%;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
* ---
* Adding a clearfix to .main__inner resolved this.
*/
}
footer {
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div> <!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul> <!-- end nav links -->
</div> <!-- end .nav__inner -->
</nav> <!-- end nav -->
<main class="main">
<div class="image__header">
</div> <!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's <snip>Raycast</snip> and <snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a <snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div> <!-- end .main__inner -->
</main> <!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div> <!-- end .footer__inner -->
</footer> <!-- end footer -->
</div> <!-- end .page__inner -->
</div> <!-- end .page -->
</body>
</html>
CodePen link with full code
To reiterate: I don't need a sticky footer solution or a fixed footer solution. I just need the footer to acknowledge other divs and sit below the main section. Why is the main section being ignored?
Any help is greatly appreciated. Thanks for your time.
Seems like you simply should add a clearfix to your .main__inner block, something like this:
.main__inner:after {
content: '';
display: table;
clear: both;
}
Check out:
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body, html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1, h2, h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3, h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
.main__inner:after {
content: '';
display: table;
clear: both;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
img {
display: block;
margin: 0 auto;
}
.page {
background: red;
min-height: 100%;
width: 100%;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
*/
}
footer {
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div> <!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul> <!-- end nav links -->
</div> <!-- end .nav__inner -->
</nav> <!-- end nav -->
<main class="main">
<div class="image__header">
</div> <!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's <snip>Raycast</snip> and <snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a <snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a <snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div> <!-- end .main__inner -->
</main> <!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div> <!-- end .footer__inner -->
</footer> <!-- end footer -->
</div> <!-- end .page__inner -->
</div> <!-- end .page -->
</body>
</html>
CodePen
Just put float:left; to both containers. I recommend using a div with class instead of footer though... or any semantic elements to be honest.
/*
* font-family: 'Unica One', cursive;
* font-family: 'Vollkorn', serif;
*/
body,
html {
width: 100%;
min-height: 100% !important;
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 70px;
background: transparent;
position: fixed;
color: #fff;
top: 0;
z-index: 99;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: right;
}
nav li a {
display: block;
text-align: center;
padding: 24px;
color: #fff;
text-decoration: none;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
}
nav li a:hover {
border-bottom: 3px solid #1abc9c;
}
#logo {
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
font-family: 'Unica One', cursive;
/* border: 1px solid red; */
padding: 19px;
padding-left: 0px;
}
#logo span {
color: #1abc9c;
}
.nav__inner {
width: 70%;
margin: 0 auto;
}
.image__header {
width: 100%;
height: 375px;
top: 0px;
z-index: -1;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("http://i.vimeocdn.com/video/542010229_1280x720.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
h1,
h2,
h4 {
color: #212121;
font-family: 'Unica One', cursive;
}
h3,
h5 {
color: #212121;
font-family: 'Vollkorn', serif;
}
p {
font-family: 'Vollkorn', serif;
font-size: 18px;
color: #212121;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 0.95em;
border-bottom: 1px solid #212121;
padding: 15px 0px;
}
.article-header span {
font-size: 1em;
color: #888;
font-family: 'Unica One', cursive;
}
article h2 {
margin-bottom: 0;
}
article {
display: block;
}
.main__inner {
margin: 0 auto;
width: 60%;
}
section {
display: inline-block;
}
.content {
width: 65%;
float: left;
}
.sidebar {
float: right;
width: 25%;
}
snip {
font-family: monospace;
background: #ccc;
padding: 2px 5px;
border: 1px solid #888;
border-radius: 5px;
font-size: 0.7em;
vertical-align: middle;
color: #212121;
}
code {
font-family: monospace;
color: #212121;
display: block;
padding: 15px 10px;
border-left: 5px solid #1abc9c;
}
pre {
border: 1px solid #888;
border-radius: 5px;
background: #ccc;
overflow-x: scroll;
}
var {
color: #16a085;
font-style: normal;
}
c {
color: #888;
font-style: italic;
}
main {
min-height: 100%;
}
img {
display: block;
margin: 0 auto;
}
.page {
background: red;
min-height: 100%;
width: 100%;
float: left;
/* Changing height by percentage acts like the only
* elements on my page are the image in the header
* and the footer.
*/
}
footer {
float: left;
height: 120px;
width: 100%;
}
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Unica+One|Vollkorn" rel="stylesheet" />
<!-- Also jQuery source in settings -->
</head>
<body>
<div class="page">
<div class="page__inner">
<nav class="nav">
<div class="nav__inner">
<div id="logo">
mynameis<span>jake</span>
</div>
<!-- end #logo -->
<ul>
<li>REPOSITORY</li>
<li>BLOG</li>
<li>HOME</li>
</ul>
<!-- end nav links -->
</div>
<!-- end .nav__inner -->
</nav>
<!-- end nav -->
<main class="main">
<div class="image__header">
</div>
<!-- end .image__header -->
<div id="blog" class="main__inner">
<section class="content">
<article>
<div class="article-header">
<h2>UNITY RAYCAST FOR BEGINNERS</h2>
<span>FEBRUARY 21, 2017</span>
</div>
<p>
Unity's
<snip>Raycast</snip> and
<snip>Raycast2D</snip> may seem somewhat daunting at first—I know I avoided them initially since I didn't fully understand them—but they are a incredible tool that can totally help perform countless tasks.
</p>
<pre><code><var>void</var> Update()
{
<var>RaycastHit</var> hit;
<var>if</var> (<var>Physics</var>.Raycast(fireLocation, fireLocation.forward, out hit, Mathf.infinity, layerMask))
{
<var>Debug</var>.Log(hit.point); <c>// This is the 3D world position where the raycast hit</c>
<var>Debug</var>.Log(hit.transform); <c>// This is the Transform that was hit with the cast</c>
}
}</code></pre>
<h3>What is a Raycast and what can I use it for?</h3>
<p>
The raycast is essentially an imaginary line that utilizes a
<snip>Ray</snip> or, in other words, starts from a single point and moves in a direction for a specified distance up to infinity. The raycast will record all data while running with can be output in the form of a
<snip>RaycastHit</snip>.
</p>
<img src="http://answers.unity3d.com/storage/temp/15108-example1.jpg" />
</article>
</section>
<section class="sidebar">
<h4>ADDITIONAL CONTENT</h4>
</section>
</div>
<!-- end .main__inner -->
</main>
<!-- end main -->
<footer class="footer">
<div class="footer__inner">
WHY WON'T YOU SIT AT THE BOTTOM OF THE PAGE, MR. FOOTER?
</div>
<!-- end .footer__inner -->
</footer>
<!-- end footer -->
</div>
<!-- end .page__inner -->
</div>
<!-- end .page -->
</body>
</html>
remove float: left from the section with class .content
http://codepen.io/anon/pen/XMrVVv?editors=1100
Related
When I run my code in the browser, I have this little line of white space at the bottom of the page. I’ve been trying different solutions but can’t seem to find one that works. Below is the home.html page. Maybe someone here can shed some light into the problem.
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="cooper, scooper, dog, pop, pick, up>
<meta name="author" content="primarysnail">
<meta name="viewport" content="width=device-width">
<meta name="description" content="connecting clients in need of dog pick pick up srvice with scoopers who will come to the client and scoop the poop">
<title>CoopersScoopers || Home</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
</head>
<body>
<header> <!-- company name top left; nav bar top right -->
<div class="container">
<div class="branding">
<h1><span>cooper</span>Scoopers</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Contact Us</li>
<li>Find a Scooper</li>
</ul>
</nav>
</div>
</header>
<section class="showcase"> <!-- showcase section; button to find scooper (./find.html) -->
<div class="container">
<h1>Leave the</h1>
<br>
<h1>Poo to the</h1>
<br>
<h1>Professionals.</h1>
<button type="button">Connect With a Scooper Today</button>
</div>
</section>
<section class="info-bar"> <!-- info bar; shows scooper process in 3 sections -->
<div class="container">
<div class="box">
<img src="../images/poop.jpg">
<h3>Connect With a Local Scooper</h3>
</div>
<div class="box">
<img src="../images/location.jpg">
<h3>Mark Your Poo</h3>
</div>
<div class="box">
<img src="../images/calendar.jpg">
<h3>Schedule Future Scoops</h3>
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h1>Come Experience the Joy of a Poop-Free Life.</h1>
</section>
</body>
<footer>
<p>Copyright © primarySnail//</p>
</footer>
</html>
Here is the linked style.css file:
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
}
/* global */
.container {
margin: auto;
width: 80%;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
button {
height: 50px;
background-color: #ffff00;
opacity: 0.8;
border: none;
padding-right: 30px;
padding-left: 30px;
float: left;
margin-top: -20px;
float: right;
}
button a {
text-decoration: none;
color: #4b0082;
font-weight: bold;
font-size: 25px;
}
/* header */
header {
padding-top: 30px;
min-height: 70px;
border-bottom: 4px solid #f0e68c;
background-color: #ffffff;
color: #8a2be2;
font-size: 10px;
}
header a {
text-decoration: none;
}
nav a {
color: #8a2be2;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
}
header span {
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0px 10px 0px 10px;
}
.branding {
float: left;
}
.branding h1 {
margin: 0;
padding: 0px 10px 0px 10px;
border: 4px solid #8a2be2;
}
header nav {
float: right;
margin-top: 10px;
}
header .current {
border: 1px solid #999;
background-color: #8a2be2;
border-collapse: collapse;
}
header .current a {
color: #ffffff;
font-weight: bold;
}
/* showcase */
.showcase {
background-color: #8a2be2;
color: #ffffff;
text-align: left;
min-height: 200px;
border-bottom: 4px solid #f0e68c;
}
.showcase h1 {
font-size: 55px;
margin-top: 0;
margin-bottom: 0;
padding: 0px;
display: inline-block;
}
/* info bar*/
.info-bar {
margin-top: 20px;
border-bottom: 4px solid #f0e68c;
}
.info-bar .box {
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
.info-bar .box img {
width: 90px;
height: 90px;
}
/* testimonials */
.testimonials {
background-color: #8a2be2;
color: #ffffff;
}
.testimonials h1 {
text-align: center;
}
/* footer */
footer {
background-color: #f0e68c;
margin-top: 0px;
padding: 5px;
text-align: center;
color: black;
opacity: 0.6;
}
I cannot for the life of me figure out why that little line of white space is in there at the very bottom. screenshot
Yes, I have observed white space showing in the bottom. It is because the elements inside body tag is not occupying the full available body size.
elemets heights are as
body- 722
header- 104
.showcase- 251enter code here
.info-bar- 201
.testimonials- ~71
footer- ~62
the white space in the botom is remaining area of viewport. If you make the browser smaller the white space will go away.
To fix this proble you can use below css to the body.
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
/* Add below lines*/
display: flex;
flex-direction: column;
align-items: stretch;
}
I want to set a margin of 100px between the header and .content-container. Every time I set the margin, either on the header or .content-container, the background image is pushed as well. Maybe it's connected to the position attributes for the .content-wrap and header selectors, but I'm not sure. I'm still new to frontend dev, so I'm not sure where the problem could be.
html, body, header, h1, h2, h3, div, figure, figcaption, img, p, a {
margin: 0;
padding: 0;
border: 0;
}
html, body {
height: 100%;
}
h1, h2, h3, p {
font-family: sans-serif;
}
.sticky-footer-wrapper {
min-height: 100%;
/*Equal to height of footer*/
margin-bottom: -200px;
}
.content-wrap {
width: 100%;
height: 100%;
display: block;
position: relative;
z-index: -10;
}
.content-wrap::after {
content: "";
background: #5F5449 url(http://margraonline.com/wp-content/uploads/2015/08/pretty-coffee-beans.jpeg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
header {
position: relative;
height: 100px;
background: #291711;
}
header img {
display: block;
padding-top: 20px;
padding-right: 10px;
padding-left: 20px;
float: left;
}
header h1 {
color: #EEF0F2;
font-size: 40px;
font-weight: bold;
padding-top: 20px;
padding-left: 20px;
}
header nav {
float: right;
padding-bottom: 0;
}
header nav a {
text-decoration: none;
color: #D1BEB0;
padding-right: 15px;
font-size: 20px;
}
a:nth-child(5) {
padding-right: 55px;
}
a:hover {
color: #938BA1;
}
#active-link {
color: #938BA1;
text-decoration: underline;
}
.content-container {
margin-top: 100px;
margin-bottom: 300px;
width: 60%;
background-color: #D9C9BE;
border: 2px solid #291711;
}
.content-container h2 {
font-size: 36px;
color: #4E453C;
text-decoration: underline;
text-align: center;
padding: 15px 0;
}
.content-container h3 {
font-size: 26px;
color: #3C2C26;
text-align: center;
padding: 20px 0 10px 0;
}
figure {
display: block;
border: 1px solid #3C2C26;
background-color: #FFFCF3;
height: 300px;
width: 400px;
margin: 0 auto;
}
figure img {
width: 100%;
text-align: center;
}
figcaption, p {
text-align: center;
padding-bottom: 10px;
}
blockquote {
position: relative;
font-size: 18px;
}
footer, push {
height: 200px;
}
footer {
width: 100%;
background-color: #291711;
text-align: center;
}
footer nav a {
float: inherit;
text-decoration: none;
color: #D1BEB0;
font-size: 28px;
font-family: Arial, serif;
font-weight: lighter;
padding-right: 15px;
}
#top-row {
padding-top: 25px;
padding-bottom: 15px;
}
#bottom-row {
padding-bottom: 25px;
}
footer p {
color: #D1BEB0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bloc Frontend Formations Part 1</title>
</head>
<body>
<div class="sticky-footer-wrapper">
<header>
<img src="https://i.imgur.com/v6FOpf0.png" title="source: imgur.com" />
<h1>Specialty Coffee Company</h1>
<nav>
Home
About SCC
<a id="active-link" href="#">Rare Coffees</a>
Store
Contact us
</nav>
</header>
<!-- Content Wrap -->
<div class="content-wrap">
<!-- Content Container -->
<section class="content-container">
<h2>Rare Coffees</h2>
<h3>Kopi Luwak</h3>
<figure>
<img src="https://www.indoneo.com/wp-content/uploads/2017/03/luwak_coffee_for_sale.jpg" alt="Kopi Luwak Coffee">
<figcaption><i>Kopi luwak for sale in Indonesia.</i></figcaption>
</figure>
<blockquote>"It’s the world’s most expensive coffee, and it’s made from poop. Or rather, it’s made from coffee beans that are partially digested and then pooped out by the civet, a catlike creature. A cup of kopi luwak, as it’s known, can sell for as much as $80 in the United States."</blockquote>
<p><cite>The Disturbing Secret Behind the World’s Most Expensive Coffee</cite> by Rachael Bale. National Geographic. <time>April 29, 2016</time></p>
<!-- End Content Container -->
</section>
<!-- End Content Wrap -->
</div>
<!-- Push for Sticky Footer -->
<div class="push"></div>
<!-- End Sticky Footer Wrapper -->
</div>
<footer>
<nav id="top-row">
Locations
Press
Blog
Jobs
FAQ
</nav>
<nav id="bottom-row">
Sustainability
Contact
</nav>
<p>Speciality Coffee Company, Torokvész út 95-97, Budapest</p>
</footer>
</body>
</html>
You need padding-top instead of margin-top of 100px.
Reason: Margin increase the space between elements, it doesn't actually increase the elements dimensions, whereas padding increases the space between the element edge and the content, which is what is needed in the current scenario!
html, body, header, h1, h2, h3, div, figure, figcaption, img, p, a {
margin: 0;
padding: 0;
border: 0;
}
html, body {
height: 100%;
}
h1, h2, h3, p {
font-family: sans-serif;
}
.sticky-footer-wrapper {
min-height: 100%;
/*Equal to height of footer*/
margin-bottom: -200px;
}
.content-wrap {
width: 100%;
height: 100%;
display: block;
position: relative;
z-index: -10;
}
.content-wrap::after {
content: "";
background: #5F5449 url(http://margraonline.com/wp-content/uploads/2015/08/pretty-coffee-beans.jpeg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
header {
position: relative;
height: 100px;
background: #291711;
}
header img {
display: block;
padding-top: 20px;
padding-right: 10px;
padding-left: 20px;
float: left;
}
header h1 {
color: #EEF0F2;
font-size: 40px;
font-weight: bold;
padding-top: 20px;
padding-left: 20px;
}
header nav {
float: right;
padding-bottom: 0;
}
header nav a {
text-decoration: none;
color: #D1BEB0;
padding-right: 15px;
font-size: 20px;
}
a:nth-child(5) {
padding-right: 55px;
}
a:hover {
color: #938BA1;
}
#active-link {
color: #938BA1;
text-decoration: underline;
}
.content-container {
padding-top: 100px;
margin-bottom: 300px;
width: 60%;
background-color: #D9C9BE;
border: 2px solid #291711;
}
.content-container h2 {
font-size: 36px;
color: #4E453C;
text-decoration: underline;
text-align: center;
padding: 15px 0;
}
.content-container h3 {
font-size: 26px;
color: #3C2C26;
text-align: center;
padding: 20px 0 10px 0;
}
figure {
display: block;
border: 1px solid #3C2C26;
background-color: #FFFCF3;
height: 300px;
width: 400px;
margin: 0 auto;
}
figure img {
width: 100%;
text-align: center;
}
figcaption, p {
text-align: center;
padding-bottom: 10px;
}
blockquote {
position: relative;
font-size: 18px;
}
footer, push {
height: 200px;
}
footer {
width: 100%;
background-color: #291711;
text-align: center;
}
footer nav a {
float: inherit;
text-decoration: none;
color: #D1BEB0;
font-size: 28px;
font-family: Arial, serif;
font-weight: lighter;
padding-right: 15px;
}
#top-row {
padding-top: 25px;
padding-bottom: 15px;
}
#bottom-row {
padding-bottom: 25px;
}
footer p {
color: #D1BEB0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bloc Frontend Formations Part 1</title>
</head>
<body>
<div class="sticky-footer-wrapper">
<header>
<img src="https://i.imgur.com/v6FOpf0.png" title="source: imgur.com" />
<h1>Specialty Coffee Company</h1>
<nav>
Home
About SCC
<a id="active-link" href="#">Rare Coffees</a>
Store
Contact us
</nav>
</header>
<!-- Content Wrap -->
<div class="content-wrap">
<!-- Content Container -->
<section class="content-container">
<h2>Rare Coffees</h2>
<h3>Kopi Luwak</h3>
<figure>
<img src="https://www.indoneo.com/wp-content/uploads/2017/03/luwak_coffee_for_sale.jpg" alt="Kopi Luwak Coffee">
<figcaption><i>Kopi luwak for sale in Indonesia.</i></figcaption>
</figure>
<blockquote>"It’s the world’s most expensive coffee, and it’s made from poop. Or rather, it’s made from coffee beans that are partially digested and then pooped out by the civet, a catlike creature. A cup of kopi luwak, as it’s known, can sell for as much as $80 in the United States."</blockquote>
<p><cite>The Disturbing Secret Behind the World’s Most Expensive Coffee</cite> by Rachael Bale. National Geographic. <time>April 29, 2016</time></p>
<!-- End Content Container -->
</section>
<!-- End Content Wrap -->
</div>
<!-- Push for Sticky Footer -->
<div class="push"></div>
<!-- End Sticky Footer Wrapper -->
</div>
<footer>
<nav id="top-row">
Locations
Press
Blog
Jobs
FAQ
</nav>
<nav id="bottom-row">
Sustainability
Contact
</nav>
<p>Speciality Coffee Company, Torokvész út 95-97, Budapest</p>
</footer>
</body>
</html>
I'm making a portfolio for some projects I've worked on whilst learning to code. I've added a banner to the top of each project's webpage, but I'm having issues with a site which is unresponsive (Jubilee Austen page).
Using the Chrome Inspector tool, it says the banner is 55px tall, but it appears smaller than it does on another project page (Rogue Pickings page), where the height of the banner is also 55px. How could this be?
Jubilee Austen page
Rogue Pickings page
Does anyone know how I can fix this so that both banners appear the same height?
Thanks so much in advance!
/* ===== JUBILLEE AUSTEN ===== */
font-family: atelas;
src :url('../fonts/atelas/atelas.ttf') format('opentype');
}
/* -------- PORTFOLIO BANNER & MANAGEMENT -------- */
.back {
width: 100%;
background-color: #1D2120;
padding: 10px 0;
position: fixed;
top: 0px;
}
.div-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
background-image: url('empty.gif');
}
.back-wrap {
width: 90%;
margin: auto;
}
.chevron {
margin: 0;
}
.chevron img {
width: 35px;
float: left;
margin-right: 1.5%;
}
.back-text {
margin: 0 0 0 3%;
font-family: atelas;
font-size: 6em;
color: #e2e2e2;
text-decoration: none;
line-height: 0.8;
display: none;
}
#example {
clear: both;
padding-top: 50px;
}
/* ======== ORIGINAL CSS ======== */
/* -------- START OF ORIGINAL CSS -------- */
body {
font-family: 'Source Sans Pro', sans-serif;
}
#about, #work, #contact {
height: 600px;
}
/***** GRID *****/
.full-width {
width: 1200px;
margin: 0 auto;
}
.half-width {
width: 600px;
float: left;
}
.third-width {
width: 400px;
float: left;
}
/***** HEADER *****/
header {
height: 800px;
background: url('../img/hero.png');
background-size: cover;
}
header h1 {
padding: 50px 0;
font-family: 'Lora', serif;
font-size: 30px;
color: #BBC085;
padding-left: 80px;
}
#nav {
float: right;
padding: 75px 0;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-transform: uppercase;
text-decoration: none;
font-size: 18px;
color: #828282;
padding-left: 80px;
}
header h2 {
width: 1000px;
clear: both;
font-family: 'Lora', serif;
font-size: 72px;
line-height: 80px;
color: #9a9a9a;
padding: 20px 0 0 80px;
}
header h2 span {
color: #262a2b
}
/***** ABOUT *****/
#about .full-width {
padding: 80px 0;
}
#about h2 {
font-family:'Lora', serif;
font-size: 36px;
}
#about p {
font-size: 21px;
color: #7F7F7F;
line-height: 42px;
padding-right: 50px;
}
/***** WORK *****/
#work {
background: #F9CEB7;
text-align: center;
}
#work .full-width {
padding: 115px 0;
}
#work img {
padding-bottom: 30px;
}
#work h3 {
font-size: 24px;
width: 180px;
margin: 0 auto;
}
#work p {
font-family: 'Lora', serif;
font-size: 18px;
line-height: 30px;
color: #262a2b;
padding: 0 35px;
}
/**** CONTACT *****/
#contact {
background: #EBEBEB;
}
#contact .full-width {
padding: 110px 0;
}
#contact img#contact-img {
border: 16px solid #ffffff;
}
#contact h2, #contact #email-header, #contact #socialmedia-header, #contact ul {
padding-left: 115px;
}
#contact #envelope {
padding: 0 10px 0 115px;
}
#contact h2 {
font-family: 'Lora', serif;
font-size: 36px;
}
#contact #email-header{
font-size: 32px;
font-weight: 400;
margin: -30px 0 5px 0;
}
#contact #socialmedia-header {
font-weight: bold;
font-size: 29px;
margin: 40px 0 0px 0;
}
#contact a {
text-decoration: none;
color: #C49075;
font-weight: bold;
font-size: 28px;
}
#contact ul {
list-style: none;
}
#contact ul li {
display: inline-block;
}
#contact ul img {
font-size: 32px;
padding-right: 48px;
}
/* ======== END ORIGINAL CSS ======== */
/* TABLET */
#media all and (min-width: 768px) {
}
#media screen and (min-width: 940px) {
/* -------- PORTFOLIO BANNER CSS -------- */
.chevron img {
width: 30px;
}
.back-text {
font-size: 3em;
}
}
<!doctype html>
<!-- JUBILEE AUSTEN -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Jubilee Austen | Developer</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- FONTS -->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- PORTFOLIO BANNER -->
<section class="back">
<a class="div-link" href="../index.html"><span></span></a>
<div class="back-wrap">
<figure class="chevron">
<img src="../img/chevron-b.png" />
<img src="../img/chevron-g.png" />
<img src="../img/chevron-o.png" />
<img src="../img/chevron-r.png" />
</figure>
<p class="back-text">back</p>
</div>
</section>
<!-- START OF ORIGINAL BODY -->
<div id="example">
<!-- NAV/TITLE PANEL -->
<header>
<div class="full width">
<div class="half-width">
<h1>Jubilee Austen</h1>
</div>
<!-- NAV BAR -->
<div class="half-width" id="nav">
<nav>
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- <span>Hi,</span> used to change colour of just "Hi," text -->
<h2><span>Hi,</span> I'm a developer that loves clean & elegant code.</h2>
</div>
</header>
<main>
<!-- ABOUT PANEL -->
<section id="about">
<div class="full-width">
<h2>A little bit about me.</h2>
<div class="half-width">
<p>I've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism. As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
</div>
<div class="half-width">
<p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
</div>
</div>
</section>
<!-- PROCESS PANEL -->
<section id="work">
<div class="full-width">
<div class="third-width">
<img src="img/icon-html.png" alt="HTML icon"/>
<h3>Hand-Coded HTML</h3>
<p>My focus is writing clean, well-formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>
</div>
<div class="third-width">
<img src="img/icon-css.png" alt="CSS icon"/>
<h3>Well-Organized CSS</h3>
<p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.</p>
</div>
<div class="third-width">
<img src="img/icon-pencil.png" alt="Pencil icon"/>
<h3>Easy Converting PSD to HTML</h3>
<p>You can trust me to take a designer's PSD and quickly & accurately convert it into a webpage that is pixel-perfect match.</p>
</div>
</div>
</section>
<!-- CONTACT PANEL -->
<footer id="contact">
<div class="full-width">
<div class="half-width">
<img id="contact-img" src="img/contact.png" alt="Person typing at laptop"/>
</div>
<div class="half-width" id="contact-info">
<h2>Like what you see?</h2>
<h3 id="email-header">Let's meet for a cup of coffee.</h3>
<img id="envelope" src="img/icon-envelope.png" alt="mail icon"/>hi#jubileeausten.com
<h4 id="socialmedia-header">Or, find me on the interwebs</h4>
<!-- ICON LINKS -->
<ul>
<li><img src="img/icon-twitter.png" alt="Twitter icon"/></li>
<li><img src="img/icon-tumblr.png" alt="Tumblr icon"/></li>
<li><img src="img/icon-instagram.png" alt="Instagram icon"/></li>
<li><img src="img/icon-linkedin.png" alt="Linkedin icon"/></li>
<li><img src="img/icon-github.png" alt="GitHub icon"/></li>
</ul>
</div>
</div>
</footer>
</main>
<!-- END OF ORIGINAL HTML -->
</div>
</body>
</html>
/* ===== ROGUE PICKINGS ===== */
/* =========================================================================
Author's custom styles
========================================================================== */
#font-face {
font-family: atelas;
src :url('../fonts/atelas/atelas.ttf') format('opentype');
}
/* -------- PORTFOLIO BANNER & MANAGEMENT -------- */
.back {
width: 100%;
background-color: #1D2120;
padding: 10px 0;
position: fixed;
top: 0px;
}
.div-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
background-image: url('empty.gif');
}
.back-wrap {
width: 90%;
margin: auto;
}
.chevron {
margin: 0;
}
.chevron img {
width: 35px;
float: left;
margin-right: 1.5%;
}
.back-text {
margin: 0 0 0 3%;
font-family: atelas;
font-size: 6em;
color: #e2e2e2;
text-decoration: none;
line-height: 0.8;
display: none;
}
#example {
max-width: 1200px;
margin: auto;
clear: both;
padding-top: 55px;
}
/* ======== ORIGINAL ROGUE PICKINGS CSS ======== */
html {
font-size:16px;
}
body {
/*max-width: 1200px; --- REMOVED FOR PORTFOLIO BANNER --- */
margin: 0 auto;
font-size: 1em;
font-family: Montserrat, Helvetica, Arial, sans-serif;
}
header {
font-size: 1em;
}
.top-section {
font-size: 1em;
}
.bottom-section {
font-size: 1em;
}
footer {
font-size: 1em;
}
header, .top-section, .bottom-section, footer {
max-width: 90%;
}
h1, h3, h4 {
text-transform: uppercase;
}
h1 {
color: black;
font-size: 1.875em;
text-align: center;
width: auto;
padding: 2.45% 0;
}
h3 {
color: black;
font-size: 1.125em;
text-align: center;
padding: 15px;
}
h4 {
color: black;
font-size: 0.75em;
}
.main-title h3 {
text-align: left;
padding: 5px 0px;
text-transform: uppercase;
color:#77a466;
}
/*The widths are in a percentage!*/
header {
width: 100%;
height: 10%;
margin: 0 auto;
}
header .heading {
border-bottom:3px solid #77a466;
height: auto;
}
header span {
color: #77a466;
}
header nav {
padding: 8% 0px;
margin:auto;
}
header nav a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 0.875em;
padding: 0 10px 20px 10px;
color:#77a466;
display: block;
text-align: center;
}
#last-nav {
padding: 0 10px;
}
/*The widths are in a percentage!*/
.top-section, .bottom-section {
width: 100%;
margin: 0 auto;
clear: both;
}
.main-image {
width: 100%;
height: auto;
float: left;
clear: both;
}
.main-image img {
width: 100%;
border-bottom:3px solid #77a466;
border-top: 3px solid #77a466;
}
.main-title {
width: 100%;
height: auto;
float: left;
}
.main-title p {
padding: 0px;
line-height: 156.25%;
font-size: 1em;
}
.section-one, .section-two, .section-three {
width: 100%;
height: auto;
clear: both;
border-top: 1px solid #eee;
}
.section-one h4, .section-two h4, .section-three h4 {
padding: 10px 30px 10px 0px;
}
.menu {
list-style: none;
padding: 0px 30px 0px 0px;
}
.menu li {
padding: 10px 0;
color:#77a466;
}
.reviews {
color: #333;
line-height: 135%;
font-size: 1em;
}
.address {
font-size: 1em;
line-height: 150%;
}
.reviews, .address {
padding: 0px 30px 0px 0px;
}
/*The widths are in a percentage!*/
footer {
width: 100%;
height: 50px;
border-top:3px solid #eee;
margin: 0 auto;
clear: both;
text-align: center;
}
footer span {
font-family: "Wisdom Script", script;
text-transform: lowercase;
color: #77a466;
font-size: 0.875;
}
#media all and (min-width: 600px) and (max-width: 939px) {
header nav {
padding: 3.75% 0px;
}
}
#media screen and (min-width: 940px) {
/* -------- PORTFOLIO BANNER CSS -------- */
.chevron img {
width: 30px;
}
.back-text {
font-size: 3em;
}
#example {
width: 96%;
padding: 40px 2% 0 2%;
}
/* -------- ORIGINAL CSS -------- */
body {
/*width: 96%; --- REMOVED FOR PORTFOLIO BANNER --- */
/*padding: 0 2%; --- REMOVED FOR PORTFOLIO BANNER --- */
}
header, .top-section, .bottom-section, footer {
max-width: 100%;
}
header h1 {
text-align: left;
float: left;
}
header {
height: 100px;
}
header .heading {
border-bottom: none;
}
header nav {
float: right;
width: auto;
padding: 45px 0px;
}
header nav a {
display: inline;
}
.section-one, .section-two {
border-right: 1px solid #eee
}
.section-one h4 {
padding: 10px 0px;
}
.section-two h4, .section-three h4 {
padding: 10px 30px;
}
.menu {
padding: 0px;
}
.reviews, .address {
padding: 0px 30px;
}
.section-one, .section-two, .section-three {
width: 33%;
height: auto;
clear: none;
float: left;
border-top: 1px solid #eee;
}
}
/* -------- END ORIGINAL CSS -------- */
<!doctype html>
<!-- ROGUE PICKINGS -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Rogue Pickings</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- PORTFOLIO BANNER -->
<section class="back">
<a class="div-link" href="../index.html"><span></span></a>
<div class="back-wrap">
<figure class="chevron">
<img src="../img/chevron-b.png" />
<img src="../img/chevron-g.png" />
<img src="../img/chevron-o.png" />
<img src="../img/chevron-r.png" />
</figure>
<p class="back-text">back</p>
</div>
</section>
<!-- START OF ORIGINAL BODY -->
<div id="example">
<!-- MODULE: Logo & Nav -->
<header>
<div class="heading">
<h1><span>rogue</span> pickings</h1>
</div>
<nav>
About
Menu
Locations
Gallery
Reviews
<a id="last-nav" href="#contact">Contact</a>
</nav>
</header>
<!-- MODULE: Top Section -->
<div class="top-section">
<div class="main-image"><img src="img/download.jpg" />
</div>
<div class="main-title" id="about">
<h3>Welcome to our little corner of the internet!</h3>
<p>Welcome to Rogue Pickings, the roaming truck bringing you the freshest ingredients and ideas in food. Our team works hard so you can be sure our ingredients are always fresh and picked carefully. Our menu changes every day and is made with you in mind. We can't wait to come to you! Check out our locations to see where you can find us. </p>
</div>
</div>
<!-- MODULE: Bottom Section -->
<div class="bottom-section">
<div class="section-one" id="menu"><h4>Today's Specials</h4>
<ul class="menu">
<li>Flaming Hummus & Falafel Salad</li>
<li>Sizzling Bean Burrito</li>
<li>Green Gloves Tamales</li>
</ul>
</div>
<div class="section-two" id="reviews"><h4>Our Awesome Reviews</h4>
<p class="reviews">"I got so excited about the yumminess of the falafel salad that I am typing this review as I inhale my lunch. Yes it is that good.... Service was super friendly and quick. Can't wait see you Rogue Pickings again tomorrow!"</p>
</div>
<div class="section-three" id=contact><h4>Contact</h4>
<p class="address">1001 Potrero Avenue<br>
San Francisco, CA 94110<br>
(415) 206-8000 </p>
</div>
</div>
<!-- MODULE: Footer -->
<footer>
<h4>Powered by lots of <span>fresh</span> ingredients.</h4>
</footer>
<!-- END OF ORIGINAL ROGUE PICKINGS HTML -->
</div>
</body>
</html>
i cant remember if zoom level is persistant on an iphone but it is on desktop browsers, could you have zoomed in/out of one of them? is there a way of making sure you are at 100% zoom?
Edit
is the smaller one contained in a set of tags that is smaller than 55px? as that would cause it to be restricted to the smaller size
Your banner is not responsive, its height is fixed (55px). If the site is being displayed differently - different viewport zoom, your banner will seems to be smaller/larger.
Check the viewport meta tag in those sites:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If the initial-scale is different or if one of the pages is missing the viewport tag it can explain the differences.
As mentioned before, the zoom affects the presented width and this affects the visual size of your banner. If you want it to be responsive, you should change the height units into percentage instead of pixels.
EDIT
The first page is much wider than the second, when you zoom out to see all the page it changes the visual height of your banner.
So I'm trying to create a landing page exactly like this (FYI, to work on my HTML/CSS skills, I have decided to exactly imitate this landing page just for practice!)
http://oi67.tinypic.com/b8qp8i.jpg
However, as you can see from what I did, the full background picture (sailing boat + ocean) does not show up in the first column: http://oi66.tinypic.com/o7ktgl.jpg
Another issue is that on the left side of the background image on the third column, I keep seeing on a small "broken page" icon (I don't know why it's there but it's really been annoying) ... is it an image problem or something wrong with the image file?
Help would be much appreciated, thank you!
Here is my full HTML and CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<title>Relaxr</title>
<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="mainColumn">
<header>
<h1>Relaxr</h1>
<h2>Get piece of mind with a single tap</h2>
</header>
<span>
<button id="getButton">Get it Now</button>
</span>
</div>
<div id="secondColumn">
<header>
<h1>Benefits</h1>
<p>The perfect personal assistant. Relaxr does your job<br>for you so you can enjoy life as it is meant to be.</p>
<ul class="benefitss">
<li>Schedule meetings for you</li>
<li>Excel automation to complete your <br>work for you</li>
<li>Responds to e-mails on your behalf</li>
<li>Does all yor work for you with our<br>revolutionary technology</li>
</ul>
</header>
</div>
<div id="thirdColumn">
<img src="../images/testimonial_bg.jpg">
<p>“Relaxr changed my life. I’ve been able<br> to travel the world, spend limited time<br> working and my boss keeps thanking<br>me for crushing work.”</p>
<p>- Amanda, Intuit</p>
</div>
<div id="fourthColumn">
<button id="signupButton">Sign Up Now!</button>
</div>
<div id="fifthColumn">
<p>Relaxr</p>
<div id="footer">
<p>Copyright 2015. Relaxr.</p>
</div>
</div>
</body>
</html>
CSS:
/******************************************
/* SETUP
/*******************************************/
/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */
}
.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */
}
/******************************************
/* BASE STYLES
/*******************************************/
body {
color: #000;
font-size: 12px;
line-height: 1.4;
font-family: Open Sans;
background: url(../images/header_bg.jpg) no-repeat center top;
background-size: cover;
}
/******************************************
/* LAYOUT
/*******************************************/
/*MAIN COLUMN*/
#mainColumn {
width: 100%;
height: 450px;
text-align: center;
}
#mainColumn h1 {
color: white;
padding-right: 80%
}
#mainColumn h2 {
color: white;
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
margin-top: 50px;
text-align: center;
}
header {
height: 40%;
}
/*GET IT NOW BUTTON*/
#getButton {
background-color: yellow;
border-radius: 3px;
border-style: none;
font-size: 14px;
font-weight: 700;
height: 30px;
width: 130px;
}
/*SECOND COLUMN*/
#secondColumn {
width: 100%;
margin: auto;
height: 360px;
background-color: white;
}
#secondColumn h1 {
padding-left: 65px;
padding-top: 60px;
color: navy;
font-size: 20px;
font-weight: 700;
}
#secondColumn p {
font-size: 13px;
padding-left: 70px;
}
.benefitss {
margin-left: 80px;
padding-top: 20px;
font-size: 13px;
}
.benefitss li{
padding-top: 2px;
}
/*THIRD COLUMN*/
#thirdColumn {
width: 100%;
height: 250px;
}
#thirdColumn p:nth-child(2) {
color: #ffffff;
font-style: italic;
font-size: 15px;
text-align: center;
}
#thirdColumn p:nth-child(3) {
color: #ffffff;
font-size: 18px;
font-weight: 700;
text-align: center;
}
/*FOURTH COLUMN*/
#fourthColumn {
background-color: yellow;
width: 100%;
height: 75px;
}
/*SIGN UP BUTTON*/
#signupButton {
background-color: #000040;
color: white;
border-radius: 3px;
border-style: none;
font-size: 12px;
font-weight: 800;
height: 30px;
width: 150px;
margin-left: 42.9%;
margin-top: 25px;
}
#fifthColumn {
background-color: #000000;
width: 100%;
height: 225px;
position: absolute;
}
#fifthColumn p {
color: yellow;
text-align: center;
font-size: 24px;
font-weight: 800;
}
#footer p {
font-size: 9px;
color: #ffffff;
text-align: center;
padding-top: 11%;
}
I'm almost finished with this site, and am just now trying to make it cross-browser. It works wonderfully in everything but IE6. I've fixed two of the problems it had, but am lost on the last one. The left sidebar moves right when the window is re-sized to something around 800px. The more you re-size, the more it moves, eventually covering up the content. This also seems to affect the header by shrinking it. The header is a small problem, but mostly just an annoyance.
I've tried a few fixes, but that did nothing. The only thread I could find that relates to this mentions that jQuery may be affecting it, but I have no jQuery set on that div. I'd appreciate any help that is given, as my deadline is approaching.
My HTML is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="file:///C:/resources/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../_script/textShorten.js"></script>
<script type="text/javascript" src="file:///C:/Users/Matt/Desktop/Coding/Framed/framed_over.js"></script>
<link rel="stylesheet" href="file:///C:/Users/Matt/Desktop/Coding/Framed/framed.css" type="text/css" />
<link rel="stylesheet" href="../../_script/css.css" type="text/css" />
<style type="text/css">
_#wrapper { height: 600px; }
/* Photo Styles */
#wrapper { padding-right: 241px; }
#sidebar { right: 216px; }
#infobar { margin-right: -241px; }
#content { padding: 10px 20px; }
</style>
</head>
<body>
<div id="header"><img src="../../_images/logo.png" alt=" " id="logo" /></div>
<div id="wrapper">
<!-- START CONTENT -->
<div id="content" class="column">
<img src="-photo-images/thumb__zimmerman-thomas_01.jpg" class="framed" alt="Glasgow Necropolis 1">
<img src="-photo-images/thumb__zimmerman-thomas_02.jpg" class="framed" alt="Glasgow Necropolis 2">
<img src="-photo-images/thumb__zimmerman-thomas_03.jpg" class="framed" alt="Mother (II)">
</div>
<!-- END CONTENT -->
<div id="sidebar" class="column">
<div id="top"><!-- EMPTY DIV --></div>
Home<br />
<a href="archives.html/" id="none" >Archives</a><br />
About Us<br />
Submit Your Work<br />
<hr />
<h2>January 2011</h2>
<h3>Poets</h3>
<ul>
<li>Valentina Cano</li>
<li>Ricky Garni</li>
<li>Kyle Hemmings</li>
<li>Paulus Kapteyn</li>
<li>Tammy Ho Lai-Ming</li>
<li>Laura LeHew</li>
<li>Rhonda Maness</li>
<li>Anita McQueen</li>
<li>Rodney Nelson</li>
<li>Lise Phillips</li>
<li>Changming Yuan</li>
<li>Desmond Kon Zhicheng-Mingdé</li>
</ul>
<br />
<h3>Photographers</h3>
<ul>
<li>Leila Fortier</li>
<li>Tammy Ho Lai-Ming</li>
<li>Allicia Strickland</li>
<li>Jump Study Photography</li>
<li>Thomas Zimmerman</li>
</ul>
</div>
<div id="infobar" class="column">
<h1 id="author">Thomas Zimmerman</h1>
<br />
<!-- Poem List -->
<h4>Poems</h4>
<ul id="submitList">
<li>Glasgow Necropolis 1</li>
<li>Glasgow Necropolis 2</li>
<li>Mother (II)</li>
</ul><br />
<!-- Issue Features -->
<h4>Featured in Issues:</h4>
<ul>
<li>March 2011</li>
</ul>
<!-- Biography Start -->
<h1 id="mark">Biography</h1>
<p id="Bio">
Thomas Zimmerman teaches English, directs the Writing Center, and edits three literary magazines at Washtenaw Community College, in Ann Arbor, MI. Photographs of his have appeared recently in the small magazines Bete Noire and Muscle & Blood.
</p>
</div>
</div>
<script type="text/javascript">$("#infobar li").ellipsis();</script> <!-- For FireFox -->
</body>
My CSS:
/* Poetry Styles */
/* #wrapper { padding-right: 301px; }
#sidebar { right: 276px; }
#infobar { margin-right: -301px; }
#content { padding: 20px 50px; }
*/
/* Photo Styles */
/* #wrapper { padding-right: 241px; }
#sidebar { right: 216px; }
#infobar { margin-right: -241px; }
#content { padding: 10px 20px; }
*/
html,body,div,span,h1,h2,h3,h4,h5,h6,hr,p,a,abbr,acronym,address,big,del,em,img,
small,strike,strong,sub,sup,ul,ol,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,optgroup,option
{ margin: 0; padding: 0; border: 0; outline: 0;
text-align: left; vertical-align: middle;
text-decoration: none; list-style: none; zoom: 1;
}
/* Layout styles */
body { min-width: 900px; }
div#wrapper { min-height: 600px; padding-left: 176px; padding-right: 301px; overflow: hidden !important; }
div.column { float: left; position: relative; padding-bottom: 20020px !important; margin-bottom: -20000px !important; }
div#content { width: 100%; min-width: 400px; }
div#sidebar { right: 276px; margin-left: -100%; _left: 201px; }
div#infobar { margin-right: -301px; }
/* Layout Styles End */
body
{ background: rgb(20, 20, 20) url("../_images/bg_main.png");
font-family: palitno linotype; color: white; font-size: 12px;
}
h1 { font-size: 20px; font-weight: normal; } h2 { font-size: 18px; font-weight: normal; } h3 { font-size: 16px; font-weight: normal; } h4 { font-size: 14px; font-weight: normal; } h5 { font-size: 12px; font-weight: normal; } h6 { font-size: 10px; font-weight: normal; }
a { color: white; position: relative; }
a:link { color: white; }
a:visited { color: rgb(205, 205, 205); }
a:hover { color: white; left: 3px; }
div#content a:hover { left: 0; }
a:active { color: white; }
a[href="index.html"], a#none, a[href="about.html"], a[href="submit.html"]
{ font-size: 14px; }
div#header
{ height: 80px;
background: rgb(27, 27, 27) url("../_images/bg_head.png") repeat-x;
border-bottom: 1px solid rgb(136, 0, 0);
overflow: hidden;
padding: 10px 40px;
} img#logo { float: left; margin-right: 100px; display: inline; }
div#content { padding: 20px 50px; text-align: center; }
h1.poemTitle { margin-bottom: 10px; text-align: left; }
p.poem { font-size: 14px; text-align: left; margin: 20px 0; line-height: 1.5; }
div#content img { margin: 10px; border: 1px solid rgb(136, 0, 0); }
div#sidebar
{ width: 150px; /* 175 - Padding-left, -right */
background: rgb(27, 27, 27);
border-right: 1px solid rgb(136, 0, 0);
padding: 10px 5px 10px 20px;
font-style: italic;
background: transparent url("../_images/bg_sidebar.png") repeat-y;
z-index: 0;
}
div#sidebar div#top
{ width: 175px; height: 200px;
position: absolute; top: 0px; left: 0; z-index: -1;
background: transparent url("../_images/bg_sidebar-top.png") no-repeat;
}
div#sidebar hr { margin: 8px -5px 8px -20px; border-top: 1px solid transparent; _border-top: 1px solid rgb(100, 0, 0); _border-bottom: 1px solid rgb(136, 0, 0); }
div#sidebar h2 { font-size: 16px; position: relative; left: -8px; }
div#sidebar h3 { font-size: 14px; }
div#sidebar li { position: relative; left: 15px; text-indent: -7px; _text-indent: 0; } /* Sets Wrap Indent. left=8+!'text-indent'; MAX 15px/-7px; */
div#sidebar ul { font-style: normal; }
div#infobar
{ width: 160px;
padding: 10px 20px;
border-left: 1px solid rgb(136, 0, 0);
background: rgb(27, 27, 27) url("../_images/bg_info.png") repeat-y;
} h1#author { position: relative; left: -10px;}
div#infobar h4 { }
div#infobar ul { position: relative; left: 10px; }
div#infobar li { white-space: normal; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; _margin-bottom: 5px; }
h1#mark { position: relative; left: -10px; margin-top: 75px; margin-bottom: 10px; }
p#Bio { max-height: 450px; white-space: normal; }
Simple; dump support for IE 6. Youtube and many other popular sites no longer support it, even Microsoft have abandoned it -- http://ie6countdown.com/