So my school is doing this competition, the five best websites win a RaspBerry Pi. I have a dilemma with mine currently. I have looked lost of places but nothing seems to work. Here is a link to some of my code on JSFiddle.
https://jsfiddle.net/kdn1x2hk/
My problem is, I have a DIV for my middle column where all of my info. goes and I'm trying to format it to where I can have an image on the left and text on the left, the only problem with that is I want to have it to where the div its in covers the text completely. If you see where the text goes beyond the grey background, thats what the problem is.
<!DOCTYPE! html>
<html>
<head>
<style>
body,
html {
margin-top: -11px;
margin: 0;
height: 100%;
min-width: 1000px;
background-color: red;
}
.bg {
margin-left: 20%;
width: 60%;
background-color: grey;
border-left: thick solid black;
border-right: thick solid black;
}
.background {
background-image: url("images/background.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
min-height: 100%;
}
.banner {
width: 100%;
border-bottom: thick solid black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
border-bottom: thick solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none!important;
font-family: "Arial Black", Gadget, sans-serif;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #FFD700;
color: black;
}
.header {
font-size: 80pt;
font-family: "Arial Black", Gadget, sans-serif;
color: black;
text-align: center;
min-width: 80pt;
}
.dotted_line {
border-top: 2px dashed black;
width: 70%;
}
.paragraph {
font-size: 15pt;
width: 500px;
margin-left: 0%;
color: black;
}
.sub_header {
text-align: center;
font-size: 50pt;
color: black;
}
.credit {
width: 560;
size: 20pt;
text-align: center;
font-style: italic;
}
.video {
width: 70%;
margin-left: 15%;
border: thick solid black;
}
.credit_link {
text-decoration: none;
}
#image {
width: 45%;
}
#text {
width: 45%;
float: left;
font-size: 15pt;
color: black;
padding-top: 20px;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
.format {
width: 90%;
margin-left: 10%;
}
</style>
</head>
<body>
<div class="background">
<div class="bg">
<img src="https://i.imgur.com/gsceMM5.png" class="banner">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Stats</li>
<li>History</li>
<li>Info</li>
<li>Contact</li>
</ul>
<p class="header"> WELCOME</p>
<hr class="dotted_line" />
<p class="sub_header">What is Bitcoin?</p>
<video class="video" poster="images/thumbnail.jpg" controls>
<source src="videos/info.mp4" type="video/mp4">
</video>
<p class="credit">
(Credit to <a class="credit_link"
href="https://www.youtube.com/user/weusecoins">WeUseCoins</a> on
youtube.com)
</p>
<div class="format">
<img src="https://i.imgur.com/BGsKZms.png" id="image" />
<p id="text">
Bitcoin is a new currency that was created in 2009 by an unknown
person using the alias Satoshi Nakamoto. Transactions are made with no
middle men – meaning, no banks! Bitcoin can be used to book hotels on
Expedia, shop for furniture on Overstock and
buy Xbox games. But much of the hype is about getting rich by
trading it. The price of bitcoin skyrocketed into the thousands in 2017.
</p>
</div>
</div>
</div>
</body>
</html>
My code isn't organized on here for some reason, but I just copied the important stuff, leave out all the organizing and stuff I have to do because ill get to the eventually.
This is fortunately a really easy fix. All you're looking to do is add overflow: hidden to .format, so that the container expands to allow the background to cover all of the text contained within, without any scrollbars:
body,
html {
margin-top: -11px;
margin: 0;
height: 100%;
min-width: 1000px;
background-color: red;
}
.bg {
margin-left: 20%;
width: 60%;
background-color: grey;
border-left: thick solid black;
border-right: thick solid black;
}
.background {
background-image: url("images/background.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
min-height: 100%;
}
.banner {
width: 100%;
border-bottom: thick solid black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
border-bottom: thick solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none!important;
font-family: "Arial Black", Gadget, sans-serif;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #FFD700;
color: black;
}
.header {
font-size: 80pt;
font-family: "Arial Black", Gadget, sans-serif;
color: black;
text-align: center;
min-width: 80pt;
}
.dotted_line {
border-top: 2px dashed black;
width: 70%;
}
.paragraph {
font-size: 15pt;
width: 500px;
margin-left: 0%;
color: black;
}
.sub_header {
text-align: center;
font-size: 50pt;
color: black;
}
.credit {
width: 560;
size: 20pt;
text-align: center;
font-style: italic;
}
.video {
width: 70%;
margin-left: 15%;
border: thick solid black;
}
.credit_link {
text-decoration: none;
}
#image {
width: 45%;
}
#text {
width: 45%;
float: left;
font-size: 15pt;
color: black;
padding-top: 20px;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
.format {
width: 90%;
margin-left: 10%;
overflow: hidden;
}
<!DOCTYPE html>
<body>
<div class="background">
<div class="bg">
<img src="https://i.imgur.com/gsceMM5.png" class="banner">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Stats</li>
<li>History</li>
<li>Info</li>
<li>Contact</li>
</ul>
<p class="header"> WELCOME</p>
<hr class="dotted_line" />
<p class="sub_header">What is Bitcoin?</p>
<video class="video" poster="images/thumbnail.jpg" controls>
<source src="videos/info.mp4" type="video/mp4">
</video>
<p class="credit">
(Credit to <a class="credit_link" href="https://www.youtube.com/user/weusecoins">WeUseCoins</a> on youtube.com)
</p>
<div class="format">
<img src="https://i.imgur.com/BGsKZms.png" id="image" />
<p id="text">
Bitcoin is a new currency that was created in 2009 by an unknown person using the alias Satoshi Nakamoto. Transactions are made with no middle men – meaning, no banks! Bitcoin can be used to book hotels on Expedia, shop for furniture on Overstock and
buy Xbox games. But much of the hype is about getting rich by trading it. The price of bitcoin skyrocketed into the thousands in 2017.
</p>
</div>
</div>
</div>
</body>
I've also created a snippet showcasing this here.
Hope this helps! :)
Related
I would like to know how to align the image next to the text in my code.
Please disregard how messy it is. I was doing a project for school and I didn't know how to fix this issue I'm having.
The project isn't mandatory although it's for a competition to win a raspberry pi that I need for a future project involving bitcoins.
https://jsfiddle.net/kdn1x2hk/3/
<!DOCTYPE! html>
<html>
<head>
<style>
body,
html {
margin-top: -11px;
margin: 0;
height: 100%;
min-width: 1000px;
background-color: red;
}
.bg {
margin-left: 20%;
width: 60%;
background-color: grey;
border-left: thick solid black;
border-right: thick solid black;
}
.background {
background-image: url("images/background.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
min-height: 100%;
}
.banner {
width: 100%;
border-bottom: thick solid black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
border-bottom: thick solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none!important;
font-family: "Arial Black", Gadget, sans-serif;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #FFD700;
color: black;
}
.header {
font-size: 80pt;
font-family: "Arial Black", Gadget, sans-serif;
color: black;
text-align: center;
min-width: 80pt;
}
.dotted_line {
border-top: 2px dashed black;
width: 70%;
}
.paragraph {
font-size: 15pt;
width: 500px;
margin-left: 0%;
color: black;
}
.sub_header {
text-align: center;
font-size: 50pt;
color: black;
}
.credit {
width: 560;
size: 20pt;
text-align: center;
font-style: italic;
}
.video {
width: 70%;
margin-left: 15%;
border: thick solid black;
}
.credit_link {
text-decoration: none;
}
#image {
width: 45%;
}
#text {
width: 45%;
float: left;
font-size: 15pt;
color: black;
padding-top: 20px;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
.format {
width: 90%;
margin-left: 10%;
}
</style>
</head>
<body>
</body>
</html>
Changes:
Moved the #text before the #image inside format class container and used display:flex instead of float:left on your #text container to also provide vertical alignment.
Added align-items:center on format class to vertically align both of its contents i.e text and image.
Updated fiddle : https://jsfiddle.net/sbakj4x0/
body,
html {
margin-top: -11px;
margin: 0;
height: 100%;
min-width: 1000px;
background-color: red;
}
.bg {
margin-left: 20%;
width: 60%;
background-color: grey;
border-left: thick solid black;
border-right: thick solid black;
}
.background {
background-image: url("images/background.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
min-height: 100%;
}
.banner {
width: 100%;
border-bottom: thick solid black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
border-bottom: thick solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none!important;
font-family: "Arial Black", Gadget, sans-serif;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #FFD700;
color: black;
}
.header {
font-size: 80pt;
font-family: "Arial Black", Gadget, sans-serif;
color: black;
text-align: center;
min-width: 80pt;
}
.dotted_line {
border-top: 2px dashed black;
width: 70%;
}
.paragraph {
font-size: 15pt;
width: 500px;
margin-left: 0%;
color: black;
}
.sub_header {
text-align: center;
font-size: 50pt;
color: black;
}
.credit {
width: 560;
size: 20pt;
text-align: center;
font-style: italic;
}
.video {
width: 70%;
margin-left: 15%;
border: thick solid black;
}
.credit_link {
text-decoration: none;
}
#image {
width: 45%;
}
#text {
width: 45%;
font-size: 15pt;
color: black;
padding-top: 20px;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
.format {
width: 90%;
margin-left: 10%;
overflow: hidden;
align-items: center;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<body>
<div class="background">
<div class="bg">
<img src="https://i.imgur.com/gsceMM5.png" class="banner">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Stats</li>
<li>History</li>
<li>Info</li>
<li>Contact</li>
</ul>
<p class="header"> WELCOME</p>
<hr class="dotted_line" />
<p class="sub_header">What is Bitcoin?</p>
<video class="video" poster="images/thumbnail.jpg" controls>
<source src="videos/info.mp4" type="video/mp4">
</video>
<p class="credit">
(Credit to <a class="credit_link" href="https://www.youtube.com/user/weusecoins">WeUseCoins</a> on youtube.com)
</p>
<div class="format">
<p id="text">
Bitcoin is a new currency that was created in 2009 by an unknown person using the alias Satoshi Nakamoto. Transactions are made with no middle men – meaning, no banks! Bitcoin can be used to book hotels on Expedia, shop for furniture on Overstock and
buy Xbox games. But much of the hype is about getting rich by trading it. The price of bitcoin skyrocketed into the thousands in 2017.
</p>
<img src="https://i.imgur.com/BGsKZms.png" id="image" />
</div>
</div>
</div>
</body>
my webpage has all of this extra white spacing after my content. If you would paste my code into your IDE and look that would be great! I have tried a few things like make a div around the whole content of the page and set some padding and margin on the bottom but I just can't get it!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/about.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<title>Halong Bay</title>
</head>
<body>
<nav class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Map</li>
<li>Table</li>
<li>Contact</li>
</ul>
</nav>
<section class="intro">
<div class="inner">
<div class="content">
<h1>About Halong Bay</h1>
<a class="btn" href="#link"> get started </a>
<a class="btn" href="index-bay.html"> Back to Home </a>
</div>
</div>
</section>
<article>
<h1>Halong Bay</h1>
<p id="link">
Ha Long Bay, is in Northeast Vietnam. It is known for its beatiful emerald waters and thousands of towering green limestone islands. It is topped by rainforests, junk boat tours, and sea kayak expeditions. The boat tours takes it visitors past islands named for their shapes, including Stone Dog, and Teapot island. The region is popular for scuba diving, rock climbing, and hiking. It is a really beatiful place to visit and has some most fasinating species of animals that live in this bay.
</p>
</article>
<div id="history">
<h1>History of Ha Long Bay</h1>
<p>
For hundreds of years Halong bay has been an important culture and history of Vietnam. Halong bay also known as Vinh Ha Long, means "Bay of the Descending Dragon". There are approximately 1,969 small islands in this bay. All compromised of differnt sizes and form. These islands have intrigues and amazed locals for hundreds of years. There are over 200 species of fish and over 250 species of mulluks in the water.
</p>
</div>
</body>
</html>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url(http://greenhillholidays.info/files/uploads/2016/04/Vietnam-HD-Wallpapers.jpg);
background-size: cover;
display: table;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
text-align: center;
max-width: 500px;
margin: 0 auto;
}
.content h1 {
font-family: 'Raleway';
color: #f9f3f4;
text-shadow: 0px 0px 300px #000;
font-size: 500%;
}
.btn {
border-radius: 9px;
font-family: 'Raleway';
color: white;
font-size: 135%;
padding: 10px 20px;
border: solid #036AB1;
text-transform: uppercase;
text-decoration: none;
margin-right: 20px;
font-weight: bold;
}
.btn:hover {
color: #fff;
border: solid #fff 3px;
}
p {
font-size: 160%;
line-height: 200%;
margin: 3%;
font-family: 'Raleway';
padding: 200px;
}
nav ul li {
position: relative;
color: red;
font-size: 24px;
display: inline-block;
text-align: right;
margin-right: 40px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 900;
}
nav ul li a {
color: black;
text-decoration: none;
}
nav ul li a:hover {
color: blue;
}
.navbar {
color: black;
text-align: center;
}
a.btn {
font-weight: 950;
}
#link {
position: relative;
bottom: 100px;
}
p:first-letter {
font-size: 200%;
}
article {
padding: 50px;
}
#top1 {
font-size: 30px;
text-align: center;
}
article h1 {
font-size: 40px;
text-align: center;
}
#history h1 {
font-size: 50px;
text-align: center;
position: relative;
bottom: 300px;
}
#history p {
position: relative;
bottom: 500px;
}
I figured out why you had that big empty space, these two things were the problem:
Using bottom w/ padding and relative positioning.
Using 200px padding.
You really shouldn't use that much padding on an element.
Here's what, I'm guessing, it should look like:
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url(http://greenhillholidays.info/files/uploads/2016/04/Vietnam-HD-Wallpapers.jpg);
background-size: cover;
display: table;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
text-align: center;
max-width: 500px;
margin: 0 auto;
}
.content h1 {
font-family: 'Raleway';
color: #f9f3f4;
text-shadow: 0px 0px 300px #000;
font-size: 500%;
}
.btn {
border-radius: 9px;
font-family: 'Raleway';
color: white;
font-size: 135%;
padding: 10px 20px;
border: solid #036AB1;
text-transform: uppercase;
text-decoration: none;
margin-right: 20px;
font-weight: bold;
}
.btn:hover {
color: #fff;
border: solid #fff 3px;
}
p {
font-size: 160%;
line-height: 200%;
margin: 3%;
font-family: 'Raleway';
padding: 20px 200px;
}
nav ul li {
position: relative;
color: red;
font-size: 24px;
display: inline-block;
text-align: right;
margin-right: 40px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 900;
}
nav ul li a {
color: black;
text-decoration: none;
}
nav ul li a:hover {
color: blue;
}
.navbar {
color: black;
text-align: center;
}
a.btn {
font-weight: 950;
}
#link {
position: relative;
}
p:first-letter {
font-size: 200%;
}
article {
padding: 50px;
}
#top1 {
font-size: 30px;
text-align: center;
}
article h1 {
font-size: 40px;
text-align: center;
}
#history h1 {
font-size: 50px;
text-align: center;
position: relative;
}
#history p {
position: relative;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/about.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<title>Halong Bay</title>
</head>
<body>
<nav class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Map</li>
<li>Table</li>
<li>Contact</li>
</ul>
</nav>
<section class="intro">
<div class="inner">
<div class="content">
<h1>About Halong Bay</h1>
<a class="btn" href="#link"> get started </a>
<a class="btn" href="index-bay.html"> Back to Home </a>
</div>
</div>
</section>
<article>
<h1>Halong Bay</h1>
<p id="link">
Ha Long Bay, is in Northeast Vietnam. It is known for its beatiful emerald waters and thousands of towering green limestone islands. It is topped by rainforests, junk boat tours, and sea kayak expeditions. The boat tours takes it visitors past islands
named for their shapes, including Stone Dog, and Teapot island. The region is popular for scuba diving, rock climbing, and hiking. It is a really beatiful place to visit and has some most fasinating species of animals that live in this bay.
</p>
</article>
<div id="history">
<h1>History of Ha Long Bay</h1>
<p>
For hundreds of years Halong bay has been an important culture and history of Vietnam. Halong bay also known as Vinh Ha Long, means "Bay of the Descending Dragon". There are approximately 1,969 small islands in this bay. All compromised of differnt sizes
and form. These islands have intrigues and amazed locals for hundreds of years. There are over 200 species of fish and over 250 species of mulluks in the water.
</p>
</div>
</body>
</html>
When I have checked your code in my system, I have noticed that the issue is coming because of padding and margin settings in your CSS.
I have made few changes in your CSS. try it and still having any issue let me know.
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url(http://greenhillholidays.info/files/uploads/2016/04/Vietnam-HD-Wallpapers.jpg);
background-size: cover;
display: table;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
text-align: center;
max-width: 500px;
margin: 0 auto;
}
.content h1 {
font-family: 'Raleway';
color: #f9f3f4;
text-shadow: 0px 0px 300px #000;
font-size: 500%;
}
.btn {
border-radius: 9px;
font-family: 'Raleway';
color: white;
font-size: 135%;
padding: 10px 20px;
border: solid #036AB1;
text-transform: uppercase;
text-decoration: none;
margin-right: 20px;
font-weight: bold;
}
.btn:hover {
color: #fff;
border: solid #fff 3px;
}
p {
font-size: 160%;
line-height: 200%;
margin: 3%;
font-family: 'Raleway';
padding: 200px;
}
nav ul li {
position: relative;
color: red;
font-size: 24px;
display: inline-block;
text-align: right;
margin-right: 40px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 900;
}
nav ul li a {
color: black;
text-decoration: none;
}
nav ul li a:hover {
color: blue;
}
.navbar {
color: black;
text-align: center;
}
a.btn {
font-weight: 950;
}
#link {
position: relative;
bottom: 100px;
padding-bottom:0px;
margin-bottom:0px;
margin-top: 0;
padding-top: 100px;
}
p:first-letter {
font-size: 200%;
}
article {
padding-top: 50px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 0px;
}
#top1 {
font-size: 30px;
text-align: center;
}
article h1 {
font-size: 40px;
text-align: center;
}
#history h1 {
font-size: 50px;
text-align: center;
position: relative;
}
#history p {
position: relative;
padding-bottom: 0px;
padding-top: 0px;
margin-bottom: 0;
margin-top: 0;
}
So my website shows the images in google chrome but not in firefox! Anyone who can help? It only shows the background image in firefox! I've tried many things but nothing works for me. Anyone who can help :D
website: http://z16-zacho.it.slotshaven.dk/html/index.html
body {
background-color: transparent;
color:saddleBrown;
font-family:Verdana, Geneva, sans-serif;
margin:0px 0px 0px 0px;
}
h1, h2 {
color: black;
text-align: center;
}
h1 {
text-align: center;
border-style: solid;
border-color: rgb(176, 184, 196);
border-radius: 100px;
display: table;
margin: 0 auto;
margin-bottom: 20px;
padding: 6px;
background-color: white;
opacity: 0.9;
}
h3 {
text-align: center;
color: black;
font-size: 24px;
}
p {
text-align: center;
border-style: solid;
border-color: rgb(176, 184, 196);
display: table;
margin: 0 auto;
margin-top: 20px;
padding: 6px;
background-color: white;
opacity: 0.9;
color: black;
font-size: 24px;
font-weight: bold;
}
span {
color: rgb(16, 140, 206);
}
ul {
list-style-type: none;
margin-top: -3px;
padding: 0px;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
#boks1 {
max-width: 48%;
width: auto;
padding: 0.5%;
border: 1px;
border-style: solid;
border-color: purple;
float: left;
background-color: white;
overflow: hidden;
}
#boks2 {
max-width: 48%;
width: auto;
padding: 0.5%;
border: 1px;
border-style: solid;
border-color: purple;
float: right;
background-color: white;
overflow: hidden;
}
#background {
background-image: url(../billeder/background.jpg);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img-me {
content: url(../billeder/billede_af_mig.jpg);
width: 300px;
height: 300px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
float: center;
margin: 0 auto;
display: table;
}
#head {
content: url(../billeder/head.png);
margin-bottom: 3px;
background-color: rgb(238, 242, 254);
height: 0 auto;
max-width: 100%;
float: center;
margin: 0 auto;
display: table;
}
#facebook {
content: url(../billeder/fb.png);
width: 16px;
}
#instagram {
content: url(../billeder/instagram.png);
width: 16px;
}
#twitter {
content: url(../billeder/twitter.png);
width: 20px;
}
#snapchat {
content: url(../billeder/snap.png);
width: 16px;
}
#normalP {
font-size: 16;
font-weight: normal;
text-align: left;
border-style: none;
display: table;
margin: 0 auto;
margin-top: 20px;
padding: 0px;
opacity: 1;
color: black;
}
HTML
<!DOCTYPE html>
<html>
<head>
<link href="../css/frontpageStyle.css" type="text/css" rel="stylesheet">
<meta charset="utf-8">
<title>Zacool site</title>
</head>
<body>
<body id="background"></body>
<header>
<a href=" (link here was url shortened so i removed it) " target="_blank">
<div id="head"></div>
</a>
<ul>
<li><a class="active" href="index.html">Forside</a></li>
<li>Min valgfrie ting</li>
<li>Kronik</li>
<li><a id="facebook" href="https://www.facebook.com/tobias.zacho" target="_blank"></a></li>
<li><a id="instagram" href="https://www.instagram.com/tobiaszacho99/" target="_blank"></a></li>
<li><a id="twitter" href="https://twitter.com/Tobi1790?lang=da" target="_blank"></a></li>
<li><a id="snapchat" href="snap.html" target="_blank"></a></li>
<li>Slotshaven</li>
</ul>
</header>
<h1>Velkommen! Denne side er kodet af <span id="header-shadow">Tobias Zacho</span></h1>
<div id="img-me"></div>
<p>↓ <span>Scroll ned for mere info</span> ↓</p>
<body>
<div id="background"></div>
<div style="height:0px;background-color:transparent;"><!-- Lavet så man får scrolling effekten! --></div>
</body>
<div id="boks1">
<h3>
Hvem er jeg?
</h3>
<p id="normalP">
Test
</p>
</div>
<div id="boks2">
<h3>
Overskrift
</h3>
<p id="normalP">
Test
</p>
</div>
</body>
</html>
Try changing #head on your CSS:
#head {
background-image: url(../billeder/head.png);
background-color: rgb(238, 242, 254);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 15vh; /* 15% of the screen's height */
}
The way you set it, it doesn't have a defined height, and different browsers interpret that in different ways.
Also, a thing to note: on small width screens, that header image looks quite small. Try cutting a bit of that whitespace on the .png to give it some space!
And lastly, this is one solution to it. If you're ever unsatisfied, there surely are other ways to accomplish what you're looking for!
I am trying to get an image, some text, and a form that are in a container div to be centered instead of left justified, but when I try to float the image it just goes right or left and the text gets all screwed up.
.header, .navBar, .pageTitle {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
font-size: 20px;
background-color: #006464;
}
footer {
background-color: #bfd8d8;
position: absolute;
bottom: 0px;
width: 100%;
font-size: 15px;
border: 1px solid black;
}
nav, h1, h2 {
font-family: arial, sans-serif;
}
nav a:hover {
background-color: #006400;
}
nav a {
color: white;
text-decoration: none;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100vh;
position: relative;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.currentNav {
background-color: #006400;
}
.emailStyle {
font-weight: bolder;
}
.footerSpacer {
height: 50px;
}
.header {
color: white;
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: white;
}
.navBar {
background-color: #228B22;
padding: 10px;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
background-color: #bfd8d8;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: georgia, serif;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 50%;
max-width: 50%;
}
.table {
background: #006464;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: #bfd8d8;
border: 1px solid black;
padding: 8px;
}
<!DOCTYPE html>
<! Must have tables, forms, multimedia, and links >
<head>
<title>Home - The Singular Effect</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav class="navBar"> <a class="currentNav" href="index.html">Home</a> Music Photos Poetry About </nav>
<h2 class="pageTitle"> Get the Full Effect! </h2>
<img class="resizeHome" src="image/homepage.jpg" alt="Image of Daniel Adams">
<h3 id="welcomeFont"> Welcome to the home of The Singular Effect! </h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span> <br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
<div class="footerSpacer"> </div>
<footer> © 2016, Chris Hughes - SNHU. Contact me at <span class="emailStyle">christopher.hughes1#snhu.edu</span> </footer>
</div>
</body>
Add this to your CSS:
#container {
text-align: center;
}
And if you don't want all your content centered in this way, just wrap the content you do and give the container a text-align: center.
add text-align:center in your body tag. Try it.
body {
text-align:center;
margin: 0px;
padding: 0px;
font-size: 20px;
background-color: #006464;
}
So I know that there are other results here that are for this question, however I have a relatively "finished" code which I don't want to mess with too much if I can avoid it.
Basically I have everything on my website looking just the way I want it to, except that on larger displays the footer doesn't stick to the bottom of the screen, and there is this big ugly gap between my footer and the bottom of the screen.
Below are my index and css files. The footer element has been jostled around between the end tags, to no effect. I had it outside of my main body of content and tried bottom: 0; with position: absolute; and it just caused the right end of the footer to shoot off outside of the width I specified in my container.
.header,
.navBar,
.pageTitle {
margin: 0px;
padding: 0px;
}
body {
font-size: 20px;
background-color: #006464;
}
html,
body,
#container {
min-height: 100vh;
}
footer {
background-color: #006400;
}
nav,
h1,
h2 {
font-family: arial;
}
nav a:hover {
background-color: white;
color: black;
}
nav a {
color: white;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100%;
}
#navBar {
background-color: #228B22;
padding: 10px;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.header {
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: black;
}
.table {
background: #006400;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: white;
border: 1px solid black;
padding: 8px;
opacity: .75;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 40%;
max-width: 40%;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: arial;
}
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav id="navBar">
Home
Music
Photos
Poetry
About
</nav>
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<img class="resizeHome" src="image/homepage.jpg" alt="home page image">
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span>
<br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
</div>
<footer>
© 2016, Chris Hughes - SNHU
</footer>
</body>
You could try using css-tables. I tested it and seems to work as requested. The footer also expands if you add content to it.
Under body add
margin:auto;
display:table;
and under footer
display:table-row;
position:fixed;
width:1000px;
bottom: 0;
Also in this case you should probably remove the margin from the #container as it is defined in the body already.
Where I learned the trick: http://colintoh.com/blog/display-table-anti-hero#sticky-footer
I added 1 more div to target all the body content except footer so I can set the height for that element. Here are code that works:
<!DOCTYPE html>
<! Must have tables, forms, multimedia, and links >
<head>
<title>Home - The Singular Effect</title>
<link rel="stylesheet" href="css/style.css">`enter code here`
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 20px;
background-color: #006464;
}
html, body, #container {
height: 100%;
margin: 0;
}
footer {
margin-top: 50px;
background-color: #006400;
margin-bottom: 0px;
bottom: 0;
}
nav, h1, h2 {
font-family: arial;
}
nav a:hover {
background-color: white;
color: black;
}
nav a {
color: white;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100%;
}
#navBar {
background-color: #228B22;
padding: 10px;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.header {
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: black;
}
.table {
background: #006400;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: white;
border: 1px solid black;
padding: 8px;
opacity: .75;
}
.resizeAbout{
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome{
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos{
max-height: 40%;
max-width: 40%;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: arial;
}
.bodyContetExceptFooter{
padding: 20px;
min-height: 90%;
margin: 0 auto -50px;
}
</style>
</head>
<body>
<div id="container">
<div class="bodyContetExceptFooter">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<div id="navBar">
<nav>
Home
Music
Photos
Poetry
About
</nav>
</div>
<div id="divContent">
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<img class="resizeHome" src="image/homepage.jpg" alt="home page image">
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3> <br>
<form>
<span id="signUp">Sign up for our newsletter!</span> <br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
</div>
</div>
<footer>
© 2016, Chris Hughes - SNHU
</footer>
</div>
</body>
</html>
Use relative positioning on body, absolute positioning on footer and position it to left: 0; bottom 0;, also add width: 100%; to footer to fill full width of body.
One last thing is to add padding-bottom: 23px; to body to avoid footer hiding content when the height of browser is less than your content.
.header,
.navBar,
.pageTitle {
margin: 0px;
padding: 0px;
}
body {
font-size: 20px;
background-color: #006464;
position: relative; /* added */
padding-bottom: 23px; /* added, where 23px is the height of the footer */
}
html,
body,
#container {
min-height: 100vh;
}
footer {
background-color: #006400;
position: absolute; /* added */
bottom: 0; /* added */
left: 0; /* added */
width: 100%; /* added */
}
nav,
h1,
h2 {
font-family: arial;
}
nav a:hover {
background-color: white;
color: black;
}
nav a {
color: white;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100%;
}
#navBar {
background-color: #228B22;
padding: 10px;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.header {
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: black;
}
.table {
background: #006400;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: white;
border: 1px solid black;
padding: 8px;
opacity: .75;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 40%;
max-width: 40%;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: arial;
}
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav id="navBar">
Home
Music
Photos
Poetry
About
</nav>
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<img class="resizeHome" src="image/homepage.jpg" alt="home page image">
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span>
<br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
</div>
<footer>
© 2016, Chris Hughes - SNHU
</footer>
</body>
.header,
.navBar,
.pageTitle {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
font-size: 20px;
background-color: #006464;
}
html,
body,
#container {
min-height: 100vh;
}
footer {
background-color: #006400;
position: absolute;
bottom: 0px;
width: 100%;
}
nav,
h1,
h2 {
font-family: arial;
}
nav a:hover {
background-color: white;
color: black;
}
nav a {
color: white;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100vh;
position: relative;
}
#navBar {
background-color: #228B22;
padding: 10px;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.header {
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: black;
}
.table {
background: #006400;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: white;
border: 1px solid black;
padding: 8px;
opacity: .75;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 40%;
max-width: 40%;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: arial;
}
<!DOCTYPE html>
<head>
<title>Home - The Singular Effect</title>
</head>
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" hreF="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav id="navBar">
Home
Music
Photos
Poetry
About
</nav>
<h2 class="pageTitle">
Get the Full Effect!
</h2>
<img class="resizeHome" src="image/homepage.jpg" alt="home page image">
<h3 id="welcomeFont">
Welcome to the home of The Singular Effect!
</h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span>
<br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
<footer>
© 2016, Chris Hughes - SNHU
</footer>
</div>
</body>