Can anyone help me solve an issue with my css. What I want to do is display the entire document on the screen at once without having an inner window scroll bar.
Below is the code and I've opened up a collaborative room on plunker. Thank you
Plunker code
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title></title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<nav>
<ul>
<li>Test Links will go here</li>
</ul>
</nav>
<main>
<div id = "content">
<article>
<p><iframe style="width: 100%; min-height: 100vh; background-color: #f2f0ea; border: none;"
src="https://docs.google.com/document/d/1L3-ogIreQhm-aHutOfKjDI17buwCJRrkzmwvQGMafGw/pub?embedded=true"
width="300" height="150">
</iframe>
</p>
</article>
</div>
</main>
</body>
</html>
CSS
/* Styles go here */
html {
background : url("http://universitychessclub.org/ChessBackground.jpg") no-repeat center center fixed;
background-size : cover;
}
#welcome{
font-family: monospace;
text-align: center;
}
h1{
font-family: 'Fira Sans', sans-serif;
}
h2{
font-family: 'Fira Sans', sans-serif;
}
p{
font-family: 'Fira Sans', sans-serif;
}
body{
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
width: 80%;
height: 100%;
}
header h1{
margin-left:23%;
font-size:350%;
color: #f2f0ea;/* --off- yellow-white-- */
margin-bottom:5px;
font-family: 'Voltaire', sans-serif;
}
header h2{
margin-left:55%;
width:50%;
margin-top:0%;
color: #f2f0ea;/* --off- yellow-white-- */
font-family: 'Voltaire', sans-serif;
}
header h1 b img {
height:17%;
width:17%;
margin-bottom:-7%;
}
/*--Nav Section--*/
a:hover, a:active {
background-color: #1b1b1b;/*-light black-*/
opacity: 0.4;
}
nav {
background-color: #1b1b1b;/*-light black-*/
width: 100%;
padding:.002%;
border-radius:5px;
opacity: 0.9;
}
nav li {
display: inline;
}
nav ul a {
color: white;
margin: 1%;
text-decoration:none;
font-size:115%;
}
/* --footer section-- */
footer{
color:white;
font-size:larger;
font-style:italic;
text-align: center;
}
input, textarea{
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
.submit{
width: 40%;
margin-left: auto;
margin-right: auto;
}
/* --content area-- */
#content{
height: 100%;
min-height: 100vh;
color:#1b1b1b; /*-light black-*/
font-size: 1.1em;
background-color:#ffffff;/* --off- yellow-white-- */
padding:1%;
border-radius:5px;
}
/* --table-- */
table {
text-align:center;
border-collapse: collapse;
border-style: outset;
border-width:5px;
border-style: solid;
border-color:#1b1b1b; /*-light black-*/
background-color: #f2f0ea;/* --off- yellow-white-- */
}
table a:link{
text-decoration: none;
background-color:transparent;
}
td {
border-width:3px;
border-style: solid;
border-color:#1b1b1b; /*-light black-*/
color: #1b1b1b; /*-light black-*/
}
#tablerow1{
background-color:#898989/*-grey-*/
}
/* --unvisited link-- */
p a:link {
/*-light black-*/
text-decoration: none;
background-color:transparent;
}
/* --visited link-- */
p a:visited {
/* light black */
text-decoration: none;
background-color:transparent;
}
/* --mouse over link-- */
p a:hover {
text-decoration: none;
}
/*--Media Queries--*/
/*--Phone--*/
#media screen and (max-width: 600px) {
header img {display: none; }
header h1{margin-left:0px;}
header h2{padding-left:0px;}
nav{margin-left:0px;}
}
/*--Tablet--*/
#media screen and (max-width: 1024px) {
header h1{margin-left:0px;}
nav{margin-left:0px;}
}
#show{
text-align: center;
}
/*SET MAX SIZES FOR IMAGES*/
img{
max-width: 100%;
max-height: 100%;
}
table img{
max-width: none;
max-height: none;
}
Use the Follows
html, body { height: 100%; }
iframe {
height:400%;
width:100%;
}
I’m afraid this isn’t possible. You’ll have to settle for the inner scroll bar.
Jquery iframe crossdomain dynamic height
Yet Another cross-domain iframe resize Q&A
You might be able to do it if you have control over the iframe’s code, but since it’s a Google Doc that’s not possible.
https://css-tricks.com/cross-domain-iframe-resizing/
http://www.456bereastreet.com/archive/201112/how_to_adjust_an_iframe_elements_height_to_fit_its_content/
The quick way
Add some css for the iFrame like this: height: 2000px;
It's bad though. Because when iframe content changes so will height.
The proper dynamic way
I recently wrote an iframe height adjustment script that gleans iframe heights (this needs to be done from within the iframe). For this I used window.postMessage() to communicate between the iFrame and parent.
IFRAME
(function() {
'use strict';
var getHeight = function(e) {
if (e.data == "getHeight") {
e.source.postMessage("getHeight:" + (Number($("body").height()) + (Number($("body").height()) * 0.05)) + 10 + "px", "*");
}
}
window.addEventListener("message", getHeight, false);
}());
PARENT
var iframeCallback = function(e) {
if(typeof(e.data) == "string"){
var response = e.data.split(":");
switch (response[0]) {
case "getHeight":
IFRAME.height(response[1]);
break;
default:
console.log("Undefined method: " + response[0]);
break;
}
}
}
window.addEventListener("message", iframeCallback, false);
var getHeight = function(){
$("iframe")[0].contentWindow.postMessage("getHeight", "*");
}
$(window).resize(function() {
getHeight();
});
$("iframe")[0].on('load', function() {
getHeight();
}
Related
I'm working on a site that is going to look like this:
However, I am having some trouble getting the divs on the third row not to move when I resize the window. To give you an idea of what i'm talking about, here are pictures...
At normal window size:
When I make the window smaller:
How can I make it so that the two divs stay the same as they are in the first picture and don't change position when i adjust the window size. Also, is there any way I can make the text resize along with the div?
Here is my code so far:
#font-face {
font-family: 'Trend Sans 004'; /*a name to be used later*/
src: url('fonts/Trend Sans W00 Four.ttf'); /*URL to font*/
}
#font-face {
font-family: 'Utopia Regular'; /*a name to be used later*/
src: url('fonts/utopia-regular.ttf'); /*URL to font*/
}
#font-face {
font-family: 'Trend Sans 001'; /*a name to be used later*/
src: url('fonts/Trend Sans W00 One.ttf'); /*URL to font*/
}
/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/
/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box; }
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box; }
/* For devices larger than 400px */
#media (min-width: 400px) {
.container {
width: 85%;
padding: 0; }
}
/* For devices larger than 550px */
#media (min-width: 550px) {
.container {
width: 80%; }
.column,
.columns {
margin-left: 4%; }
.column:first-child,
.columns:first-child {
margin-left: 0;
}
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 30.6666666667%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
}
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
font-size: 62.5%; }
body {
background-color:#C8D7DC;
}
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 2rem;
font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
/* Larger than phablet */
#media (min-width: 550px) {
h1 { font-size: 5.0rem; }
h2 { font-size: 4.2rem; }
h3 { font-size: 3.6rem; }
h4 { font-size: 3.0rem; }
h5 { font-size: 2.4rem; }
h6 { font-size: 1.5rem; }
}
p {
margin-top: 0; }
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
color: #333;
border-color: #888;
outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
color: #FFF;
background-color: #33C3F0;
border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
color: #FFF;
background-color: #1EAEDB;
border-color: #1EAEDB; }
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
height: 38px;
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid #33C3F0;
outline: 0; }
label,
legend {
display: block;
margin-bottom: .5rem;
font-weight: 600; }
fieldset {
padding: 0;
border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
display: inline; }
label > .label-body {
display: inline-block;
margin-left: .5rem;
font-weight: normal; }
/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
list-style: circle inside; }
ol {
list-style: decimal inside; }
ol, ul {
padding-left: 0;
margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%; }
li {
margin-bottom: 1rem; }
/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px; }
pre > code {
display: block;
padding: 1rem 1.5rem;
white-space: pre; }
/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
padding-left: 0; }
th:last-child,
td:last-child {
padding-right: 0; }
/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
margin-bottom: 2.5rem; }
/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
width: 100%;
box-sizing: border-box; }
.u-max-full-width {
max-width: 100%;
box-sizing: border-box; }
.u-pull-right {
float: right; }
.u-pull-left {
float: left; }
/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
content: "";
display: table;
clear: both; }
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
/* Larger than mobile */
#media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
#media (min-width: 550px) {}
/* Larger than tablet */
#media (min-width: 750px) {}
/* Larger than desktop */
#media (min-width: 1000px) {}
/* Larger than Desktop HD */
#media (min-width: 1200px) {}
/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#header {
font-size:10vw;
margin-top:5%;
text-align: center;
font-family:'Trend Sans 004';
color: #806239;
}
/* Row 1
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#row1 {
font-family:'Trend Sans 001';
color:#806239;
border: 2px #806239 solid;
margin-top:2%;
padding:1%;
font-size:2vw;
white-space: nowrap;
}
#row1 a:link {
text-decoration: none;
color:#806239;
}
#row1 a:visited {
text-decoration: none;
color:#806239;
}
#row1 a:hover {
text-decoration: none;
color:#806239;
}
#row1 a:active {
text-decoration: none;
color:#806239;
}
#row1 ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
#row1 li {
display: inline;
}
#row1 li {
display: inline;
}
#kjn {
padding-right:25%;
padding-left:25%;
}
/* Row 3
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#row3 {
background-color:#806239;
font-family:'Utopia Regular';
margin-top:2%;
text-align:center;
color: white;
padding:5%;
}
#mail {
font-family:'Trend Sans 001';
letter-spacing:2px;
font-size:1.8vw;
}
#first {
margin-top:-5%;
font-size:1.5vw;
letter-spacing:.4px;
}
/* Box Row
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#boxRow {
font-family:'Utopia Regular';
margin-top:2%;
}
#boxRowImg1 {
background-image: url("images/interior.png");
background-color:grey;
background-repeat: no-repeat;
background-size: cover;
font-family:'Utopia Regular';
width: 48%;
height: 0;
padding-bottom: 48%;
}
#boxRowTxt {
font-family:'Utopia Regular';
box-shadow:0px 0px 0px 3px #806239 inset;
width: 48%;
color:#806239;
position:relative;
height: 0;
padding-bottom: 48%;
}
#boxRowTxt h5 {
font-family:'Trend Sans 001';
font-size:3vw;
}
#boxRowTxt p {
margin-top:-20px;
color:#806239;
font-size:10px;
}
#boxRowTxt hr {
height:1px;
width:40%;
background-color:#806239;
border-width:0px;
}
#aa {
padding-top:20px;
padding-bottom:20px;
padding-left:10%;
padding-right:10%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* hr
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#row5 hr {
height:2px;
width:100%;
background-color:#806239;
border-width:0px;
margin-top:3%;
}
/* Row 6
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#row6 {
font-family:'Trend Sans 001';
margin-top:.5%;
margin-bottom:1.5%;
font-size:1.3vw;
color:#806239;
}
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Cupid's Cafe & Bakery</title>
<meta name="description" content="Cupid's Cafe & Bakery">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="Cupids.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div class="row">
<div class="twelve columns" id="header">
Cupid's
</div>
</div>
<div class="row">
<div class="twelve columns" id="row1">
<ul>
<li>Menu</li>
<li><a id="kjn" href="#about">About</a></li>
<li>Gallery</li>
</ul>
</div>
</div>
<div class="row" id="boxRow">
<div class="six columns" id="boxRowImg1" >
</div>
<div class="six columns" id="boxRowTxt" >
<div id="aa">
<h5>The Cafe</h5></br>
<p>Like a home away from home, our secluded cafe is the perfect place to relax, work, or settle in with a good book. Make sure to try one of our delicious lunch options or expertly brewed hot drinks. </p>
<hr align="left" >
</div>
</div>
</div>
<div class="row">
<div class="twelve columns" id="row5">
<hr width="100%">
</div>
</div>
<div class="row">
<div class="twelve columns" id="row6">
copyright 2016, emily baker
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
Be careful about this media query :
#media (min-width: 550px)
.column, .columns {
margin-left: 4%;
}
This query add a margin-left when the size of the window is larger than 550px. You have to adapt it to fix your issue ;)
Another solution could be to change the layout when you're with a very small width. For example, putting the two div in a 100% width one above the other.
You can do that with a media query.
For your first question, it seems like the divs snap together when the window hits ~550px wide. More likely than not, its skeleton doing that for you, so I'd look for a media query which changes padding or margin.
As for your second question, yes, you can change the size of the text as the window changes sizes, but whether or not that is something you want for your users is another question. You can look into using rem or percentages for the font-size property of that element.
Resolved! Thanks to #Shomz
Resolved by adding 100% height to html and body.
html, body, #background {
height: 100%;
}
Original Question
So I have a div containing a background-image, the image however does not cover the bottom of the screen, it seems to always follow the height of another div, here's an image of my problem (Colour Code: WHITE = div class="content",BLACK = div id="background",BLUE=What div id="background" should be covering.)
This is what I want to above image to look like
Also, sorry if it sounds confusing, I'm in a rush! Here's the source code;
HTML;
<!DOCTYPE html>
<html>
<head>
<title>PROJECT_SPACE</title>
<!--add the styling-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!--change background script-->
<script>
$(switchBackground);
var oFReader = new FileReader(),
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function(oFREvent) {
localStorage.setItem('b', oFREvent.target.result);
switchBackground();
};
function switchBackground() {
var backgroundImage = localStorage.getItem('b');
if (backgroundImage) {
$('#background').css('background-image', 'url(' + backgroundImage + ')');
}
else {
$('#background').css('background-image', 'url("img/grass_side.png")');
}
}
function loadImageFile(testEl) {
if (! testEl.files.length) { return; }
var oFile = testEl.files[0];
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
oFReader.readAsDataURL(oFile);
}
function removeImageFile()
{
localStorage.removeItem('b');
switchBackground();
location.reload();
}
</script>
</head>
<body>
<!--navigation-->
<ul class="nav">
<li>Home</li>
<li>Projects</li>
<li>Skins</li>
<li>Packs</li>
<li>Servers</li>
<li>Forums</li>
</ul>
<!--end navigation-->
<div id="background">
<div class="content">
<input id="test" type="file" onchange="loadImageFile(this)" />
<button type="button" onclick="removeImageFile()">Clear background</button>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #82b2ff;
}
.logo {
width: 50px;
height: 50px;
background-color: #000;
}
/*fonts*/
#font-face { font-family: cool; src: url('../fonts/coolvetica.ttf'); }
/*background*/
#background {
height: 100%;
}
/*content -- where all site content will go */
.content {
background-color: #fff;
margin-left: auto;
margin-right: auto;
width: 80%;
height: 700px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
/*navigation*/
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
margin-top: 150px;
padding:0;
text-align:center;
list-style: none;
background-image: url('../img/sandstone_smooth.png');
background-repeat: repeat;
font-family: cool;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
text-decoration: none;
color: #fff;
font-size: 20px;
letter-spacing: 4px;
}
.nav a:hover {
color: #E0E0E0;
}
/*links*/
a:link {
color: #fff;
}
/* visited link */
a:visited {
color: #fff;
}
/* mouse over link */
a:hover {
color: #fff;
}
/* selected link */
a:active {
color: #fff;
}
The following rules should fix your background:
html, body, #background {
height: 100%;
}
Based on the screen layouts you've displayed above, I'd be tempted to simply declare the body background-color: black:
body {
background-color: rgba(0,0,0,1);
}
If you need to, you can also give the .nav a padding-top: and (possibly) a position: absolute;.
That seems to me the most straightforward way to reproduce your desired screen layout above.
Do you think that will work for you?
I used a border to figure out that my wrapper is only wrapping my Header and I'm stumped as to why...I want to wrap the Header, all the way down to the footer... Anyone have any pointers?
I've seen a lot of articles say to specify a width and the height is set to auto if not stated, too, right?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<title>Personal Transportation/Errands Services</title>
</head>
<body>
<header>
<div id="headleft">
<img src="images/new logo flattened.jpg" />
</div>
<div id="headright">
(717)***-****
<br />
********#yahoo.com
</div>
</header>
<nav>
Home
Contact
</nav>
<article>
Test
</article>
<aside>
<img src="images/car 1.png" id="car" />
</aside>
<footer>
Ftest
</footer>
</body>
</html>
/* Makeshift CSS Reset */
{
margin: 0;
padding: 0;
}
/* Tell the browser to render HTML 5 elements as block */
footer, header, aside, nav, article {
display: block;
}
body{
width:940px;
height: 100%;
margin:0 auto;
border-style: solid;
border-width: 3px;
}
header {
background-color: #1a8cff;
}
nav {
width: 100%;
float: left;
text-align: right;
background-color: #ff7f00;
font-family: bold 'Oswald', sans-serif;
color: #ffffff;
letter-spacing: 1px;
}
a {
text-decoration: none;
}
/* unvisited link */
a:link {
color: #FFFFFF;
}
/* visited link */
a:visited {
color: #FFFFFF;
}
/* mouse over link */
a:hover {
color: #FFFF00;
}
/* selected link */
a:active {
color: #FFFF00;
}
#headleft {
display:inline;
background-color: #1a8cff;
width: 100%;
}
#headright {
height: 87px;
padding-top: 37.5px;
vertical-align: middle;
display: inline;
float: right;
background-color: #1a8cff;
border-style: solid;
border-width: 3px;
}
body {
margin: 0 auto;
width: 1000px;
font: 13px/22px Helvetica, Arial, sans-serif;
background-color: white;
background-size: 100%;
}
article{
float: left;
}
aside{
float: right;
}
footer{
float:left;
background-color: #1a8cff;
width: 100%;
}
you need to clear your floated elements, you can use a clearfix or an empty div set to clear:both.
FIDDLE
You could also use a wrapper inside the body that wraps every element on the page and set that to overflow: hidden
ALT FIDDLE
this is my test responsive web page and first time to do responsive web site.
http://www.oldcompany.com.sg/test
everything is fine but when I look in mobile, there is a big gap or white space between slider and footer.. also in below of the footer..
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Old Company - Integrated Solution</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page styles-->
<link href="css/styles.css" rel="stylesheet">
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/fotorama.css">
<script src="js/fotorama.js"></script>
</head>
<body>
<div class="header">
<div class="fotorama-header">
<!-- header -->
<div style="letter-spacing: 1px; font-weight: bold; font-size: 16px;">
<a href="http://www.oldcompany.com.sg" style="text-decoration: none; color: #fff;">
<img src="img/oc_logo.png" />
</a>
</div>
<!-- /header -->
</div>
<div class="menu">
Home
About Us
Services
Contact Us
</div>
</div>
<div class="page-wrap">
<div class="fotorama" data-width="100%" data-height="100%" data-nav="none" data-autoplay="true"
data-minHeight="auto" data-fitToWindowHeight="true" data-fitToWindowHeightMargin="0" data-margin="0"
data-shadows="false" data-cropToFit="true">
<div class="caption" data-img="img/open.png">
</div>
<div class="caption" data-img="img/lead.png">
</div>
<div class="caption" data-img="img/dynamic.png">
</div>
</div>
<div class="push"></div>
</div>
<div class="site-footer">
<div>
Copyright © 2013, theoldcompany Pte Ltd. All right reserved
</div>
</div>
</body>
</html>
CSS:
/* Global reset */
* {
padding:0;
margin:0;
}
html , body{ height: 100%; }
img, object {max-width: 100%;}
/* Clear fix: nicolasgallagher.com/micro-clearfix-hack/ */
.group:before, .group:after { content:""; display:table; }
.group:after { clear:both; }
.group { *zoom:1; } /* IE6-7 */
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin: 0 auto -2.5em;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer
{
background: rgba(0,0,0, .7);
}
.site-footer::after {height: 0px;}
.site-footer > div
{
width: 90%;
margin: 0px auto;
text-align: center;
font-size: 0.8em;
color: #FFF;
padding-top: 10px;
}
.site-footer, .push {
/* .push must be the same height as footer */
height: 2.5em;
}
body {
font-family:century gothic, "Helvetica Neue", Helvetica, Arial, sans-serif;
background:#fff;
color:#111;
font-size:16px;
}
/* Header */
.header {
position:relative;
top:0;
left:0;
width:100%;
color:#ccc;
background:#111;
background:hsla(0,0%,0%,.6);
z-index:10;
}
.header a,
.header a:link,
.header a:visited {
color:#ccc;
}
.header a:hover,
.header a:active,
.header a:focus {
color:#fff;
}
.fotorama-header {
margin-left:8px;
}
.menu {
position:absolute;
top:25px;
right:8px;
font-size:13px;
}
.menu a {
margin-left:1em;
}
just remove .page-wrap{
min-height:100%}
from css
If you want fixed footer or header, you must set their heights and match the margins of page-wrap.
html, body {
margin: 0;
padding: 0;
height: 100%; /* needed for content height */
text-align: left;
vertical-align: top;
overflow: hidden;
position: relative; /* help with position absolute */
}
.header {
display: block;
position: relative;
height: 40px;
width: 100%;
background-color: black;
color: white;
overflow: hidden;
text-align: center;
}
.page-wrap {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top: 40px; /* same height as header */
margin-bottom: 40px; /* same height as footer */
}
.content {
overflow-y: auto;
overflow-x: hidden;
height: 100%;
text-align: left;
-webkit-overflow-scrolling: touch;
background-color: blue;
color: white;
}
.site-footer {
position: absolute;
bottom: 0px;
display: block;
height: 40px;
width: 100%;
background-color: black;
color: white;
overflow: hidden;
text-align: center;
}
http://jsfiddle.net/s2yZW/
use this:
.site-footer{over-flow-y:hidden;}
Can someone help me make the original code from HTML5 Boilerplate Initializser, have the footer stick to the bottom of the browser, I've tried all manor of codes from web examples but unfortunately I think as usual the boiler plates predefined CSS is affecting the positioning and "sticking" of the footer.
Heres my CSS:
/* =============================================================================
HTML5 Boilerplate CSS: h5bp.com/css
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100%;}
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 0.9em; line-height: 1.4; height: 100%;}
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 0.9em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
/* ===== Initializr Styles =====================================================
Author: Jonathan Verrecchia - verekia.com/initializr/responsive-tfont-sizeplate
========================================================================== */
body{ font:16px/26px Helvetica, Helvetica Neue, Arial; }
.wrapper{
width:90%;
margin:0 5%;
min-height: 100%;
}
/* ===================
ALL: Blue Theme
=================== */
#header-container{ border-bottom: 20px solid #22558b; width:100% }
#footer-container{ border-top: 20px solid #22558b; width:100%}
#main aside { border-top: 20px solid #22558b; }
#header-container,
#footer-container,
#main aside{
background:#2c6cb1;
}
#title{color:white; }
::-moz-selection { background: #2c6cb1; color: #fff; text-shadow: none; }
::selection { background: #2c6cb1; color: #fff; text-shadow: none; }
/* ==============
MOBILE: Menu
============== */
nav a{
display:block;
margin-bottom:10px;
padding:15px 0;
background:#22558b;
color:white;
text-align:center;
text-decoration:none;
font-weight:bold;
}
nav a:hover, nav a:visited{
color:white;
}
nav a:hover{
text-decoration:underline;
}
/* ==============
MOBILE: Main
============== */
#main{
padding:30px 0;
}
#main article h1{
font-size:2em;
}
#main aside{
color:white;
padding:0px 5% 10px;
}
#footer-container footer{
color:white;
padding:20px 0;
clear:both;
}
/* ===============
ALL: IE Fixes
=============== */
.ie7 #title{ padding-top:20px; }
/* ===== Primary Styles ========================================================
Author: Christopher Leah of Happy Webs LTD - 07/2012
========================================================================== */
.btn{clear:left;float:left; width:79px; margin-left:5px; margin-bottom:2px;}
.ColHead{float:left; width:50px; margin-left:5px; background-color:#22558B;color:#ffffff;margin-bottom:2px;}
.RowHead{clear:left;float:left; width:75px; margin-left:5px;background-color:#2C6CB1;color:#ffffff;margin-bottom:2px;}
.gridBoxes{float:left; width:50px; margin-left:5px; margin-bottom:2px;}
.graph{margin-top:10px;float:left;}
h3.left {float: left; width:49%;}
h3.right {float: right; width:49%; text-align:right;}
#footer-container a { color:#fff; text-decoration:none; }
#footer-container a:hover { text-shadow: 1px 1px 1px #000; }
.txtSmall {width:50px;}
#title a{color:#fff; text-shadow: 1px 1px 1px #000; text-decoration:none;}
.disclaimer { font-size:0.8em;}
.disclaimer a{ color:#22558B;}
/* =============================================================================
Media Queries
========================================================================== */
#media only screen and (min-width: 480px) {
/* ====================
INTERMEDIATE: Menu
==================== */
nav a{
float:left;
width:27%;
margin:0 1.7%;
padding:25px 2%;
margin-bottom:0;
}
nav li:first-child a{ margin-left:0; }
nav li:last-child a{ margin-right:0; }
/* ========================
INTERMEDIATE: IE Fixes
======================== */
nav ul li{
display:inline;
}
.oldie nav a{
margin:0 0.7%;
}
}
#media only screen and (min-width: 768px) {
/* ====================
WIDE: CSS3 Effects
==================== */
#header-container,
#main aside{
-webkit-box-shadow:0 5px 10px #aaa;
-moz-box-shadow:0 5px 10px #aaa;
box-shadow:0 5px 10px #aaa;
}
/* ============
WIDE: Menu
============ */
#title{
float:left;
text-shadow: 1px 1px 1px #000;
}
nav{
float:right;
width:38%;
}
/* ============
WIDE: Main
============ */
#main article{
float:left;
width:57%;
}
#main aside{
float:right;
width:28%;
}
}
#media only screen and (min-width: 1140px) {
/* ===============
Maximal Width
=============== */
.wrapper{
width:1026px; /* 1140px - 10% for margins */
margin:0 auto;
}
}
/* =============================================================================
Non-Semantic Helper Classes
========================================================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* =============================================================================
Print Styles
========================================================================== */
#media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
#page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
Heres my HTML:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head id="Head1"><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><title>
Home - Upper Control Limit
</title><meta name="description" /><meta name="author" /><meta name="viewport" content="width=device-width" /><link rel="stylesheet" href="css/style.css" />
<script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
</head>
<body>
<div id="header-container">
<header class="wrapper clearfix">
<h1 id="title">Upper Control Limit</h1>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
<div id="main-container">
<form method="post" action="default.aspx" id="Form1" enctype="multipart/form-data">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUIMzI4MjE1NjZkZO1bVtBx0KanNtHBuPKe20ZygwvsWgeEn3cRtL/CrOHU" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQK3heD7DwLHyoqxBgLHyuK8AQKDw8wMAt3oqtEMt6vvVJr549pcOORe6AIL/bfdHDA/UvYWb5jzHlW8pc0=" />
</div>
<div id="main" class="wrapper clearfix">
<article>
<section>
<h2>Manual Data Entry</h2>
<label>Rows: </label><input name="ctl00$MainContent$txtRows" type="text" id="MainContent_txtRows" class="txtSmall" />
<label>Cols: </label><input name="ctl00$MainContent$txtCols" type="text" id="MainContent_txtCols" class="txtSmall" />
<p><em>*Maximum of 10 rows and/or 30 columns for this trial version.</em></p>
<p><input type="submit" name="ctl00$MainContent$btnGo" value="Go" id="MainContent_btnGo" /></p>
<br />
</section>
<section>
<h2>File Uploader</h2>
<p><input type="file" name="ctl00$MainContent$flUp" id="MainContent_flUp" /> </p>
<p>(Maximum File Size: 3KB)<br /><em>*Do not include any column headers or text in your CSV.</em></p>
<p><input type="submit" name="ctl00$MainContent$btnUpload" value="Upload" id="MainContent_btnUpload" /></p>
<br />
</section>
<section>
<h3>Disclaimer</h3>
<p class="disclaimer">Data uploaded or manually entered, is deleted immediately
after processing. If you have concerns over your data or privacy, please read our disclaimer.<br />If your data contains sensitive information, you should consider
integrating the UCL engine within your system. Please contact us for more information. <br /></p>
</section>
</article>
<aside>
<h3>About UCL</h3>
<p>Control Charts have multiple applications in a wide variety of industries. They
can help measure the effectiveness of manufacturing processes or the quality of
service based industry.</p>
<p>The UCL calculator has been developed by Data-Exchange Ltd as a side project
which was driven by the need to integrate this magic formula within various
business applications.</p>
<h4>Upper Control Limit Formula</h4>
<p><img src="img/ucl-formula.png" title="Upper Control Limit Formula" alt="Upper Control Limit Formula: X + 2.66* MR" /></p>
<h4>Lower Control Limit Formula</h4>
<p><img src="img/lcl-formula.png" title="Lower Control Limit Formula" alt="Lower Control Limit Formula: X - 2.66* MR" /></p>
</aside>
</div>
</form>
</div> <!-- #main-container -->
<div id="footer-container">
<footer class="wrapper clearfix">
<h3 class="left">Copyright © 2012 Data Exchange Ltd</h3>
<h3 class="right"><a href="http://www.perfect-flow.com/" title="PerfectFlow Ltd" ><img alt="PerfectFlow" border="0" src="img/perfectflow.gif" /></a></h3>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/script.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-17073042-4']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Thanks for any help guys!
If your styles come after the CSS from Boilerplate, that should apply. It's the beauty of CASCADING stylesheets. Trying using position:fixed and bottom:0px for your footer.
#footer-container {
position:fixed;
bottom:0px;
width:100%;
}
Take the BP, then add the additional markup stated on this page: http://www.cssstickyfooter.com/html-code.html. Then, add the appropriate CSS. If you view it in tree mode via Firebug, it will help. After you getting working with the additional markup, see if you can repurpose your existing markup to clean things up a bit.
Try doing something to this effect...
#footer-container {
position:fixed;
bottom:0px;
}
The best way for having a sticky footer in an elegant way without any workaround you should use this css code:
#footer{
position:fixed;
clear:both;
}