I am making a lovely website and though I would like a constant fixed navbar at the bottom of the page, it seems fixed and at the bottom but on the left it seems to start after about a centimeter. The slight start to the right is killing me. I certainly did not tell it to do this. I would like one constant navbar fixed at the bottom. What am I missing in my CSS here?
html {
background: url(../images/mexicobeach.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
h1 {
font-family: 'Sansita One', cursive;
font-size: 82px;
text-align: center;
margin: 60px 0 0 0;
}
h2 {
font-family: 'Sansita One', cursive;
font-size: 120px;
text-align: center;
margin: 60px 0 0 0;
}
.nav {
position:fixed;
bottom:0px;
font-family: 'Sansita One', cursive;
width:100%;
height:50px;
padding: 0px;
text-align: center;
}
ul {
padding: 10px;
background: rgba(8, 102, 112, 0.5);
}
li {
display: inline;
padding: 10px 20px 0px 30px;
}
a {
color: white;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/mexicostylesheet.css" />
<link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>
<title>Smithies in Mexico</title>
<style>
</style>
</head>
<body>
<div class="nav">
<div class="container">
<ul id="navigation">
<li>About</li>
<li>Stay</li>
<li>Do</li>
<li>Eat</li>
<li>Mexican Mad Libs</li>
<li>Taco Game</li>
<li>Countdown</li>
<li>Quiz</li>
</ul>
</div>
</div>
<div class="jumbotron"
<div class="container">
<h1>Smith Ladies Go To</h1>
<h2>Mexico</h2>
</div>
</div>
</div>
</body>
You need to add the left value for the fixed nav:
.nav {
position:fixed;
bottom:0px;
left:0; /*ADD THIS*/
font-family: 'Sansita One', cursive;
width:100%;
height:50px;
padding: 0px;
text-align: center;
}
The Demo on JsFiddle
Related
I'm having an issue where the footer of my page has now moved up and is stuck with in the picture. This problem didn't use to occur and I'm unsure as to how to fix it.
When entering the website : https://gyazo.com/bcd6fe2f9514e761035deee64d820e22
After scrolling down : https://gyazo.com/cb9b9917d7d1730484c18a093b2a5f12
Here is the part of the code for index.php
html {
scroll-behavior: smooth;
}
body,
.cover {
height: 100%;
}
.cover {
background: url('img/main.jpeg') top left no-repeat;
background-size: cover;
display: table;
width: 100%;
padding: 20%;
box-shadow: inset 0 0 100px #000;
}
.cover-text {
text-align: center;
color: white;
display: table-cell;
vertical-align: middle;
}
.cover-text h1 {
margin: 0;
font-size: 70px;
letter-spacing: -3px;
}
nav.navbar-inverse {
background: rgba(0, 0, 0, 0.5);
border: none;
}
.the-quote {
background: #222;
}
blockquote1 {
border: none;
margin: 0;
font-family: Georgia, Times, serif;
font-style: italic;
font-size: 32px;
color: white;
}
blockquote1 cite {
display: block;
text-align: right;
text-transform: uppercase;
font-family: Helvetica, Arial, sans-serif;
font-style: normal;
font-size: 18px;
font-weight: bold;
color: #888;
margin-top: 40px;
}
section {
padding: 100px;
}
h2 {
text-align: center;
font-size: 28px;
font-weight: bold;
text-transform: uppercase;
margin: 0 0 60px;
}
h2 + p {
text-align: center;
margin-top: -60px;
}
#team {
background: url('img/fan.jpg') top left no-repeat;
background-size: cover;
color: white;
text-align: center;
}
#reviews p {
color: black;
}
#reviews h4 {
font-weight: 600;
}
#reviews {
text-align: center
}
#contact-us {
background: url('img/straighten.jpg') left no-repeat;
background-size: cover;
text-align: center;
}
footer {
background: #222;
color: black;
text-align: white;
padding: 20px;
font-family: Georgia, Times, serif;
position:absolute;
bottom: 0;
width: 100%;
}
footer a {
color: hotpink;
}
#media only screen and ( max-width : 568px ) {
.cover h1 {
font-size: 40px;
}
section {
padding: 20px;
}
}
.login-cover {
background: #333;
background-size: auto;
padding-top: 300px;
min-height: 93.8vh;
min-width: 100vw;
color: black;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modern Haircut Designs</title>
<!-- Bootstrap Stuff -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Coursework Style that's seperate -->
<link href="coursework_style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-inverse">
#My navigation bar code
</nav>
<div class="cover" id="top">
<div class="cover-text">
<h1>Professional Haircut Service at its finest</h1>
<p class="lead">It's your haircut so why not choose the exact date, time and barber of your preference.</p>
Sign up by clicking right here!
</div>
</div>
<section class="the-quote">
# Quote
</section>
<section id="services">
#List of the services we offer
</section>
<section id="team">
# Team members
</section>
<section id="reviews">
#Reviews
</section>
<section id="contact-us">
#Contact-Us information
</section>
<!-- jQuery for javascript stuff-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap javascript code / might remove tho -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
<footer>
crafted with ♥ in Bangladesh by Roman Ryan Karim
</footer>
</html>
Before this error persisted, the footer used to appear underneath the contact-us section however it now appears the instance you go to the website and is stuck there. Can someone help? I don't mind sharing more of the code if you need it.
Try to remove your position absolute, of your footer
I am new to HTML CSS and JS and am creating a website and have had a problem for a few days now, I have created a navigation bad to switch between pages but i cannot seem to position it correctly in the top left corner I was wondering if anyone could help. I would like it to be positioned exactly in the top left corner but it seems to be out of position. I have tried many solutions but cant seem to get the result i am looking for.
body {
margin-left: 50px;
margin-right: auto;
background-color:
font-family: Arial, Helvetica, sans-serif;
width: 800px;
}
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 12px 16px;
text-decoration: none;
font-size: 20pt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
color: white;
}
html {
background: url(UFC.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.CSS">
</head>
<body>
<div class="topnav">
`enter code here` <a class="active" href="home.html"><u>Home</u></a>
<u>Top Fighters</u>
<u>Best Knockouts</u>
<u>Contact Page</u>
<a href="https://twitter.com/ItsssOwen">
<img src="twitter%20link.png" width="42" height="32" border="0">
</a>
</div>
</body>
</html>
You can modify the position of an element with css position, specifying top, left, right, bottom position (only one x and one y are needed).
body {
margin-left: 50px;
margin-right: auto;
background-color:
font-family: Arial, Helvetica, sans-serif;
width: 800px;
}
.topnav {
background-color: #333;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 12px 16px;
text-decoration: none;
font-size: 20pt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
color: white;
}
html {
background: url(UFC.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.CSS">
</head>
<body>
<div class="topnav">
`enter code here` <a class="active" href="home.html"><u>Home</u></a>
<u>Top Fighters</u>
<u>Best Knockouts</u>
<u>Contact Page</u>
<a href="https://twitter.com/ItsssOwen">
<img src="twitter%20link.png" width="42" height="32" border="0">
</a>
</div>
</body>
</html>
But your problem is that you specified a
margin-left: 50px;
for your body, causing the elements to move 50 px to the right, and you can reach it by deleting it:
body {
background-color:
font-family: Arial, Helvetica, sans-serif;
width: 800px;
}
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 12px 16px;
text-decoration: none;
font-size: 20pt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
color: white;
}
html {
background: url(UFC.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.CSS">
</head>
<body>
<div class="topnav">
`enter code here` <a class="active" href="home.html"><u>Home</u></a>
<u>Top Fighters</u>
<u>Best Knockouts</u>
<u>Contact Page</u>
<a href="https://twitter.com/ItsssOwen">
<img src="twitter%20link.png" width="42" height="32" border="0">
</a>
</div>
</body>
</html>
Trying to do my first solo project after spending over a year learning, and feeling like I've learned nothing.
For some reason, creating a banner is proving extremely difficult.
At first, I wanted to tag my nav-bar to the bottom of my banner. I gave up on that, and am now just trying to get my banner to work in the most basic of ways.
If I put the image inline with HTML, it stays at the forefront of everything and scrolls with the page. No bueno. background-image is not working at all.
I want it to stay at the top of the page. I want the navbar to stay at the top of the user's visible area (so, it scrolls with the page).
I've spent three hours on this!
Here's my code:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Teo Hannum | Teacher of the Alexander Technique</title>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.0.0/bootstrap-social.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<title>Teo Hannum | Teacher of the Alexander Technique</title>
</head>
<!-- MASTHEAD -->
<body> <!-- data-spy="scroll" data-target=".navbar" data-offset="0"> -->
<div id="page">
<header role="banner">
<!-- NAVBAR -->
<nav id="mainnavbar" class="navbar navbar-default navbar-fixed-top" roll="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="">Teo Hannum | Teacher of the Alexander Technique</a>
</div>
<ul class="nav navbar-nav navbar-right" id="topMenu">
<li class="active">
Who
</li>
<li>
What
</li>
<li>
Where
</li>
</ul>
</div>
</nav>
<div id="brand">
<p>Move with Fluidity and Intention</p>
</div>
</header>
<div class="bannerimage">
<div class="bannerWrapper">
<div class="bannerText">
<p>Move with Fluidity and Intention</p>
</div>
</div>
</div>
<!-- WHO SECTION -->
<div id="who">
</div>
<!-- WHAT SECTION -->
<div id="what">
<article>
<div class="portblock">
<h1>Portfolio</h1>
<p>Utilizing the "less is more" mindset, I create focused content that delivers results while developing brand culture and identity.
</article>
<div class="container-fluid img-thumbnail">
<div class="row">
<img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1081">
<img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1067">
<img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1044">
<img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1012">
</div>
</div>
</div>
</div>
<div id="where">
</div>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
body{
font-family:'Open Sans Condensed', sans-serif;
color:white;
margin:0;
padding:0;
}
h1{
padding: 0;
margin-top: -1%;
text-align: center;
color:black;
font-size: 6.5vw;
}
p{
font-family: 'EB Garamond', serif;
font-size: 2.5vw;
}
header {
height: 70px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
font-size: 12px;
line-height: 14px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 2px;
z-index: 66666;
}
.navbar-nav{
font-family:'Open Sans Condensed', sans-serif;
font-size: 2.0em;
}
.navbar-brand{
font-family:'Open Sans Condensed', sans-serif;
font-size:2.0em;
}
/* MASTHEAD */
#masthead {
position: relative;
}
.custom-header {
display: block;
height: auto;
}
#mast-img {
max-width: 100%;
display: block;
height: auto;
position: fixed;
}
#brand {
z-index: 100;
position: absolute;
color: white;
font-size: 40px;
font-weight: bold;
line-height: 50px;
left: 150px;
top: 325px;
}
#masthead .wrap {
position: relative;
}
#topMenu {
z-index: 1;
}
/* END MASTHEAD */
#page {
position: relative;
}
#bannerimage {
width: 100%;
background-image: url(https://static.pexels.com/photos/486895/pexels-photo-486895.jpeg);
height: 405px;
background-color: purple;
background-position: center;
}
.bannerWrapper {
width: 94%;
max-width: 960px;
margin: 0px auto;
}
.btn:hover{
color:#FEEE8B;
}
.btn:active{
color:white;
}
.btn{
align-text: center;
margin-bottom:3%;
margin-right:5px;
margin-left:5px;
border-radius: 0 !important;
font-size:1.5vw;
color:white;
}
article{
padding-bottom:10px;
}
.block{
background-color:rgba(157,178,197,.6);
opacity:1;
padding:1em;
width:50%;
height:12%;
margin-right:auto;
margin-left:auto;
margin-top:10%;
object-border:10px;
}
.portblock{
text-align:right;
padding:1em;
background-color:rgba(157,178,197,.6);
opacity:1;
width:50%;
height:12%;
margin-top:10%;
margin-right:1%;
margin-left:auto;
object-border:10px;
}
.portrait{
width:40%;
height:auto;
border-radius:50%;
margin-bottom:3%;
margin-top:3%;
opacity:.9;
}
.img-thumbnail{
background:rgba(157,178,197,.6);
margin-top:8%;
padding:1em;
margin-right:1%;
margin-left:1%;
}
#who{
background-image:url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1422394882588-508654c3f5d4.jpeg?X-Amz-Date=20161019T232852Z&X-Amz-Expires=300&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Signature=3b5a5267c478a5ea16ade4496e34221342748dbda8813840fa9867fe3270b6f7&X-Amz-Credential=ASIAIK2R6BOZXGQHU5CQ/20161019/us-west-2/s3/aws4_request&X-Amz-SignedHeaders=Host&x-amz-security-token=FQoDYXdzEDkaDN3PwRF5BiQ0M7XC3CL6Aal8I83b8wlOIm5EBzQqiMdVj0tSmaoJn1a8DHvHD7bWWs47ywISxJpL95AavWhli2XQ3z4WgaPLtJz5BIoPJUFRHluYm5DH46Q62nXJIDY%2BJ/GrScPriWBko6yd/9YQ4A/7GuFpH6z/fG2ZenPcACf9hkpUj5aKD72scXWuANgZbF4aN5xWQBpxYteRfnh3zio86PaG84yfMr3X5R6GVmlQMAqFFB9OYhAzH7mkCwKZYXT6Hb3IdxNpiaYqxgUsvl3G4Vdi8vg813n78dwY97hXkwWSaItLh0Nkq7JM%2BQ/mIisjgrm1ntZ3kEb%2Bbk2nUmhRr2EtTHC4cqwomIGgwAU%3D");
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:800px;
padding: 1px;
}
#what{
background-image:url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg?X-Amz-Date=20161019T232942Z&X-Amz-Expires=300&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Signature=2c6a81a324d7a3ae6587b00c8cfba95f6620b9ec47222caa643963bfbae97b76&X-Amz-Credential=ASIAIK2R6BOZXGQHU5CQ/20161019/us-west-2/s3/aws4_request&X-Amz-SignedHeaders=Host&x-amz-security-token=FQoDYXdzEDkaDN3PwRF5BiQ0M7XC3CL6Aal8I83b8wlOIm5EBzQqiMdVj0tSmaoJn1a8DHvHD7bWWs47ywISxJpL95AavWhli2XQ3z4WgaPLtJz5BIoPJUFRHluYm5DH46Q62nXJIDY%2BJ/GrScPriWBko6yd/9YQ4A/7GuFpH6z/fG2ZenPcACf9hkpUj5aKD72scXWuANgZbF4aN5xWQBpxYteRfnh3zio86PaG84yfMr3X5R6GVmlQMAqFFB9OYhAzH7mkCwKZYXT6Hb3IdxNpiaYqxgUsvl3G4Vdi8vg813n78dwY97hXkwWSaItLh0Nkq7JM%2BQ/mIisjgrm1ntZ3kEb%2Bbk2nUmhRr2EtTHC4cqwomIGgwAU%3D");
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:800px;
padding: 1px;
}
#where{
background-image:url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg?X-Amz-Date=20161019T232942Z&X-Amz-Expires=300&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Signature=2c6a81a324d7a3ae6587b00c8cfba95f6620b9ec47222caa643963bfbae97b76&X-Amz-Credential=ASIAIK2R6BOZXGQHU5CQ/20161019/us-west-2/s3/aws4_request&X-Amz-SignedHeaders=Host&x-amz-security-token=FQoDYXdzEDkaDN3PwRF5BiQ0M7XC3CL6Aal8I83b8wlOIm5EBzQqiMdVj0tSmaoJn1a8DHvHD7bWWs47ywISxJpL95AavWhli2XQ3z4WgaPLtJz5BIoPJUFRHluYm5DH46Q62nXJIDY%2BJ/GrScPriWBko6yd/9YQ4A/7GuFpH6z/fG2ZenPcACf9hkpUj5aKD72scXWuANgZbF4aN5xWQBpxYteRfnh3zio86PaG84yfMr3X5R6GVmlQMAqFFB9OYhAzH7mkCwKZYXT6Hb3IdxNpiaYqxgUsvl3G4Vdi8vg813n78dwY97hXkwWSaItLh0Nkq7JM%2BQ/mIisjgrm1ntZ3kEb%2Bbk2nUmhRr2EtTHC4cqwomIGgwAU%3D");
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:800px;
padding: 1px;
}
Please note that I copy-pasted most of the CSS from another project, so there's a lot of yet-to-be-used stuff in here.
You have a few issues here. First , you have created a head section twice, once within the body section. Keep the head together, have one head section and one body section. Opening and closing these sections off more than once will cause problems.
As for the background image, you have a semi-colon before your no-repeat (etc), in your who/what/where css; if your remove this semi colon, it works.
You also have 2 other minor issues in your css; it's text-align not align-text, also replace object-border with just border
EDIT: Your main issue was that you had background-image: where there should have been just background: in the css (because you had all the information there and not just the image url). Also I removed the background-size:cover from the small images, as these would have covered the main background image that was set to cover. Your big background image had no inverted commas around the filepath in the url brackets. Also your banner-image is an id, not a class as it was originally being called in the HTML.
I created a snippet, so if you run it you can see the output.
Hope this helps.
body {
font-family: 'Open Sans Condensed', sans-serif;
color: white;
margin: 0;
padding: 0;
}
h1 {
padding: 0;
margin-top: -1%;
text-align: center;
color: black;
font-size: 6.5vw;
}
p {
font-family: 'EB Garamond', serif;
font-size: 2.5vw;
}
header {
height: 70px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
font-size: 12px;
line-height: 14px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 2px;
z-index: 66666;
}
.navbar-nav {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 2.0em;
}
.navbar-brand {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 2.0em;
}
/* MASTHEAD */
#masthead {
position: relative;
}
.custom-header {
display: block;
height: auto;
}
#mast-img {
max-width: 100%;
display: block;
height: auto;
position: fixed;
}
#brand {
z-index: 100;
position: absolute;
color: white;
font-size: 40px;
font-weight: bold;
line-height: 50px;
left: 150px;
top: 325px;
}
#masthead .wrap {
position: relative;
}
#topMenu {
z-index: 1;
}
/* END MASTHEAD */
#page {
position: relative;
}
#bannerimage {
width: 100%;
height: 405px;
background-image: url('https://static.pexels.com/photos/486895/pexels-photo-486895.jpeg');
background-repeat:no-repeat;
background-position: center center
background-size:cover;
}
.bannerWrapper {
width: 94%;
max-width: 960px;
margin: 0px auto;
}
.btn:hover {
color: #FEEE8B;
}
.btn:active {
color: white;
}
.btn {
text-align: center;
/*not align-text*/
margin-bottom: 3%;
margin-right: 5px;
margin-left: 5px;
border-radius: 0 !important;
font-size: 1.5vw;
color: white;
}
article {
padding-bottom: 10px;
}
.block {
background-color: rgba(157, 178, 197, .6);
opacity: 1;
padding: 1em;
width: 50%;
height: 12%;
margin-right: auto;
margin-left: auto;
margin-top: 10%;
border: 10px;
}
.portblock {
text-align: right;
padding: 1em;
background-color: rgba(157, 178, 197, .6);
opacity: 1;
width: 50%;
height: 12%;
margin-top: 10%;
margin-right: 1%;
margin-left: auto;
border: 10px;
/*it's just border, not object-border*/
}
.portrait {
width: 40%;
height: auto;
border-radius: 50%;
margin-bottom: 3%;
margin-top: 3%;
opacity: .9;
}
.img-thumbnail {
background: rgba(157, 178, 197, .6);
margin-top: 8%;
padding: 1em;
margin-right: 1%;
margin-left: 1%;
}
#who {
background: url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1422394882588-508654c3f5d4.jpeg") no-repeat center center fixed;
/*the reason why the bg-image wasn't working was you had a semi-colon before no-repeat*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/*background-size: cover;*/
height: 800px;
padding: 1px;
}
#what {
background: url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/*background-size: cover;*/
height: 800px;
padding: 1px;
}
#where {
background: url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/*background-size: cover;*/
height: 800px;
padding: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<title>Teo Hannum | Teacher of the Alexander Technique</title>
<!-- MASTHEAD -->
<body>
<!-- data-spy="scroll" data-target=".navbar" data-offset="0"> -->
<div id="page">
<header role="banner">
<!-- NAVBAR -->
<nav id="mainnavbar" class="navbar navbar-default navbar-fixed-top" roll="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="">Teo Hannum | Teacher of the Alexander Technique</a>
</div>
<ul class="nav navbar-nav navbar-right" id="topMenu">
<li class="active">
Who
</li>
<li>
What
</li>
<li>
Where
</li>
</ul>
</div>
</nav>
<div id="brand">
<p>Move with Fluidity and Intention</p>
</div>
</header>
<div id="bannerimage">
<div class="bannerWrapper">
<div class="bannerText">
<p>Move with Fluidity and Intention</p>
</div>
</div>
</div>
<!-- WHO SECTION -->
<div id="who">
</div>
<!-- WHAT SECTION -->
<div id="what">
<article>
<div class="portblock">
<h1>Portfolio</h1>
<p>Utilizing the "less is more" mindset, I create focused content that delivers results while developing brand culture and identity.</div>
</article>
<div class="container-fluid img-thumbnail">
<div class="row">
<img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1081">
<img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1067">
<img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1044">
<img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1012">
</div>
</div>
</div>
</div>
<div id="where">
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script src="js/index.js"></script>
I am trying to create a footer for my page. I have tried to make it stick at the absolute bottom of the page and after some online research it told me to modify the height value of my body. However, once I do that, nothing changes. Here is my code:
*{
margin:0;
padding:0:
}
html{
height:100%;
min-height:100%;
}
#wrapper{
height: 100%;
}
/*****************/
/*****HEADER******/
/*****************/
#header{
width: 100%;
margin-top:0px;
margin-bottom:2.5%;
margin-right:0px;
margin-left:0px;
padding-top:2%;
padding-bottom:0.5%;
padding-left:0%;
padding-right:0%;
border-bottom-style:solid;
border-bottom-color: black;
background: lightgrey;
}
#header>h1{
color:black;
margin: 0px 0px 0px 10px;
}
#header>p{
font-style: italic;
text-align: left;
color:black;
margin: 0px 0px 0px 20px;
}
/*****************/
/*****Body******/
/*****************/
#content{
position: relative;
height:100%;
min-height: 100%;
max-height: 100%;
}
#content>p{
margin-left:2.5%;
}
#intro_text{
font-style: italic;
margin-bottom:2.5%;
}
#main_nav{
margin-top:1%;
margin-left:5%;
}
/*****************/
/******FOOTER*****/
/*****************/
#footer{
font-style: italic;
text-align: center;
position: relative;
bottom: 0;
}
EDIT: Added HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<script src="./js/script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>My Web Space</h1>
<p> First HTML Page using Sublime Text</p>
</div>
<div id="content">
<p id=intro_text>Hello, my name is Alex and I am an aspiring web designer</p>
<p>Links to various test pages I am working with</p>
<ul id=main_nav>
<li><a href=test_link.html>Linking to another page test</a></li>
</ul>
</div>
<div id="footer">
<p id=footer_text>Me, 2016</p>
</div>
</div>
</body>
</html>
This is the core logic of the solution:
html{
position: relative; /* Allows the footer to notice content height */
min-height: 100vh; /* My page will always take the full screen */
}
main{
margin-bottom: 100px; /* prevents footer overlap (footer height + 20px) */
}
footer{
position: absolute; /* I don't care about other things */
bottom: 0; /* I want to be on the bottom... */
left: 0; /* ...and to the left */
}
JSBin
I tried to keep it as simple as possible.
This answer does not use flexbox its pure ol' css.
Try this just modifying #footer
*{
margin:0;
padding:0:
}
html{
height:100%;
min-height:100%;
}
#wrapper{
height: 100%;
}
/*****************/
/*****HEADER******/
/*****************/
#header{
width: 100%;
margin-top:0px;
margin-bottom:2.5%;
margin-right:0px;
margin-left:0px;
padding-top:2%;
padding-bottom:0.5%;
padding-left:0%;
padding-right:0%;
border-bottom-style:solid;
border-bottom-color: black;
background: lightgrey;
}
#header>h1{
color:black;
margin: 0px 0px 0px 10px;
}
#header>p{
font-style: italic;
text-align: left;
color:black;
margin: 0px 0px 0px 20px;
}
/*****************/
/*****Body******/
/*****************/
#content{
position: relative;
height:100%;
min-height: 100%;
max-height: 100%;
}
#content>p{
margin-left:2.5%;
}
#intro_text{
font-style: italic;
margin-bottom:2.5%;
}
#main_nav{
margin-top:1%;
margin-left:5%;
}
/*****************/
/******FOOTER*****/
/*****************/
#footer{
font-style: italic;
text-align: center;
position: fixed;
background:#f00;
width:100%;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<script src="./js/script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>My Web Space</h1>
<p> First HTML Page using Sublime Text</p>
</div>
<div id="content">
<p id=intro_text>Hello, my name is Alex and I am an aspiring web designer</p>
<p>Links to various test pages I am working with</p>
<ul id=main_nav>
<li><a href=test_link.html>Linking to another page test</a></li>
</ul>
</div>
<div id="footer">
<p id=footer_text>Me, 2016</p>
</div>
</div>
</body>
</html>
Using flexboxes, you can extend the content area to fill the wrapper
JSfiddle: jsfiddle.net/sabgu8r4
body {
height: 100%;
}
/*****************/
* {
margin: 0;
padding: 0:
}
html {
height: 100%;
min-height: 100%;
}
#wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
/*****************/
/*****HEADER******/
/*****************/
#header {
width: 100%;
margin-top: 0px;
margin-bottom: 2.5%;
margin-right: 0px;
margin-left: 0px;
padding-top: 2%;
padding-bottom: 0.5%;
padding-left: 0%;
padding-right: 0%;
border-bottom-style: solid;
border-bottom-color: black;
background: lightgrey;
}
#header>h1 {
color: black;
margin: 0px 0px 0px 10px;
}
#header>p {
font-style: italic;
text-align: left;
color: black;
margin: 0px 0px 0px 20px;
}
/*****************/
/*****Body******/
/*****************/
#content {
/*position: relative;*/
flex-grow: 1;
/*height: 100%;
min-height: 100%;
max-height: 100%;*/
}
#content>p {
margin-left: 2.5%;
}
#intro_text {
font-style: italic;
margin-bottom: 2.5%;
}
#main_nav {
margin-top: 1%;
margin-left: 5%;
}
/*****************/
/******FOOTER*****/
/*****************/
#footer {
font-style: italic;
text-align: center;
/*position: relative;
bottom: 0;*/
}
<div id="wrapper">
<div id="header">
<h1>My Web Space</h1>
<p> First HTML Page using Sublime Text</p>
</div>
<div id="content">
<p id=intro_text>Hello, my name is Alex and I am an aspiring web designer</p>
<p>Links to various test pages I am working with</p>
<ul id=main_nav>
<li><a href=test_link.html>Linking to another page test</a></li>
</ul>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
</div>
<div id="footer">
<p id=footer_text>Me, 2016</p>
</div>
</div>
First time asking a question. I've looked this up exhaustively and I thiiiink I get what my problem is but I don't know how to fix it. I've tried multiple different things to no avail. I am trying to learn html and css and this is my first time hand-writing a site by myself, though I am doing it inside Dreamweaver.
I cannot get either the location nor the social media font awesome icons to become links. The urls are just generic at the moment and I added a border to the left and right floats so I could check they were in the right spot.
I think that what is happening is that the padding for my contentbox or my container are overlapping the footer, but I have changed the z-index and tried removing the padding all together and they still don't seem to work (and then the page doesn't look the way I wanted it) I have been searching for answers to this but, at this point, I think it might be something I specifically messed up or don't understand that is making this happen, so I wanted to reach out to all of you.
Here is my html (I hope this works!):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
</head>
<body>
<!---outer containers-->
<div id="container">
<div id="header">
<div id="logo">
</div>
<nav>
<ul>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div id="contentbox">
<div id="content">
<div id="frontcontent">
<p>
<img id="sanjapic" src="Images/SanjaPicture.jpg"/>
<h1>Edgy Hair Stylist Serving the Denver Area</h1>
</p>
</div>
</div>
<footer>
<div id="social">
<a href="http://www.facebook.com">
<i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i>
</a>
<a href="http://www.yelp.com">
<i class="fa fa-yelp fa-2x" aria-hidden="true"></i>
</a>
<a href="http://www.instagram.com">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a>
</div>
<div id="left">
<p>
<a href="http://www.googlemaps.com"><i class="fa fa-map-marker fa-3x" aria-hidden="true"></i>
Address: 657 Santa Fe Dr, Denver, CO 80204<br>
Phone:(303) 953-9486</a>
</p>
</div>
</footer>
</div>
</div>
</body>
</html>
and here is my css:
#charset "utf-8";
#import url(https://fonts.googleapis.com/css?family=Fjalla+One);
body {
background-image: url(Images/bgLarge.jpg);
background-repeat: no-repeat;
background-size: 100%;
padding: 0;
font-family:'Fjalla One', sans-serif;
font-style: normal;
font-weight: 400;
background-attachment: fixed;
margin:0px;
background-color: #2F2F2F;
}
#container {
width: 100%;
margin: 0 auto;
position: relative;
}
#header {
width: 100%;
height: 100px;
background-image: url(Images/toptent.png);
background-repeat: no-repeat;
position: relative;
background-size: contain;
z-index:50;
}
#logo {
background-image: url(Images/SanjaLogoGray.png);
height: 70px;
background-repeat: no-repeat;
z-index: 100;
width: 100%;
margin: 0 auto;
position:relative;
max-width: 250px;
display:block;
}
#contentbox {
width: 80%;
height:100%;
background-color: #ffffff;
margin: 0 auto;
position: relative;
max-width: 800px;
margin-top: -110px;
padding-top: 100px;
display: block;
z-index: -2000;
-webkit-box-shadow: 0px 5px 15px 10px #2F2F2F;
box-shadow: 0px 5px 15px 10px #2F2F2F;
}
#content {
margin-top: 30px;
padding:2%;
display: block;
}
#about {
position:relative;
margin:0;
left:-70px;
top:-8px;
}
#sanjapic {
height:auto;
width: 80%;
max-width:400px;
margin: 0 auto;
position:relative;
display:block;
padding-top:10px;
}
h1 {
font-size:1.2em;
text-align:center;
margin:0 auto;
}
#frontcontent h1 {
max-width:60%;
height: auto;
width:80%;
}
nav {
width: 80%;
background: #ffffff;
border-right: none;
margin: 0 auto;
max-width:800px;
margin-bottom:10px;
margin-top:10px;
}
nav ul {
overflow: hidden;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
float: left;
text-align: center;
width: 25%; /* fallback for non-calc() browsers */
width: calc(100% / 4);
box-sizing: border-box;
margin-bottom:20px;
}
nav ul li:first-child {
border-left: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: #000000;
padding:10px;
}
nav ul li a:hover {
display: block;
text-decoration: none;
color: #312847;
border: 2px solid #000000;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 5px #617574;
box-shadow: 2px 2px 5px #617574;
}
nav ul li a:active {
background-color:#7DB4B9
}
footer {
background-color:#333333;
height:80px;
width:100%;
margin:0 auto;
z-index:3000;
position:relative;
height:100%;
}
footer a{
color:#ffffff;
padding:5px;
border:#E9191D thick solid;
display:inline-block;
text-decoration:none;
}
#social {
float:right;
padding:20px;
}
#left {
color:#ffffff;
padding:5px;
border:#E9191D thick solid;
display:inline-block;
font-size:.7em;
}
Your issue is this following statement on #contentbox:
z-index: -2000;
That's definitely something you DON'T want to do. Your bare minimum z-index for visible items should always be 0, and you should work your way up from that.
Also avoid using too big numbers as it's harder to keep tabs.
Update: here's the working version of your code http://jsbin.com/zatogisepo/edit?html,css,output