The banner image in the header is 130 pixels tall, but it says the header in total is 135 pixels. I can't find where this is happening. Where is this extra space coming from?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Taft Power Equipment</title>
<link rel="stylesheet" type="text/css" href="js\jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
<script type="text/javascript" language="Javascript" src="js\jquery.min.js"></script>
<script src="js/jquery.horizontalNav.js"></script>
<script src="js\jquery-migrate-1.2.1.js"></script>
<script>
// When document is ready...
$(document).ready(function() {
$('.full-width').horizontalNav({}); // Call horizontalNav on the navigations wrapping element
$("#main-content").load("home.html");
});
</script>
<script>
$(document).ready(function() {
$("#home").click(function() {
$("#main-content").load("home.html");
});
$("#work").click(function() {
$("#main-content").load("work.html");
});
$("#blog").click(function() {
$("#main-content").load("blog.html");
});
$("#about").click(function() {
$("#main-content").load("about.html");
});
$("#contact").click(function() {
$("#main-content").load("contact.html");
});
$("#parts").click(function() {
$("#main-content").load("parts.html");
});
$("#people").click(function() {
$("#main-content").load("people.html");
});
});
</script>
<script>
$(function() {
$("button").button()
.click(function(event) {
event.preventDefault();
});
});
</script>
<script>
function showParts(str) {
if (str == "") {
document.getElementById("results").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("results").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "partsearch_2.php?q=" + str, true);
xmlhttp.send();
}
</script>
<script>
function showPeople(str) {
if (str == "") {
document.getElementById("results").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("results").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "peoplesearch.php?q=" + str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header">
<img src="images/taft_banner_960_blackandwhite.png" />
</div>
<div id="menu">
<nav class="horizontal-nav full-width horizontalNav-notprocessed">
<ul>
<li>Home
</li>
<li>Work
</li>
<li>Blog
</li>
<li>About
</li>
<li>Contact
</li>
<li>Parts Look Up
</li>
<li>People
</li>
</ul>
</nav>
</div>
<div id="main-content"></div>
<div id="footer">
<p>© Copy Right Taft Power Equipment Corp</p>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html, body {
margin:0;
padding-top:0;
height:100%;
}
p, li {
}
a {
}
b {
}
table {
border-collapse: collapse;
/* 'cellspacing' equivalent */
}
table th {
font: 1.5em Tahoma;
border: 3px solid #0e7079;
border-radius: 6px;
padding: 0em 1em 0em 1em;
}
table td {
font: 1.3em sans-serif;
border-radius: 1px;
border: 0px solid #0e7079;
padding: 0 1em 0 1em;
}
h1 {
font: 2.0em Tahoma, sans-serif;
color: white;
height: 0px;
}
h2 {
font: 1.8em Tahoma, sans-serif;
color: green;
margin-bottom: 10px;
}
ul {
margin-left: 0px;
}
img {
border: none;
}
/* ========================================================================================== */
#page-wrap {
!margin: 10px auto;
display: inline;
}
#inside {
width: 960px;
margin: 0 auto;
background: blue;
min-height:100%;
position:relative;
}
#searchbar {
width: 30%;
background: #747474;
border: 1px solid red;
display: inline-block;
}
#results {
background: #4c4c4c;
min-height: 100px;
width:50%;
display: inline-block;
border-radius: 6px;
border: 1px solid #0e7079;
}
#results b {
font: 2.0em Tahoma, sans-serif;
color: white;
height: 0px;
}
#main-content {
margin-bottom: 10px;
padding:10px;
padding-bottom:30px;
/* Height of the footer */
}
#header {
}
#menu {
}
#left-sidebar {
width: 150px;
float: left;
padding-left: 15px;
padding-top: 20px;
}
#footer {
background: #000000;
text-align: center;
padding-top: 0px;
color: white;
position:absolute;
bottom:0;
width:960px;
height:30px;
/* Height of the footer */
}
/* ========================================================================================== */
.horizontal-nav {
background: #efefef;
border-radius: 6px;
}
.horizontal-nav ul {
background: #ff4505;
float: left;
text-align: center;
border-radius: 6px;
border: 0px solid #0e7079;
margin-left: 0px;
}
.horizontal-nav ul li {
float: left;
border-left: 1px solid #0e7079;
}
.horizontal-nav ul li:first-child {
border-left: 0 none;
}
.horizontal-nav ul li a {
display: block;
padding: 10px 20px;
color: #fff;
border-top: 1px solid rgba(255, 255, 255, 0.25);
border-left: 1px solid rgba(255, 255, 255, 0.25);
text-decoration: none;
}
.horizontal-nav ul li:first-child a {
border-left: 0 none;
}
.horizontal-nav ul li a:hover {
background: #12808a;
}
.horizontal-nav ul li:first-child a {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.horizontal-nav ul li:last-child a {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
http://jsfiddle.net/5b48H/
Thank you!
Either add display:block or vertical-align:top to the img element.
jsFiddle example - display:block
#header img {
display:block;
}
jsFiddle example - vertical-align:top
#header img {
vertical-align:top;
}
Note - The default vertical-align property is baseline. Changing it to top, middle or bottom fixes the issue.
If you can set the image's display style to block that should solve the problem. Setting vertical-align to bottom or middle should also work. I think the problem comes about because Firefox tries to position inline images so their bottom edge is aligned with the baseline of the text, and so there is space below the image for the text descenders. source
header img
{
display: block;
margin: 0;
padding: 0;
}
I believe setting line-height: 1; on the image will also fix this problem, especially if it's in a block by itself.
source
Related
The html elements on this simple to do list app i'm making won't properly align themselves when ran on mobile. Essentially when on mobile, the h1 tag should be in the center of the screen as well as the input box and add button under it and the tasks being added to the page, instead on mobile everything is off alignment. Any fixes?
let task;
let text;
let addTask;
let list;
let taskNo = 0;
let remove;
let input = document.getElementById('message');
let btn = document.getElementById('btn');
input.addEventListener("keypress", function() {
if (event.keyCode == 13) {
if (input.value === "") {
alert("Please enter a task!");
} else {
createTask();
}
}
});
btn.onclick = function() {
if (input.value === "") {
alert("Please enter a task!");
} else {
createTask();
}
};
function createTask() {
task = input.value;
addTask = document.createElement('li');
text = document.createTextNode(task);
addTask.appendChild(text);
addTask.classList.add("task");
taskNo++;
addTask.id = taskNo;
document.getElementById("taskList").appendChild(addTask);
input.value = "";
let list = document.getElementsByClassName("task");
[...list].forEach(b => {
b.addEventListener("click", () => {
remove = document.getElementById(b.id);
remove.parentNode.removeChild(remove);
});
});
}
html, body{
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: #29313d;
color: white;
}
#container {
width: 100%;
}
h1{
text-align: center;
font-size: 44px;
}
#input{
margin: auto;
text-align: center;
}
#message, #btn{
display: inline-block;
height: 100%;
margin-top: 10px;
padding: 0;
float: left;
-webkit-box-sizing: border-box;
}
#message{
background-color: #333;
color: white;
border: 4px solid coral;
padding-left: 10px;
width: 75%;
height: 50px;
border-radius: 10px;
}
#btn{
font-size: 20px;
background-color: coral;
border: 4px solid coral;
color: black;
margin-left: 5%;
width: 20%;
height: 50px;
border-radius: 10px;
}
#btn:focus{
outline: none;
}
#message:focus{
outline: none;
}
#input{
height: 50px;
width: 400px;
}
#taskList{
list-style-type: none;
padding: 0;
margin-top: 50px;
}
.task {
margin: auto;
width: 85%;
margin-top: 5px;
padding: 10px;
border: 4px solid coral;
background-color: #333;
color: white;
border-radius: 10px;
}
#media(max-width: 600px) {
#container {
width: 80%;
}
h1{
margin: auto;
}
#message{
width: 100%;
}
#btn{
display: none;
}
.task{
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=10">
<link href="resources/style.css" rel="stylesheet" type="text/css">
<link href="resources/logo.png" rel="shortcut icon" type="image/png">
<title>Jennis App</title>
</head>
<body>
<div id="container">
<h1>To Do List</h1>
<div id="input">
<div class="input-group">
<input type="text" id="message" placeholder="Please enter a new task">
</div>
<div class="input-group">
<input type="button" id="btn" value="Add">
</div>
</div>
<ul id="taskList">
</ul>
</div>
<script src="resources/code.js" type="text/javascript"></script>
</body>
</html>
you need to make some css changes in media.
Center the container for small device using margin
Remove display: none for #btn in media query
Use flex to align add button for small device
clearfix the .input-group using before and after
let task;
let text;
let addTask;
let list;
let taskNo = 0;
let remove;
let input = document.getElementById('message');
let btn = document.getElementById('btn');
input.addEventListener("keypress", function() {
if (event.keyCode == 13) {
if (input.value === "") {
alert("Please enter a task!");
} else {
createTask();
}
}
});
btn.onclick = function() {
if (input.value === "") {
alert("Please enter a task!");
} else {
createTask();
}
};
function createTask() {
task = input.value;
addTask = document.createElement('li');
text = document.createTextNode(task);
addTask.appendChild(text);
addTask.classList.add("task");
taskNo++;
addTask.id = taskNo;
document.getElementById("taskList").appendChild(addTask);
input.value = "";
let list = document.getElementsByClassName("task");
[...list].forEach(b => {
b.addEventListener("click", () => {
remove = document.getElementById(b.id);
remove.parentNode.removeChild(remove);
});
});
}
html, body{
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: #29313d;
color: white;
}
#container {
width: 100%;
}
h1{
text-align: center;
font-size: 44px;
}
#input{
margin: auto;
text-align: center;
}
#message, #btn{
display: inline-block;
height: 100%;
margin-top: 10px;
padding: 0;
float: left;
-webkit-box-sizing: border-box;
}
#message{
background-color: #333;
color: white;
border: 4px solid coral;
padding-left: 10px;
width: 75%;
height: 50px;
border-radius: 10px;
}
#btn{
font-size: 20px;
background-color: coral;
border: 4px solid coral;
color: black;
margin-left: 5%;
width: 20%;
height: 50px;
border-radius: 10px;
}
#btn:focus{
outline: none;
}
#message:focus{
outline: none;
}
#input{
height: 50px;
width: 400px;
}
#taskList{
list-style-type: none;
padding: 0;
margin-top: 50px;
}
.task {
margin: auto;
width: 85%;
margin-top: 5px;
padding: 10px;
border: 4px solid coral;
background-color: #333;
color: white;
border-radius: 10px;
}
#media(max-width: 600px) {
#container {
width: 80%;
margin: 0 auto; /* to align center */
}
h1{
margin: auto;
}
#message{
width: 100%;
}
#btn{
/* display: none; */
}
.task{
width: 100%;
margin-left: 0;
margin-right: 0;
}
/*** Additional css ***/
.input-group.flex {
display: flex;
justify-content: center;
}
.input-group:before, .input-group:after {
content: "";
display: table;
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=10">
<link href="resources/style.css" rel="stylesheet" type="text/css">
<link href="resources/logo.png" rel="shortcut icon" type="image/png">
<title>Jennis App</title>
</head>
<body>
<div id="container">
<h1>To Do List</h1>
<div id="input">
<div class="input-group">
<input type="text" id="message" placeholder="Please enter a new task">
</div>
<!-- Added one additional class -->
<div class="input-group flex">
<input type="button" id="btn" value="Add">
</div>
</div>
<ul id="taskList">
</ul>
</div>
<script src="resources/code.js" type="text/javascript"></script>
</body>
</html>
working fiddle here
I'm trying to center my webpage with
.wrapper {
display: flex;
align-items: stretch;
background: #fafafa;
/*max-width: 1520px; */
box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
text-align: left;
width: 960px;
margin: 0 auto;
}
From what I understand, the last two lines should center it, but the page is still glued to the left. All the content is inside the wrapper, and I've checked my HTML and CSS code with https://validator.w3.org so I don't think it can be incorrect tags.
Am I missing something?
Full code for the page is here: HTML CSS
Any help is much appreciated!
Replace your .wrapper css with below one
.wrapper {
display: flex;
background: #fafafa;
box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
max-width: 960px;
margin: auto;
position: absolute;
left: 0;
right: 0;
}
Or another solution is set margin: auto; to body
I hope this will help you
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Georgia', serif;
background-image: url("path-to-stripe.png");
max-width: 960px;
/**background: #fafafa; **/
}
p {
font-family: '{Poppins}',
sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 40px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/*
div.wrapper{
display: flex;
align-items: stretch;
max-width : auto ;
position : center;
box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
background: #fafafa;
padding-left: 10px;
padding-right: 10px;
}
*/
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
background: #fafafa;
box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
max-width: 960px;
margin: auto;
position: absolute;
left: 0;
right: 0;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #082e59;
box-shadow: 1px 1px 6px rgba(0, 0, 0, 2.9);
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #082e59;
}
#sidebar ul.components {
padding: 30px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #7192b7;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #082e59;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #082e59 !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MAP STYLES
----------------------------------------------------- */
#container1 {
display: block;
max-width: 1200px;
min-height: 505px;
position: auto;
/* height: 475px; position: center;*/
align-items: stretch;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<!DOCTYPE html>
<html>
<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>NEA SCA Onboarding</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<p style="text-align:center;"><img src="stateheader.png" alt="div" width="100px" align="middle" /></p>
<h3 style="text-align:center;">Onboarding</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
Compare By
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Population</li>
<li>Fertility Rate</li>
<li>Health Expenses (%GDP)</li>
<li>Military Expenses (%GDP)</li>
<li>Education Expenses (%GDP)</li>
</ul>
</li>
<li class="active">
About This Tool
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>View data source</li>
<li>NEA/SCA Home</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="fa fa-align-justify"></i>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Near East Asia (NEA)</li>
<li>South Central Asia (SCA)</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-default">
<h2>Near East Asia Region</h2>
<p>This tool uses data from the CIA World Factbook to compare different countries in your region.</p>
<!-- MAP CODE STARTS HERE -->
<div id="container1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.js"></script>
<script>
// example data from server
var series = [
["DZA", 75],
["EGY", 43],
["IRN", 50],
["IRQ", 88],
["ISR", 21],
["JOR", 43],
["KWT", 21],
["LBN", 19],
["LBY", 60],
["MAR", 4],
["OMN", 44],
["QAT", 44],
["SAU", 44],
["SYR", 44],
["TUN", 44],
["ARE", 44],
["YEM", 38]
];
// Datamaps expect data in format:
// { "USA": { "fillColor": "#42a844", numberOfWhatever: 75},
// "FRA": { "fillColor": "#8dc386", numberOfWhatever: 43 } }
var dataset = {};
// We need to colorize every country based on "numberOfWhatever"
// colors should be uniq for every value.
// For this purpose we create palette(using min/max series-value)
var onlyValues = series.map(function(obj) {
return obj[1];
});
var minValue = Math.min.apply(null, onlyValues),
maxValue = Math.max.apply(null, onlyValues);
// create color palette function
// color can be whatever you wish
var paletteScale = d3.scale.linear()
.domain([minValue, maxValue])
.range(["#EFEFFF", "#02386F"]); // blue color
// fill dataset in appropriate format
series.forEach(function(item) { //
// item example value ["USA", 70]
var iso = item[0],
value = item[1];
dataset[iso] = {
numberOfThings: value,
fillColor: paletteScale(value)
};
});
// render map
var map = new Datamap({
element: document.getElementById('container1'),
projection: 'mercator', // big world map
// countries don't listed in dataset will be painted with this color
fills: {
defaultFill: '#F5F5F5'
},
data: dataset,
setProjection: function(element) {
var projection = d3.geo.equirectangular()
.center([37.4, 25.7])
.rotate([4.4, 0])
.scale(450)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path()
.projection(projection);
return {
path: path,
projection: projection
};
},
geographyConfig: {
borderColor: '#DEDEDE',
highlightBorderWidth: 1,
// don't change color on mouse hover
highlightFillColor: function(geo) {
return geo['fillColor'] || '#F5F5F5';
},
// only change border
highlightBorderColor: '#B7B7B7',
// show desired information in tooltip
popupTemplate: function(geo, data) {
// don't show tooltip if country don't present in dataset
if (!data) {
return;
}
// tooltip content
return ['<div class="hoverinfo">',
'<strong>', geo.properties.name, '</strong>',
'<br>Count: <strong>', data.numberOfThings, '</strong>',
'</div>'
].join('');
}
}
});
map.legend();
</script>
</nav>
</div>
<!--MAP CODE ENDS HERE -->
</div>
<!--close content div-->
<!--<p style="text-align:center;"><img src = "dos_divider.png" alt="div" align = "middle"/><p> -->
</div>
<!--close wrapper div> -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
If I'm understanding correctly, you want your content to be centered. Try this css change by adding margin: auto to the #content div:
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
margin: auto;
}
The problem is that you've set up a fixed max-width of 960px to the body element, which is preventing your wrapper to work. Remove it and it'll be fine.
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?
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;
}
Hy!
I don't know how to center the Nav-Bar please help!
HTML:
<html>
<script src="jquery-1.6.1.min.js"></script>
<script src='jquery.divslideshow-1.2-min.js' type='text/javascript'></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<div id="page-wrap">
<table>
<tr>
<td><img src="images/logo.png"/></td>
<td> <div id="slideshow">
<img src="/images/trompete.jpg" alt="Slideshow Image 1" class="active" />
<img src="/images/floete.jpg" alt="Slideshow Image 1" />
</div></td>
</tr>
</table>
<div class="container">
<ul id="minitabs">
<li>News</li>
<li><a href="#" >Fotos</a></li>
<li>Mitglieder</li>
<li>Jugend</li>
<li>Gästebuch</li>
<li>Intern</li>
</ul>
</div>
<br/>
<div><p>Pellentesque habitant morbi</p>
</div>
</div>
</body>
</head>
</html>
Css:
#page-wrap { position: relative; width: 1024px;
margin: 50px auto; padding: 20px;
background: white; -moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black; -webkit-border-radius:30px;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 10px 56px;
text-decoration: none;
font-weight: bold;
color: #069;
}
#nav li a:hover {
color: #c00;
background-color: #fff; }
p { font: 15px/2 Georgia, Serif; margin: 0 0 30p x 0; text-indent: 5px; }
#slideshow {
position:relative;
height:165px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
height:146px;
width: 650px;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
.container {
padding: 1px;
margin: 40px 0px 40px 0;
background: #fff;
}
#minitabs {
margin: 0;
padding: 0 0 40px 10px;
border-bottom: 1px solid #587DC6;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a:link, #minitabs a:visited {
float: left;
font-size: 40px;
line-height: 10px;
font-weight: bold;
margin: 0 10px 4px 10px;
padding-bottom: 2px;
text-decoration: none;
color: #C6C6C6;
}
#minitabs a.active:link, #minitabs a.active:visited, #minitabs a:hover {
border-bottom: 4px solid #B80028;
padding-bottom: 20px;
background: #fff;
color: #587DC6;
}
To centre your nav you will need to do the following:
CSS:
In #minitabs assign
text-align:center;
In #minitabs a:link, #minitabs a:visited remove or comment out float:left;
That should centre your nav. You will have to adjust some of your styles in your nav to get it to look the same as before but at least it should be a starting point for you.
See live link on JSfiddle: http://jsfiddle.net/AvavN/