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;
}
Related
Looked up hover effects on navigation bars on YouTube and copied the code but when I try to click the elements on the navigation bar, it won't work. The cursor also doesn't change. It looks and operates just like another text.
This is the video I used: https://www.youtube.com/watch?v=1wfeqDyMUx4
Is there something wrong with my code?
#import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Work+Sans:wght#400;500;700&display=swap');* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Work Sans', sans-serif;
}
body {
min-height: 100vh;
background: linear-gradient(#98c9cd 3%, #e6c3c1 60%, #e4989e 100% )
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: white;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: white;
border-radius: 20px;
}
header ul li a:hover,
header ul li a.active {
background: white;
color: #2b1055;
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}
section::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top,#e4989e,transparent);
z-index: 1290;
}
#text {
font-family: 'Fjalla One', sans-serif;
mix-blend-mode: screen;
position: absolute;
color: white;
white-space: nowrap;
text-align: center;
font-size: 7.5.vw;
font-size: 4em;
z-index: 9;
}
#btn {
text-decoration: none;
display: inline-block;
padding: 8px 30px;
border-radius: 40px;
background: white;
color: #2b1055;
font-size: 1.5em;
transform: translateY(100px);
}
.sec {
position: relative;
padding: 100px;
background: #e4989e;
}
.sec h2 {
font-size: 2em;
margin-bottom: 10px;
color: white;
font-weight: 700;
}
p #text1 {
color: #fff;
font-weight: 400;
font-size: 1.5em;
}
<!doctype HTML>
<html>
<head>
<title>Comfort Crate</title>
<link rel="stylesheet" type="text/css" href="styles1.css">
</head>
<body>
<header>
<img src="finallogo.png" width="10%" height="18%" style="margin-top: 20px;">
<ul>
<li>Home</li>
<li>About</li>
<li>Creations</li>
<li>Contact</li>
</ul>
</header>
<section>
<h2 id="text">WELCOME TO COMFORT CRATE!</h2>
Click Here
</section>
<div class="sec">
<h2>About us</h2>
<p id="text1" style="color: white;"">Comfort Crate is a start-up company founded in 2022 by seven students from 12-Dubins of Pasig City Science High School. The notion of entrepreneurs and consumers as mutual benefactors inspired the team to come up with potential products that will make self-care worth spending, guilt-free. Driven by the desire to uplift people’s spirits amidst adversities, each set from Comfort Crate was curated for all people in all situations. The group believes that money cannot buy happiness, but it can buy you a crate that can help you stir up your own happiness.
<br><br></p>
</div>
</body>
</html>
It's because section tag fills the whole page and the header stucks under it. So your mouse always hovers on section. You can see that by adding z-index: 9999; to header.
when using position: absolute, your header element will share the space with its other siblings like normally it would. I would suggest that you add margin top to the section element to that it would get out of the way of the header.
#import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Work+Sans:wght#400;500;700&display=swap');* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Work Sans', sans-serif;
}
body {
min-height: 100vh;
background: linear-gradient(#98c9cd 3%, #e6c3c1 60%, #e4989e 100% )
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: white;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: white;
border-radius: 20px;
}
header ul li a:hover,
header ul li a.active {
background: white;
color: #2b1055;
}
section {
margin-top: 100px;
position: relative;
width: 100%;
height: 100vh;
padding: 50px 100px 100px;
display: flex;
justify-content: center;
align-items: center;
}
section::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top,#e4989e,transparent);
z-index: 1290;
}
#text {
font-family: 'Fjalla One', sans-serif;
mix-blend-mode: screen;
position: absolute;
color: white;
white-space: nowrap;
text-align: center;
font-size: 7.5.vw;
font-size: 4em;
z-index: 9;
}
#btn {
text-decoration: none;
display: inline-block;
padding: 8px 30px;
border-radius: 40px;
background: white;
color: #2b1055;
font-size: 1.5em;
transform: translateY(100px);
}
.sec {
position: relative;
padding: 100px;
background: #e4989e;
}
.sec h2 {
font-size: 2em;
margin-bottom: 10px;
color: white;
font-weight: 700;
}
p #text1 {
color: #fff;
font-weight: 400;
font-size: 1.5em;
}
<!doctype HTML>
<html>
<head>
<title>Comfort Crate</title>
<link rel="stylesheet" type="text/css" href="styles1.css">
</head>
<body>
<header>
<img src="finallogo.png" width="10%" height="18%" style="margin-top: 20px;">
<ul>
<li>Home</li>
<li>About</li>
<li>Creations</li>
<li>Contact</li>
</ul>
</header>
<section>
<h2 id="text">WELCOME TO COMFORT CRATE!</h2>
Click Here
</section>
<div class="sec">
<h2>About us</h2>
<p id="text1" style="color: white;"">Comfort Crate is a start-up company founded in 2022 by seven students from 12-Dubins of Pasig City Science High School. The notion of entrepreneurs and consumers as mutual benefactors inspired the team to come up with potential products that will make self-care worth spending, guilt-free. Driven by the desire to uplift people’s spirits amidst adversities, each set from Comfort Crate was curated for all people in all situations. The group believes that money cannot buy happiness, but it can buy you a crate that can help you stir up your own happiness.
<br><br></p>
</div>
</body>
</html>
I've tried having it be an unordered list item without it being a paragraph element, I've tried putting it in a div as well. For some reason I'm just unable to get those to be stacked with the smaller "test" under the bigger TestTest. Seems to work in the rest of the page if I have it as a separate div, just not sure of the reason why it's not working in the footer.
Here is my HTML and CSS:
body {
background-color: #414141;
/* background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden; */
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 0px;
font-family: Arial;
}
#font-face {
font-family: ubuntu-medium;
src: url(/fonts/ubuntu-medium.ttf);
}
#media (max-width: 7680px) {
body {
background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden;
}
}
#media (max-width: 800px) {
body {
background: url(/images/mobilebackground.jpg) no-repeat center center fixed;
}
}
#NavSection {
margin-top: 3%;
}
#MainNav {
position: left;
margin-left: 11%;
}
#Menu li {
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#Menu a:hover {
text-decoration-color: #414141;
text-underline-offset: 0.12em;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 4px;
box-shadow: 0px 13px 4px -3px rgba(65, 65, 65, 0.616);
}
hr {
margin: 0px;
border: 2px solid red;
width: auto;
}
a {
color: #414141;
text-decoration: none;
}
a:active {
color: #ff0000;
}
#SiteTitle {
margin-left: 0.5%;
}
#TestTest {
font-family: Impact;
font-weight: normal;
font-size: 30px;
color: #ffffff;
text-decoration: underline;
text-decoration-color: #414141;
text-decoration-thickness: 2px;
text-underline-offset: 0.08em;
}
#Japan {
color: red;
}
ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
#SecondNav {
float: right;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
font-size: 15px;
margin-right: 11%;
}
#SecondMenu a:hover {
text-decoration: overline 4px solid #414141;
box-shadow: 0px -13px 4px -3px rgba(65, 65, 65, 0.616);
}
#SecondMenu li {
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#ContentDiv {
width: 70%;
height: 40%;
position: absolute;
top: 30%;
left: 15%;
transform: translateX(0%);
background-color: rgba(255, 0, 0, 0.4);
}
#ContentSection {
width: 90%;
height: 70%;
position: absolute;
top: 15%;
left: 5%;
background-color: rgba(255, 255, 255, 0.9);
}
#Content {
margin: 3%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 7%;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
}
#FooterTitle {
float: right;
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
float: right;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div id="NavSection">
<div id="TopNav">
<nav id="MainNav">
<ul id="Menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<hr />
<div id="SecondNavSection">
<nav id="SecondNav">
<ul id="SecondMenu">
<li>Archives</li>
<li>Categories</li>
</ul>
</nav>
</div>
<div id="SiteTitle">
<h1 id="TestTest">Test<span id="Japan">Test</span></h1>
</div>
</div>
<div id="ContentDiv">
<main id="ContentSection">
<div id="Content">
<p>Content goes here.</p>
</div>
</main>
</div>
<footer>
<p id="FooterTitle">Test <span id="FooterJapan">Test</span></p>
<p id="FooterCaption">Test</p>
</footer>
</body>
</html>
You should not be using float for FooterTitle and FooterCaption -- So remove the float:right;
Then you can add text-align:right; to the <footer> CSS
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 7%;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
text-align:right;
}
#FooterTitle {
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
The rest .. Like height and getting everything to show in the footer I trust you can do :) -- Personally, I think height:7%; is a bad idea .. Better to give it a static height height, or a height that statically will change inside media queries. --
OR You could scrap the text align right to get it to align left but still float right like:
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
}
#FooterTitle {
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
#footer-right-content{
float:right;
text-align:left;
width:100px;
}
HTML
<footer>
<div id="footer-right-content">
<p id="FooterTitle">Test <span id="FooterJapan">Test</span></p>
<p id="FooterCaption">Test</p>
</div>
</footer>
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;
}
I am trying to teach myself web-design and am just starting to get the hang of the basics. I just finished the content of my practice web site for an imaginary restaurant, and was feeling pretty proud of it because it works perfectly in google chrome, but when I checked how it looked in IE and firefox it seems that the CSS styling isn't registering at all.
Here is the code for the home page. The site contains images and links to other pages as well, but my real concern is just getting the CSS to apply correctly across all browsers.
/* Created on : Mar 23, 2015, 3:16:56 PM
Author : Dan
*/
*{
margin:0;
padding: 0;
}
header, nav, aside, article, footer, section {
display: block;
}
figure{
position: relative;
vertical-align: middle;
}
figcaption{
position: absolute;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 20%;
padding: .5%;
font-family: 'Smokum', Georgia, Serif;
color: #952706;
font-size: 6em;
text-shadow: 2px 2px black;
}
body{
text-align: center;
background-image: url("Frontier_images/wood084.jpg");
}
body article{
text-align: left;
}
header{
display: inline-block;
overflow:hidden;
margin:0 auto;
border:none;
max-height: 99%;
max-width: 99%;
background-color: rgba(250,240,230,.0);
}
nav{
margin:0 auto;
height: 100%;
min-height: 20px;
background-color: burlywood;
border:solid 2px #4c2e16;
border-radius: 20px;
padding: 1%;
}
nav a{
display: block;
margin:0 auto;
height: auto;
width: 14.28%;
float: left;
text-decoration: none;
outline: none;
text-align: center;
font-family: 'Bitter', serif;
font-size: 1.3em;
font-weight: bold;
color: darkred;
}
nav a:hover{
text-decoration: none;
font-family: 'Bitter', serif;
font-style: italic;
font-weight:bold;
color: firebrick;
}
#mininav{
bottom: 0;
left: 0;
position: fixed;
margin:0 auto;
height:2%;
width: 40%;
background-color: firebrick;
padding: 1%;
}
#mininav a{
display: block;
margin:0 auto;
height: auto;
width: 19%;
float: left;
text-decoration: none;
outline: none;
text-align: center;
font-family: sans-serif;
font-size: .75em;
color: white;
font-weight: bold;
}
article a{
outline: none;
font-family: 'Bitter', Georgia, Serif;
font-size: 1.1em;
color: darkred;
}
article a:hover{
font-style: italic;
outline: none;
font-family: 'Bitter', Georgia, Serif;
font-size: 1.1em;
color: firebrick;
}
article a:visited{
outline: none;
font-family: 'Bitter', Georgia, Serif;
font-size: 1.1em;
color: purple;
}
div * p {
text-indent: 5%;
}
#wrapper{
width: 80%;
margin:0 auto;
background-color: firebrick;
color: burlywood;
box-shadow:-8px 8px 10px -1px black;
padding: 2%;
overflow: hidden;
}
#spillwrapper{
width: 80%;
margin:0 auto;
background-color: firebrick;
color: burlywood;
box-shadow:-8px 8px 10px -1px black;
padding: 2%;
overflow: visible;
}
h1{
font-size: 3em;
font-family: 'Smokum', Georgia, Serif;
text-decoration: none;
margin-bottom: .5em;
margin-top: .5em;
}
a h1{
font-size: 3em;
text-decoration: none;
color: black;
font-family: 'Smokum', Georgia, Serif;
margin-bottom: 0;
}
.menudrop{
list-style-type: none;
padding: 0;
margin-top: 1em;
}
.menudropitem{
padding: 0 1%;
width: 150%;
background-color: rgba( 178,34,34,.7);
font-size: 3em;
text-decoration: none;
color: black;
font-family: 'Smokum', Georgia, Serif;
}
ul{
list-style-position: inside;
}
hr{
color: firebrick;
margin-top:2em;
margin-bottom: 2em;
border-top: dotted 1px;
}
.column1{
display: block;
position: relative;
padding: 1.5%;
z-axis: 2;
background-color: rgba(250,240,230, .7);
color: black;
font-size: 1.1em;
width: 60%;
float: left;
margin-top: 2%;
border-radius: 10px;
}
.column2{
display: block;
position: relative;
padding: 1.5%;
z-axis: 2;
background-color: rgba(250,240,230,.7);
color: black;
font-size: 1.2em;
width: 33%;
margin-top: 2%;
float: right;
border-radius: 10px;
}
.center{
display: block;
position: relative;
padding: 1.5%;
z-axis: 2;
background-color: rgba(250,240,230, .7);
color: black;
font-size: 1em;
font-family: georgia, serif, arial;
width: 60%;
margin: 0 auto;
margin-top: 2%;
border-radius: 10px;
}
footer{
margin: 0 auto;
padding: .5em;
font-weight: bold;
background: white;
background: rgba(255,255,255,.2);
color: darkred;
font-family: sans-serif;
font-size: .8em;
font-style: italic;
height: 100%;
width: 50%;
border-radius: 10px;
text-align: center;
}
table.thumbs{
margin-left: auto;
margin-right: auto;
}
table.thumbs td{
position: relative;
padding: 0 2px;
}
table.thumbs img.small{
width: 100px;
height:100px;
}
/* Large images in left two columns */
table.thumbs img.left {
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
visibility: hidden;
}
/* Large images in right two columns */
table.thumbs img.right {
position: absolute;
top: 50%;
right: 50%;
z-index: 10;
visibility: hidden;
}
/* Hover on any table cell */
table.thumbs td:hover img.left,
table.thumbs td:hover img.right,
table.thumbs td:hover img.bottomright,
table.thumbs td:hover img.bottomleft{
visibility: visible;
}
#imgleft{
width: 100%;
height: 33%;
margin-bottom: 6px;
}
#imgleft img{
margin-right: 6px;
}
#imgleft p{
text-indent: 5%;
margin-right: 45%;
}
#imgright{
width: 100%;
height: 33%;
float: right;
text-align: right;
margin-bottom: 6px;
}
#imgright img{
margin-left: 6px;
}
#imgright p{
text-indent: 5%;
margin-left: 50%;
}
#imgleft2{
width: 100%;
height: 33%;
margin-bottom: 6px;
float: left;
}
#imgleft2 img{
margin-right: 6px;
}
#imgleft2 p{
text-indent: 5%;
margin-right: 45%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Frontier</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="frontierstyle.css" rel="stylesheet" type="css/text">
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Smokum' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<figure>
<img src="Frontier_images/eggskillet.jpg" alt="Egg Skillet">
<figcaption>Frontier</figcaption>
</figure>
</header>
<nav>
Menu
Events
Gallery
Our Family
FAQ
Contact Us
Directions
</nav>
<div id="wrapper">
<article>
<h1>
Hours:
</h1>
<h2>
Mon- Closed<br>
Tues thru Sat- 6am until 1pm<br>
Sun- 8am until 3pm
</h2>
</article>
<section class=column1>
<h1>
Frontier's Concept
</h1>
<p>
Frontier is the first franchise developed by former President of the U.S. Theodore Roosevelt.
Teddy, as he is known to his friends and family, always had a dream of creating
a breakfast house that captured the look and feel of a specific time and place that was
very dear to him.</p>
<p>
Frontier is the realization of that dream. Tucked away in the heart of the pocono mountains,
our establishment seeks to give our guests not only a delicious breakfast, but a completely immersive
experience as well.</p>
<br>
<img src=Frontier_images/cabinflag.jpg>
</p>
</section>
<section class=column2>
<h1>
Accolades
</h1>
<p>
"Killer food, great atmosphere and the friendliest chef."
~City Weekly
</p><br>
<p>
"This might be the quintessential Northern PA restaurant.
The antique log cabin radiates mountain hospitality and the beauty and
bounty of the Poconos are apparent on each plate."
~Happenings Magazine
</p><br>
<p>
"10 Best Restaurants in PA: Local Food and Fine Dining"
~The Culture Trip
</p><br>
</section>
</div>
<footer>
<p>
Frontier Restaurant. All Rights Reserved.
</p>
</footer>
</body>
</html>
I want to sharpen my HTML & CSS skills by recreating the Bootstrap homepage in pure HTML & CSS. I am almost finished, but I seem to be having trouble with my footer. Everything else is positioned the way I would like it, but everything on the footer shoots up to the top and middle of my page. Can anyone tell me what I am missing here?
HTML
<header>
<div class="top-bar">
<p>Aww yeah, Bootstrap 4 is coming!</p>
</div>
<nav>
<div class="nav-bar">
<div class="logo">
Bootstrap
</div>
<div class="left-nav">
<ul>
<li>Getting Started</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
<li>Customize</li>
</ul>
</div>
<div class="right-nav">
<ul>
<li>Themes</li>
<li>Expo</li>
<li>Blog</li>
</ul>
</div>
</div>
<nav>
</header>
</div>
<center>
<main>
<section>
<div class="head-component">
<div class="b-logo">
<p>B</p>
</div>
<div class="short-description">
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
</div>
<div class="download-button">
<button class="dwn">Download Bootstrap</button>
</div>
<div class="current">
<p>Currently v3.3.5</p>
</div>
</div>
</section>
<section>
<div class="mid-section">
<div class="mid-info">
<h2>Designed for everyone, everywhere.</h2>
<p>Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
</div>
<hr class="hz-line" />
<div class="column-left">
<img src="http://getbootstrap.com/assets/img/sass-less.png" />
<h4>Preprocessors</h4>
<p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source.</p>
</div>
<div class="column-middle">
<img src="http://getbootstrap.com/assets/img/devices.png" />
<h4>One framework, every device.</h4>
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
</div>
<div class="column-right">
<img src="http://getbootstrap.com/assets/img/components.png" />
<h4>Full of features</h4>
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
</div>
<div class="clear"></div>
<hr class="hz-line" />
<div class="github">
<p>Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p>
</div>
<div class="github-button">
<button class="view-git">View the Github Project</button>
</div>
<div class="clear"></div>
<div class="spacer"></div>
<div class="clear"></div>
<div class="photo-section">
<hr class="hrln-full" />
<div class="second-mid-info">
<h2>Built with Bootstrap.</h2>
<p>Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing collection of examples or by exploring some of our favorites.</p>
</div>
<hr class="hz-line" />
<div class="photos">
<img src="http://expo.getbootstrap.com/thumbs/lyft-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/vogue-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/riot-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/newsweek-thumb.jpg" />
</div>
<hr class="hz-line" />
<div class="expo-button">
<p>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
<button class="expo">Explore the Expo</button>
</div>
<hr class="hrln-full" />
</div>
</div>
<div class="clearfooter"></div>
</section>
</main>
<div class="clear"></div>
<footer>
<p>Designed and built with all the love in the world by #mdo and #fat.
<br /> Maintained by the core team with the help of our contributors.
<br /> Code licensed under MIT, documentation under CC BY 3.0.</p>
<ul>
<li>Github</li>
<li>Examples</li>
<li>v2.3.2 docs</li>
<li>About</li>
<li>Expo</li>
<li>Blog</li>
<li>Releases</li>
</ul>
</footer>
</center>
CSS
*, *:before, *:after {
box-sizing: border-box;
}
html, body, #wrap {
height: 100%;
}
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #fff;
}
h1 {
font-size: 50px;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 22px;
font-weight: 100px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 14px;
}
#container {}
ul {
list-style: none;
}
li {
list-style: none;
display: inline;
padding: 10px;
}
a {
list-style: none;
color: inherit;
text-decoration: none;
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
}
main {
padding-bottom: 150px;
display: block;
margin: 0 auto;
}
.top-bar {
margin: 0;
padding: 15px 0;
background-color: #0275D8;
text-align: center;
}
.top-bar p {
color: #fff;
font-size: 15px;
font-weight: 600;
text-align: center;
margin: 0;
}
.top-bar:hover {
margin: 0;
padding: 15px 0;
background-color: #0269C2;
text-align: center;
}
.nav-bar {
background-color: #fff;
position: relative;
color: #583F7E;
display: block;
width: 100%;
height: 50px;
}
.logo {
position: absolute;
font-size: 20px;
font-weight: 700;
color: #583F7E;
padding: 15px;
line-height: 0.8em;
margin-left: 100px;
}
.left-nav {
float: left;
font-size: 15px;
font-weight: 500;
text-align: center;
margin-left: 200px;
}
.right-nav {
float: right;
text-align: right;
font-size: 15px;
font-weight: 500;
margin-right: 120px;
}
.left-nav a:hover {
background-color: #f9f9f9;
}
.right-nav a:hover {
background-color: #f9f9f9;
}
.head-component {
background-color: #583F7E;
height: 700px;
display: block;
margin: 0 auto;
}
.b-logo {
margin: 0 auto;
padding-top: 5px;
width: 160px;
height: 300px;
display: block;
}
.b-logo p {
font-size: 130px;
font-weight: 700;
color: #fff;
border: 1px solid #fff;
border-radius: 25px;
text-align: center;
}
.short-description {}
.short-description p {
font-size: 30px;
color: #fff;
font-weight: 300;
width: 850px;
text-align: center;
display: block;
margin: 0 auto;
padding-top: 40px;
}
.download-button {
padding-top: 40px;
}
.dwn {
background: none;
font-size: 20px;
padding: 15px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.dwn:hover {
background: #fff;
font-size: 20px;
padding: 15px;
color: #583F7E;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.current p {
color: #9781A9;
font-size: 14px;
padding-bottom: 75px;
padding-top: 20px;
display: block;
margin: 0 auto;
text-align: center;
}
.mid-section {
height: 100%;
background-color: #fff;
display: block;
margin: 0 auto;
}
.mid-info {
padding-top: 75px;
font-weight: 300;
color: #333;
width: 900px;
text-align: center;
display: block;
margin: 0 auto;
}
.mid-info p {
font-weight: 400;
font-size: 22px;
color: #555;
padding-bottom: 20px;
display: block;
margin: 0 auto;
text-align: center;
}
.hz-line {
width: 10%;
color: #f3f3f3;
opacity: 0.5;
}
.column-left {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-left img {
width: 100%;
}
.column-left p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.column-middle {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-middle img {
width: 100%;
}
.column-middle p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.column-right {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-right img {
width: 100%;
}
.column-right p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.clear {
clear: both;
}
.github {
padding-top: 15px;
font-weight: 300;
color: #333;
width: 1024px;
display: block;
margin: 0 auto;
text-align: center;
}
.github p {
font-weight: 400;
font-size: 18px;
color: #555;
padding-bottom: 20px;
text-align: center;
}
.view-git {
background: none;
font-size: 20px;
padding: 10px;
color: #583F7E;
font-weight: 400;
border: 1px solid #583F7E;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.view-git:hover {
background: #583F7E;
font-size: 20px;
padding: 10px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.hrln-full {
color: #f3f3f3;
opacity: 0.5;
}
.spacer {
height: 60px;
}
.second-mid-info {
padding-top: 75px;
font-weight: 300;
color: #333;
width: 900px;
display: block;
margin: 0 auto;
text-align: center;
}
.second-mid-info p {
font-weight: 400;
font-size: 22px;
color: #555;
text-align: center;
display: block;
margin: 0 auto;
padding-bottom: 30px;
}
.photo-section {
height: 100%;
display: block;
margin: 0 auto;
}
.photos {
padding: 30px;
padding-left: 115px;
}
.photos img {
width: 23%;
}
.expo-button {
padding-top: 15px;
padding-bottom: 120px;
font-weight: 300;
color: #333;
width: 1024px;
display: block;
margin: 0 auto;
}
.expo-button p {
font-weight: 300;
font-size: 22px;
color: #555;
padding-bottom: 30px;
text-align: center;
display: block;
margin: 0 auto;
}
.expo {
background: none;
font-size: 20px;
padding: 10px;
color: #583F7E;
font-weight: 400;
border: 1px solid #583F7E;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.expo:hover {
background: #583F7E;
font-size: 20px;
padding: 10px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.clearfooter {
height: 130px;
clear: both;
}
footer {
text-align: center;
bottom: 0;
height: 100%;
left: 0;
width: 100%;
display: block;
margin: 0 auto;
}
footer p {
text-align: center;
}
footer ul {
position: relative;
}
footer li {
color: #489FD6;
}
footer li:hover {
color: #23517C;
text-decoration: underline;
}
footer a {}
From what I can tell I believe its because of two main reasons.
You have set fixed heights for elements with content that is height than the fixed height.
.mid-section {
height: 500px;
background-color: #fff;
margin: 0;
}
.photo-section {
height:500px;
}
The footer has position: absolute but isn't contained by a parent with position: relative. If you would like the footer to stick to the bottom use position: fixed instead.
footer {
text-align: center;
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}