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;}
Related
/* styles the viewport */
*{
margin: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
/* styles the class hero */
.hero{
background-color: #1d2026;
min-height: 100vh;
width:100%;
color:#fff;
position: relative;
}
/* navbar */
nav{
display: flex;
text-align: center;
padding: 25px 8%;
}
/* navbar-menu */
nav .menu-img{
width: 30px;
height: 28px;
margin-right: 20px;
margin-top: 8px;
cursor: pointer; /*tells us the mouse pointer that the content is a link */
}
nav .logo-img{
width: 170px;
height: 40px;
cursor: pointer; /*tells us the mouse pointer that the content is a link */
}
nav ul{
flex: 1;
text-align: right;
display: inline-block;
padding-top:10px;
}
nav ul li{
list-style: none;
display: inline-block;
margin: 0 20px;
text-decoration: none;
}
/* accesing the anchor tags of lists in class right-navbar-part */
nav ul li a{
text-decoration: none;
color: #fff;
}
/* designing button */
button{
background: #efefef;
height: 28px;
width: 65px;
border-radius:30px;
outline: 0;
border: 0;
cursor:pointer;
margin-top:8px;
}
/* creating a circle inside button */
button span{
display: block;
border-radius: 55%;
background-color: lightgreen;
height: 27px;
width: 30px;
}
/* Lamp and light positioning */
.lamp-container{
position: absolute; /*this part of div can be placed anywhere in the screen as it has pos:absolute*/
top:-20px; /*to move the lamp more upwards--some top part of the lamp goes out of viewport*/
left: 22%;
width: 200px;
}
.lamp{
width: 100%;
}
.light{
position: absolute;
top:97%;
left: 50%;
width: 700px;
transform: translateX(-51.3%);
}
/* written text */
.written-text{
max-width:600px;
margin-top: 7%;
margin-left: 50%;
}
.written-text h1{
font-size:80px;
font-weight: 400;
}
/* Check All Collections button */
.written-text a{
text-decoration:none;
background: #00986f;
padding: 14px 40px;
display: inline-block;
margin-top: 40px;
border-radius: 30px;
color: #fff;
font-size: 18px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Magical Lamp Website</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<nav>
<div class="left-navbar-part">
<img src="images/menu.png" class=menu-img alt="menu_image">
<img src="images/logo.png" class=logo-img alt="logo_image">
</div>
<ul>
<li>Latest</li>
<li>Modern</li>
<li>Contemporary</li>
<li>Affordable</li>
</ul>
<button type="button" class="button" name="button"><span></span></button>
</nav>
<div class="lamp-container">
<img src="images/lamp.png" class="lamp" alt="lamp image">
<img src="images/light.png" class="light" alt="light image">
</div>
<div class="written-text">
<h1>Latest<br />in Lightning</h1>
<p>This is the first lamp from our company,we're making a huge collection of<br />modern lamps in all categories from home use to office use</p>
Check All Collections
</div>
</div>
</body>
</html>
I am getting a small white margin at the end of the webpage.Due to which i can even scroll a little down in the webpage. But I am unable to understand why I am getting that white margin at the end.?
I want the color of the body to be in the whole webpage.
This is the webpage picture. You can see a small white margin at the bottom.
Because you have to from media query and overflow for body use In order not to overflow and to be responsive
/* styles the viewport */
*{
margin: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body {
overflow: hidden;
}
/* styles the class hero */
.hero{
background-color: #1d2026;
min-height: 100vh;
width:100%;
color:#fff;
position: relative;
}
/* navbar */
nav{
display: flex;
text-align: center;
padding: 25px 8%;
}
/* navbar-menu */
nav .menu-img{
width: 30px;
height: 28px;
margin-right: 20px;
margin-top: 8px;
cursor: pointer; /*tells us the mouse pointer that the content is a link */
}
nav .logo-img{
width: 170px;
height: 40px;
cursor: pointer; /*tells us the mouse pointer that the content is a link */
}
nav ul{
flex: 1;
text-align: right;
display: inline-block;
padding-top:10px;
}
nav ul li{
list-style: none;
display: inline-block;
margin: 0 20px;
text-decoration: none;
}
/* accesing the anchor tags of lists in class right-navbar-part */
nav ul li a{
text-decoration: none;
color: #fff;
}
/* designing button */
button{
background: #efefef;
height: 28px;
width: 65px;
border-radius:30px;
outline: 0;
border: 0;
cursor:pointer;
margin-top:8px;
}
/* creating a circle inside button */
button span{
display: block;
border-radius: 55%;
background-color: lightgreen;
height: 27px;
width: 30px;
}
/* Lamp and light positioning */
.lamp-container{ /*this part of div can be placed anywhere in the screen as it has pos:absolute*/
top:-20px; /*to move the lamp more upwards--some top part of the lamp goes out of viewport*/
left: 22%;
width: 200px;
}
.lamp{
width: 100%;
}
.light{
position: absolute;
top:97%;
left: 50%;
width: 700px;
transform: translateX(-51.3%);
}
/* written text */
.written-text{
display: flex;
flex-direction: column;
align-items: center;
}
.written-text h1{
font-size:80px;
font-weight: 400;
text-align: left;
}
/* Check All Collections button */
.written-text a{
text-decoration:none;
background: #00986f;
padding: 14px 40px;
display: inline-block;
margin-top: 40px;
border-radius: 30px;
color: #fff;
font-size: 18px;
text-align: left;
}
#media screen and (max-width: 540px) {
.written-text h1{
font-size: 32px;
font-weight: 400;
}
.written-text a{
text-decoration:none;
background: #00986f;
padding: 7px 20px;
display: inline-block;
margin-top: 40px;
border-radius: 30px;
color: #fff;
font-size: 12px;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Magical Lamp Website</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<nav>
<div class="left-navbar-part">
<img src="images/menu.png" class=menu-img alt="menu_image">
<img src="images/logo.png" class=logo-img alt="logo_image">
</div>
<ul>
<li>Latest</li>
<li>Modern</li>
<li>Contemporary</li>
<li>Affordable</li>
</ul>
<button type="button" class="button" name="button"><span></span></button>
</nav>
<div class="lamp-container">
<img src="images/lamp.png" class="lamp" alt="lamp image">
<img src="images/light.png" class="light" alt="light image">
</div>
<div class="written-text">
<h1>Latest<br />in Lightning</h1>
<p>This is the first lamp from our company,we're making a huge collection of<br />modern lamps in all categories from home use to office use</p>
Check All Collections
</div>
</div>
</body>
</html>
Some component is overflowing
Make sure your body is set to 100%, then you can put percentages on it's children
body {
margin: 0px;
width: 100%;
padding: 0px;
}
If you use padding make sure to rest that from the percentage like this:
.something {
padding: 20px;
width: calc(100% - 40px);
}
So far, I have managed to get my footer to always stick to the bottom, however, I have been struggling to get the content or images on my webpage to push the footer down. I have been trying absolute, fixed, relative positions for the footer but to no avail as the content in the class "container2" continues to go under the footer. It also shouldn't be sticky footer similar to the nav bar but like a natural footer where it is pushed down by content.
HTML/CSS: https://jsfiddle.net/jof0hzhc/2/
HTML
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
<body class="bg2">
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ResponsiveNav
</div>
<div class="menu">
<ul>
<li>Home</li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
<li>Current page</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section class="content">
<p class="apphead">Heading</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container2">
<p class="apptext">Sub-heading</p>
<div class="games">
<img src="images/1.png">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
<br><br><br><br><br><br><br><br>
</div>
</section>
</div>
<footer>
<p class="foot">
Footer text. <br>
__________________________________________________________________________________________________ <br> <br>
About us
|
Contact us <br>
__________________________________________________________________________________________________
<section>
<p class="foot">Social Media</p>
<span class="social">
<img src="images/mail.png" alt="Mail" width="50px" height="50px"/>
<img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/>
<img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/>
</span>
</section>
<section>
<h3>All rights reserved<br></h3>
</section>
</p>
</footer>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
width: 98%;
background-color: black;
min-height: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
font-weight: lighter;
}
header {
width: 98%;
height: 13vh;
}
li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
width:100%;
position:absolute;
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
p {
color: black;
position: relative;
margin: 5px;
padding: 10px;
}
a { /*General styling for links to other pages or websites*/
text-decoration:none;
position:relative;
font-family: Trebuchet MS, sans-serif;
}
h2 { /*Styling for site title*/
font-size: 50px;
text-align:left;
color:white;
margin: 20px;
font-family: courier;
}
h3 {
font-size:20px;
padding-left:20px;
color: white;
}
.content { /*the main container that consists of most of the existing content*/
margin-top:5px;
width:100%;
height: 1400px;
margin-left: auto;
margin-right: auto;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
nav ul {
line-height: 60px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: orange;
opacity: 10;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: orange;
display: none;
}
.activepage {
font-size: 25px;
color: red;
text-decoration: underline;
}
.welcome {
font-family: courier;
}
.inquiry {
font-size: 17px;
color: white;
}
.container2 {
background-color: darkgrey;
padding: 10px;
margin: 0;
width: 97.8%;
height: 1000px;
z-index: 0;
position:absolute;
overflow:hidden;
}
p.heading {
font-size: 25px;
font-weight: bold;
font-family: courier;
}
.foot {
color: white;
}
.bg2 {
background-image:url("hex.jpg");
height: 550px;
width: 102%;
}
.apphead {
color: white;
font-size: 100px;
font-family: courier;
}
.apptext {
color:white;
font-size: 45px;
font-weight: bold;
font-family: courier;
}
.games {
margin:0;
position:relative;
border:solid white;
}
.games img {
width: 640px;
height:250px;
padding: 5px;
transition: 1s;
}
.games img:hover {
transform: scale(1.1);
}
.item img{
display:block;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
First off, I am a bit confused why you are using the <br> tag so much, but it almost looks like you are trying to space the elements with them. You may want to use padding or margin to do that.
Lastly, I think what you are looking for is position: fixed. Try this:
footer {
width:100%;
position: fixed; /* use fixed instead of absolute */
bottom: 0; /* set bottom to 0 */
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
You have several problems in your css. The main problem for your content not to appear is that you're using overflow: hidden; in container2 and height: 1000px; this causes everything that exceeds 1000px won't be show. Try removing overflow: hidden or overflow: x-scroll.
This is the documentation for the overflow property, I suggest you read it for a better understanding of your problem. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
There are some things that you should change 1. you are using absolute position outside relative 2. using absolute values for hight is not good practice 3. is always better use padding and margin to make space ect. Keep fixed position only for header nav and comment out all fixed hight values(px)and absolute and relative positioning to start with. Absolute position should be inside relative if there is not special reason not to do that. To get out from main problem start with footer and container2. But there is lot more to fix.
You need set a min-height for html, body {min-height: 100vh;}
Set footer as position: fixed; bottom: 0; left: 0;
Hopefully this will help you.
I have a project for a photography site. I am fairly new so still struggling with some of the basics. My project will have a header, a main div where the photos will be displayed and a footer. I want my main div to fill as much space as possible with the footer right at the bottom (as you'd expect). But this is what I am getting:
I have provisionally set the background-color of the header and footer to yellow, the color of the main div to red and the body is set to green. This is to better solve the issue. What I want is no green and the footer to be right at the bottom, with the rest being red, no matter the size of the window.
Here is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="JavaScript2b.js"></script>
<script type="text/javascript" src="JavaScript2.js"></script>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
</head>
<body>
<div id="header">
</div>
<div id="wrap">
<div id="container">
<div id="controllers">
<div id="previous" class="buttons">
<p id="try" onclick="change(-1);">PREVIOUS</p>
</div>
<div id="next" class="buttons">
<p id="try2" onclick="change(1);">NEXT</p>
</div>
</div>
<div id="imagewrap">
<img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
</div>
<div>
<p id="tag">Text</p>
</div>
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="JavaScript2.js"></script>
</body>
</html>
css
#font-face {font-family: Eagle-Light;
src: url("Eagle-Light.otf") format("opentype");
}
#font-face {font-family: Raleway Light;
src: url("Raleway Light.otf") format("opentype");
}
body {
/* height: 100%;*/
background-color: green;
}
#header {
height: 100px;
width: 100%;
background-color: yellow;
}
#footer {
height: 100px;
width: 100%;
background-color: yellow;
}
p {
color: #818181;
font-family: Eagle-Light;
line-height: 1.7em;
padding: 0px;
margin: 0px;
font-size: 0.5em;
letter-spacing: 0.21em;
}
a:link {
text-decoration: none;
color: inherit;
}
a:visited {
text-decoration: none;
color: inherit;
}
div {
margin: 0px;
padding: 0px;
}
#wrap {
clear: both;
padding: 0px;
width: 100%;
background-color: red;
}
body {
margin: 0px;
padding: 0px;
}
#container {
min-width: auto;
position: relative;
/* height: 77%;*/
width: 550px;
margin: 0 auto;
/* margin-top:7%;*/
}
#controllers {
position: static;
height: 20px;
}
#previous {
position: absolute;
left: 0px;
}
#next {
position: absolute;
right: 0px;
}
#tag {
position: static;
height: 20px;
line-height: 1.7em;
padding-top: 5px;
}
.buttons {
cursor: pointer;
}
#imagewrap{
border: 1px solid #818181;
overflow: hidden;
z-index: 2;
background-color: red;
}
#front {
display: block;
}
Thank you,
David
The problem is that your main div takes up very little space and therefore the body extends to cover the screen. In this case you could fix the footer always in the lowest position
#font-face {font-family: Eagle-Light;
src: url("Eagle-Light.otf") format("opentype");
}
#font-face {font-family: Raleway Light;
src: url("Raleway Light.otf") format("opentype");
}
body {
/* height: 100%;*/
background-color: green;
}
#header {
height: 100px;
width: 100%;
background-color: yellow;
}
#footer {
position: absolute;
height: 100px;
width: 100%;
background-color: yellow;
display: block;
bottom: 0;
}
p {
color: #818181;
font-family: Eagle-Light;
line-height: 1.7em;
padding: 0px;
margin: 0px;
font-size: 0.5em;
letter-spacing: 0.21em;
}
a:link {
text-decoration: none;
color: inherit;
}
a:visited {
text-decoration: none;
color: inherit;
}
div {
margin: 0px;
padding: 0px;
}
#wrap {
clear: both;
padding: 0px;
width: 100%;
background-color: red;
}
body {
margin: 0px;
padding: 0px;
}
#container {
min-width: auto;
position: relative;
/* height: 77%;*/
width: 550px;
margin: 0 auto;
/* margin-top:7%;*/
}
#controllers {
position: static;
height: 20px;
}
#previous {
position: absolute;
left: 0px;
}
#next {
position: absolute;
right: 0px;
}
#tag {
position: static;
height: 20px;
line-height: 1.7em;
padding-top: 5px;
}
.buttons {
cursor: pointer;
}
#imagewrap{
border: 1px solid #818181;
overflow: hidden;
z-index: 2;
background-color: red;
}
#front {
display: block;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<div id="header">
</div>
<div id="wrap">
<div id="container">
<div id="controllers">
<div id="previous" class="buttons">
<p id="try" onclick="change(-1);">PREVIOUS</p>
</div>
<div id="next" class="buttons">
<p id="try2" onclick="change(1);">NEXT</p>
</div>
</div>
<div id="imagewrap">
<img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
</div>
<div>
<p id="tag">Text</p>
</div>
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="JavaScript2.js"></script>
</body>
</html>
#wrap {
min-height: calc(100vh-200px);
}
This will set the wrap to be the screen height minus the height of the header and footer.
The 200px value can just be changed to be the combined height of the header and footer.
I am creating a webpage that sits inside another webpage (like an intranet) the document sits and runs from our server which runs Internet Explorer 11. Can anyone tell me why some of the design elements do not appear? (especially curves)
JS Fiddle:
https://jsfiddle.net/kt4hs1pk/
I have put this at the beginning which has given me the closest resemblance of what I want:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=11; IE=6" />
html
<div id="content">
<section id="mainContent">
<h2> Header </h2>
<div class="boxed">
<h3>time and date</h3>
<h4> <img src=" alt=""; style="float:left; padding-right:1%; padding-left:1%"/>main content.</h4>
<br>
<footer>
<article>
<h5><div style="color:black; background-color:#B9D4F4">Links</div></h5>
<p>footer text <br>
<br>
footer text </p>
</article>
</footer>
</div>
<div id="footerbar"><!-- Small footerbar at the bottom --></div>
</div>
</section>
css
#charset "utf-8";
#content #mainContent h2 {
/* Blog Header */
background-color:#fff;
width:auto;
text-indent:3%;
text-decoration:none;
font:antic;
font-weight:100;
}
#content #mainContent h3 {
/*Date and Name */
margin-left:10px;
font:antic;
width:auto;
font-size:14px;
font-weight:100;
color: #D6D6D6;
}
#content #mainContent h4 {
/* All paragraphs under maincontent */
margin-left:10px;
font:antic;
font-weight:100;
color:#195DAD
}
footer article {
/* Footer articles */
width: 100%;
float: left;
padding-left: 2%;
padding-top: 1%;
padding-right: 2%;
text-align: center;
font-family: antic;
font-style: normal;
font-weight: 200;
color: rgba(146,146,146,1.00);
font-size:14px
}
footer article h5 {
/* Footer article titles */
text-align: center;
font-family: antic;
font-style: normal;
font-weight: 400;
font-size:16px;
width:10%;
margin-left:auto;
margin-right:auto;
border-radius:20px 20px 20px 20px;
border-style:dotted;
}
#mainContent {
/* Container for the blog post in individal blog view */
padding-left: 2%;
width: auto;
float: left;
padding-right: 2%;
padding-top: 41px;
margin-left:150px;
max-width:60%;
border-style: groove;
border-top-style:none;
border-color: #C6D9EF;
border-width:1px;
border-radius: 8px;
}
#mainwrapper {
/* Container of all content */
width: 70%;
overflow: auto;
margin-left: 5%;
}
#footerbar {
/* Footer bar at the bottom of the page */
height: 18px;
clear: both;
background-color: rgba(185,212,244,1.00);
width: 100%;
}
footer {
/* Container for footer artices */
width: 100%;
padding-left: 2%;
padding-right: 2%;
}
#mainContent {
/* Container for the blog post */
padding-top: 0px;
float: none;
width: 96%;
}
footer {
/* Footer region */
width: 96%;
padding-left: 2%;
padding-right: 2%;
}
#content footer article {
/*Each footer article */
width: 100%;
}
#mainwrapper header {
/* Header */
width: 100%;
}
#mainwrapper header nav {
/*navigation links in header */
text-align: center;
background-color: #195DAD;
width: 98%;
}
#mainwrapper #content #sidebar {
/* sidebar */
padding-bottom: 0px;
}
#content footer article {
/* Each foter article */
width: 96%;
}
Can anyone help ?
Turns out the website this is going into plays in an iframe. I have come up with alternatives.
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