I tried to make an alignment for a FAQ page. but I face a problem that my questions and answers are also aligned in the center, but I want the title be in the center and everything to be aligned in the center but not the text.
I want it to appear like this
HTML:
<html>
<head>
<meta name="keywords" content="Photos, Images, Designs, HD, Tutorials, Photoshop, Download, Free, Upload, Gallery">
<meta name="description" content="Free HD Photos and Free tutorials For Photoshop and Designs.">
<meta charset="UTF-8">
<title>FAQ</title>
<link rel="shortcut icon" href="Images/Icon.ico">
<link href='Css/Style2.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<img src="Images/Logo.png" alt="Logo"/>
<div id="menu">
<ul>
<li><img class="nav-icons" src="Images/Nav-icons/home.png" alt="home" /> Home</li>
<li><img class="nav-icons" src="Images/Nav-icons/tutorials.png" alt="tutorials" /> Tutorials</li>
<li><img class="nav-icons" src="Images/Nav-icons/gallery.png" alt="gallery" /> Gallery</li>
<li class="active"><img class="nav-icons" src="Images/Nav-icons/faq.png" alt="faq" /> FAQ</li>
<li><img class="nav-icons" src="Images/Nav-icons/contact.png" alt="contact" /> Contact Us</li>
<li><img class="nav-icons" src="Images/Nav-icons/about.png" alt="about" /> About Us</li>
<li><img class="nav-icons" src="Images/Nav-icons/user.png" alt="sign up" /> Sign Up</li>
<li><img class="nav-icons" src="Images/Nav-icons/login.png" alt="login" /> Login</li>
</ul>
</div>
</div>
<div id="line"></div>
<br>
<div id="content">
<h1>FAQ</h1>
<img src="Images/faq.jpg" alt="FAQ" />
<dl>
<dt>What is Creative Designs about ?</dt>
<dd>Creative Designs is a website specialising in Photography and Designs. It offers people a look at creative Photos and Designs.</dd>
<dt>How much does it cost to register on Creative Designs ?</dt>
<dd>It's totally free.</dd>
<dt>Who can see the photos I upload ?</dt>
<dd>Any one can see your photos because its public by default you can share it on Facebook or any social website.</dd>
<dt>Where did the idea come from ?</dt>
<dd>We all want our memories to be immortal we love to show our sons and grandsons in the future our beautiful memories so we made this website to make it possible.</dd>
<dt>Where does the name came from ?</dt>
<dd>As humans we like imagining beautiful things, We Love Creativity that nature always provides in its landscapes, so Its Creative Designs</dd>
<dt>How Can I make an Advertisement on Creative Designs ?</dt>
<dd>For all advertising enquiries, please email Advertising#CreativeDesigns.com</dd>
<dt>How to report a technical Issue On Creative Designs ?</dt>
<dd>For technical issues, please email Support#CreativeDesigns.com</dd>
<dt>How to contact Creative Designs ?</dt>
<dd>You can go to the Contact Us Page</dd>
</dl>
</div>
<br>
<br>
<div id="line"></div>
<div id="footers">
<div id="footer">
<div id="footerbox">
<header>Keep In Touch</header>
<p>
Please keep in touch with us and follow our social networks to keep updated about everything.
</p>
<img class="Social" src="Images/facebook500.png" alt="Facebook" />
<img class="Social" src="Images/twitter.png" alt="Twitter" />
<img class="Social" src="Images/instagram.png" alt="Instagram" />
<img class="Social" src="Images/behance.png" alt="Behance" />
</div>
<div id="footerbox2">
<header>Navigate</header>
<br>
Home Tutorials <br><br>
Gallery FAQ <br><br>
Contact Us About Us
</div>
<div id="footerbox3">
<header>Subscribe</header>
<br>
Subscribe to our newsletter. If you are interested just put your Email address here.
<br>
<br>
<input type="text" size="30" placeholder="E-mail address"/> <a class="go" href="#">Go</a>
<br>
</div>
</div>
</div>
<div id="copyright">
<p>Copyright © 2014. Creative Designs all rights reserved. <a class="imp" href="Terms.html">Terms of Use</a>.</p>
</div>
</body>
</html>
CSS:
body {
background-color: #ccc;
margin: 0px;
font-family: Helvetica, sans-serif;
font-size: 13px;
}
a{
text-decoration: none;
}
input{
-webkit-border-radius: 5px;
padding: 4px 7px;
border-color: #3fb8e8;
}
.imp{
font-weight:bold;
text-decoration: underline;
}
textarea{
-webkit-border-radius: 6px;
padding: 4px 7px;
border-color: #3fb8e8;
}
iframe{
width:560px;
height:315px;
border: 0px;
}
.ex{
color: #3fb8e8;
}
.gallery{
padding:0px 190px;
}
.gallery td {
padding: 30px;
text-align: left;
font-size: 15px;
font-weight: bold;
}
.gallery img{
width:250px;
height:250px;
border:3px solid #000000;
}
.gallery .download{
width:95px;
height:30px;
border:0px;
}
.tutorials{
padding:0px 200px;
}
.tutorials td {
padding: 5px;
text-align: left;
font-size: 15px;
font-weight: bold;
}
.tutorials img{
width:100px;
height:80px;
border:2px solid #000000;
}
dl dt{
font-size: 17px;
font-weight: bold;
}
dl dd{
height: 50px;
font-size: 15px;
}
.gallery .top{
text-align: center;
}
.tutorials .top{
text-align: center;
}
#header
{
overflow: hidden;
background: #3b3b3b;
}
.nav-icons{
width: 15px;
height: 15px;
}
.login{
width: 50px;
position: absolute;
top: 118px;
right: 10px;
padding: 9px 20px;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #fff;
cursor:pointer;
font-family: Helvetica, sans-serif;
text-decoration: none;
background-color: #3fb8e8;
}
.login:hover {
background-color: #1baae3;
}
#menu
{
float: right;
width: 1250px;
}
.dl{
padding: 0px 0px 0px 50px;
}
.dl .title{
font-weight: bold;
font-size: 16px;
}
.dl .comp{
text-align: justify;
font-size: 16px;
padding: 0px 170px 0px 0px;
}
#menu ul
{
margin: 0px;
padding: 20px 0px 0px 0px;
list-style: none;
}
#menu li
{
float: left;
margin-left: 10px;
}
#menu a
{
padding: 15px 30px;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Archivo Narrow', sans-serif;
font-size: 12px;
font-weight: 600;
color: #FFFFFF;
}
#menu .active a
{
background: #3fb8e8;
border-radius: 5px;
color: #FFFFFF;
}
#menu .active a:hover
{
background-color: #1baae3;
}
#line
{
padding: 12px 0px 1px 0px;
background: #3fb8e8;
}
#contents{
text-align: center;
}
#contents .about{
font-weight: bold;
font-size: 16px;
text-align: left;
padding-left: 380px;
}
#contents .about2{
font-size: 15px;
text-align: left;
padding-left: 380px;
}
#contents .terms{
font-size: 17px;
text-align: justify;
padding-left: 380px;
padding-right: 220px;
}
#content {
width: 600px;
padding: 0 300px;
margin: 0 auto;
}
#content h1 {
text-align: center;
}
.signup{
padding: 0px 0px 0px 440px;
}
#why{
bottom: 70px;
left: 50px;
width: 300px;
height: 300px;
-webkit-border-radius: 5px;
position: absolute;
padding: 10px 26px;
font-size: 14px;
text-align: left;
font-weight: bold;
color: #fff;
font-family: Helvetica, sans-serif;
background-color: #3b3b3b;
}
.why a:visited{
color: #3bc;
}
#alter{
bottom: 70px;
right: 50px;
width: 300px;
height: 300px;
z-index: -1;
-webkit-border-radius: 5px;
position: absolute;
padding: 10px 26px;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #fff;
font-family: Helvetica, sans-serif;
background-color: #3b3b3b;
}
#alter2{
bottom: 200px;
right: 50px;
width: 300px;
height: 200px;
z-index: -1;
-webkit-border-radius: 5px;
position: absolute;
padding: 10px 26px;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #fff;
font-family: Helvetica, sans-serif;
background-color: #3b3b3b;
}
#alter3{
bottom: 200px;
left: 50px;
width: 300px;
height: 200px;
z-index: -1;
-webkit-border-radius: 5px;
position: absolute;
padding: 10px 26px;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #fff;
font-family: Helvetica, sans-serif;
background-color: #3b3b3b;
}
#down{
position: relative;
padding: 0px 23px 10px 70px;
}
.Facebookbtn{
bottom: 250px;
right: 100px;
width: 200px;
position: absolute;
padding: 10px 26px;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #fff;
cursor:pointer;
font-family: Helvetica, sans-serif;
background-color: #3b5998;
}
.Facebookbtn:hover{
background-color: #8b9dc3;
}
.Twitterbtn{
bottom: 200px;
right: 100px;
width: 200px;
position: absolute;
padding: 10px 26px;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #fff;
cursor:pointer;
font-family: Helvetica, sans-serif;
background-color: #3cf;
}
.Twitterbtn:hover{
background-color: #0084b4;
}
.Googlebtn{
bottom: 150px;
right: 100px;
width: 200px;
position: absolute;
padding: 10px 26px;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #fff;
cursor:pointer;
font-family: Helvetica, sans-serif;
background-color: #dc4b38;
}
.Googlebtn:hover{
background-color: #c83e2e;
}
.Facebookbtn2{
bottom: 350px;
right: 100px;
width: 200px;
position: absolute;
padding: 10px 26px;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #fff;
cursor:pointer;
font-family: Helvetica, sans-serif;
background-color: #3b5998;
}
.Facebookbtn2:hover{
background-color: #8b9dc3;
}
.Twitterbtn2{
bottom: 290px;
right: 100px;
width: 200px;
position: absolute;
padding: 10px 26px;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #fff;
cursor:pointer;
font-family: Helvetica, sans-serif;
background-color: #3cf;
}
.Twitterbtn2:hover{
background-color: #0084b4;
}
.Googlebtn2{
bottom: 230px;
right: 100px;
width: 200px;
position: absolute;
padding: 10px 26px;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #fff;
cursor:pointer;
font-family: Helvetica, sans-serif;
background-color: #dc4b38;
}
.Googlebtn2:hover{
background-color: #c83e2e;
}
#contact{
padding: 0px 110px 0px 0px;
}
.label {
display: inline-block;
width:120px;
text-align: right;
padding: 10px;
font-weight:bold;
}
.send{
width: 150px;
left: 590px;
padding: 10px 26px;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #fff;
cursor:pointer;
font-family: Helvetica, sans-serif;
background-color: #3fb8e8;
}
.now{
width: 150px;
left: 125px;
bottom: 230px;
position: absolute;
padding: 10px 26px;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #fff;
cursor:pointer;
font-family: Helvetica, sans-serif;
background-color: #3fb8e8;
}
.now:hover {
background-color: #1baae3;
}
.Social {
height: 40px;
width: 40px;
}
.Social:hover {
-webkit-filter: grayscale(100%);
}
.send:hover {
background-color: #1baae3;
}
#footers
{
height: 120px;
padding: 35px 0px 35px 0px;
background: #444444;
}
#footer
{
height: 200px;
color: #B1B1B1;
}
#footer header
{
margin-bottom: 2px;
font-size: 20px;
font-weight: 400;
color: #FFFFFF;
}
#footer #footerbox
{
position: relative;
left: 520px;
width: 300px;
}
#footerbox2 header
{
margin-bottom: 2px;
font-size: 20px;
font-weight: 400;
color: #FFFFFF;
}
#footerbox2
{
color: #B1B1B1;
position: relative;
left: 60px;
bottom: 130px;
width: 300px;
}
#footerbox2 a:visited
{
color:#B1B1B1;
}
#footerbox2 a:active
{
color:#B1B1B1;
}
#footerbox2 a
{
color:#B1B1B1;
}
#footerbox3
{
color: #B1B1B1;
position: relative;
left: 970px;
bottom: 250px;
width: 300px;
}
#footerbox3 header
{
margin-bottom: 2px;
font-size: 20px;
font-weight: 400;
color: #FFFFFF;
}
.go {
width: 20px;
position: absolute;
bottom: 2px;
padding: 6px 20px;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #fff;
border-radius: 3px;
font-family: Helvetica, sans-serif;
text-decoration: none;
background-color: #3fb8e8;
}
.go:hover {
background-color: #1baae3;
}
#copyright
{
text-align: center;
color: #606060;
}
"FAQ" should sit in a block container (like div) and have a style="text-align:center;" on it.
The questions and answers should sit in a separate container with a style="text-align:left;" in it.
You can put the answers in divs with a style="padding-left:20px" or so.
Remove the align=center from your div that contains the FAQs
<div align="center">
I've updated your fiddle: http://jsfiddle.net/jzxe3/
align="center" is deprecated. you should switch it to a class or ID.
I've updated the JSFiddle with the changes and added 2 lines of CSS at the end.
.content {
padding: 0 20px;
}
.content h1 {
text-align: center;
}
The containing div's attributes has been changed from align="center" to class="content".
The additional CSS above adds padding to that div container to the left and right by 20px, and centers the h1 inside the div using text-align: center.
Let's assume that you wrap your page title within <h1> tags, your questions in <h2> tags and your answers in <p> tags, as in the following HTML snippet:
<h1>FAQ</h1>
<h2>Question</h2>
<p>Answer to the question.</p>
These are all block level elements, for which you can achieve your desired formatting by using something like the following CSS:
h1 { text-align: center; }
h2 { text-align: left; }
p { margin-left: 2ex; }
You can, of course, use <div>s with a class instead of the heading and paragraph elements.
Related
I've trying to make a website just for a home project but having some trouble with the css for mobile.
There seems to be a lot of whitespace surrounding the elements to the right and bottom of the site. I'm newer to the world of CSS so any help would be appreciated.
Screenshot of what chrome shows in developer mode.
#media screen and (max-width:450px) {
body {
margin: 0 0 0 0;
padding: 0 0 0 0;
max-width: 100vw;
overflow-x: hidden;
}
html{scroll-behavior:smooth}
.navbar {
background-color: #008B8B;
position: fixed;
top: 0;
z-index: 100;
width: 100vw;
}
.navbar a {
text-decoration: none;
display: inline-block;
float: center;
padding-bottom: 20px;
}
.logo{
display: none;
}
.loginLogo{
width = 1px;
height = 1px;
visibility: hidden;
}
.navbar-name{
color: #f2f2f2;
font-size:25px;
padding-left: 25%;
font-family: 'Lobster', cursive;
}
.navbar-home{
font-size: 17px;
padding-top: 5px;
padding-right: 10px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-products{
font-size: 17px;
padding-top: 5px;
padding-right: 10px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-about{
font-size: 17px;
padding-top: 5px;
padding-right: 10px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-contact{
font-size: 17px;
padding-top: 5px;
padding-right: 17.5%;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-login{
font-size: 1px;
padding-top: 1px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
visibility: hidden;
}
/* Change the color of links on hover */
.navbar-home:hover {
color: black;
}
.navbar-products:hover {
color: black;
}
.navbar-about:hover {
color: black;
}
.navbar-contact:hover {
color: black;
}
.navbar-login:hover {
color: black;
}
/* Add a color to the active/current link */
.navbar a.active {
background-color: #4CAF50;
color: white;
}
/*--------HOME PAGE------------*/
.homePage{
margin: 0 0 0 0;
padding: 0;
width: 100vw;
height: 820px;
background-image: url(multiGrain.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.homePageH1{
position: absolute;
text-align: center;
overflow: hidden;
white-space: nowrap;
top: 26%;
left:50%;
transform: translateX(-50%) translateY(-50%);
font-size: 40px;
color: white;
}
.homePageH2{
position: absolute;
text-align: center;
display: inline;
top: 28%;
left: 50%;
text-align: center;
transform: translateX(-50%) translateY(-50%);
font-size: 20px;
color: white;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
display: inline-block;
}
.aboutUsButton{
position: absolute ;
text-align: center;
top: 31%;
left:30%;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
transform: translateX(-50%) translateY(-50%);
background-color: rgb(0, 159, 159);
border-radius: 25px;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
text-decoration: none;
}
.ourProductsButton{
position: absolute ;
text-align: center;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
display: inline-block;
top: 31%;
left:70%;
padding: 10px;
padding-right: 18px;
padding-left: 18px;
transform: translateX(-50%) translateY(-50%);
background-color: rgb(0, 159, 159);
border-radius: 25px;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
text-decoration: none;
}
/*-------ABOUT US PAGE----------*/
.aboutUsPage{
margin: 0 0 0 0;
padding: 0px;
background-color: white;
height: auto;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.aboutUsH1{
position: relative;
padding-top: 20px;
padding-left: 20px;
margin: 0px;
text-align: left;
display: block;
width: 90%;
top: 20%;
font-size: 20px;
font-family: 'Lobster', cursive;
color: black;
background-color: rgb(255,255,255);
}
.aboutUsP{
position: relative;
padding-top: 20px;
padding-left: 20px;
padding-bottom: 30px;
margin: 0px;
text-align: left;
float: bottom;
display: block;
width: 90%;
top: 5%;
font-size: 15px;
font-family: 'Lobster', cursive;
color: black;
background-color: rgb(255,255,255);
}
.mixerImage{
position: relative;
object-fit: cover;
width: 100%;
height: 150px;
}
/*--------PRODUCTS PAGE------------*/
.productsPage{
position: relative;
margin: 0px;
padding: 0px;
background-color: white;
height: 300px;
width: auto;
}
.productsH1{
position: relative;
text-align: left;
top: 5%;
left: 4%;
font-size: 25px;
font-family: 'Titillium Web', sans-serif;
color: black;
}
.productsP{
position: relative;
padding: 10px;
padding-top: 15px;
text-align: left;
float: inherit;
width: 45%;
left: 2%;
font-size: 15px;
font-family: 'Titillium Web', sans-serif;
color: black;
background-color: white;
}
.productListButton{
position: absolute ;
text-align: center;
left: 2%;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
background-color: black;
border-radius: 25px;
font-family: 'Titillium Web', sans-serif;
letter-spacing: 5px;
color: white;
text-decoration: none;
}
.slideshowImage1{
position: absolute;
width: auto;
left: 55%;
top: 15%;
height: 100px;
float: right;
margin: 10px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.slideshowImage2{
width = 0px;
height = 0px;
visibility: hidden;
}
/*-------CONTACT US PAGE---------*/
.contactPage{
margin: 0 0 0 0;
padding: 0px;
background-image: url(rollingPin2.JPG);
height: 700px;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-size: 200% 100%;
}
.contactH1{
position: relative;
text-align: center;
overflow: hidden;
white-space: nowrap;
top: 10%;
left:0%;
font-size: 70px;
letter-spacing: 3px;
color: white;
font-family: 'Dancing Script', cursive;
}
.contactP1{
position: relative;
text-align: center;
top: 10%;
left:0%;
font-size: 18px;
color: white;
font-family: 'Slabo 27px', serif;
}
.contactP2{
position: relative;
text-align: center;
top: 10%;
left:0%;
font-size: 18px;
color: white;
font-family: 'Slabo 27px', serif;
}
.contact-form{
position: relative;
top: 15%;
width: 80%;
left: 47.5%;
transform: translateX(-50%);
}
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
font-family: 'Titillium Web', sans-serif;
border-radius: 4px; /* Rounded borders */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: none; /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
width: 105%;
background-color: #008B8B;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: black;
}
.nameInput{
position: relative;
top: 0px;
color: white;
}
.emailInput{
position: relative;
top: 5px;
color: white;
}
.messageInput{
position: relative;
top: 5px;
color: white;
}
.submitButton{
position: relative;
top: 5px;
}
/*--------FOOTER---------*/
.facebookLogo{
width: 0%;
height: 0%;
visibility: hidden;
}
.footer {
width: 0px;
height: 0px;
visibility: hidden;
}
.footerp1{
width: 0px;
height: 0px;
visibility: hidden;
}
.footerp2{
width: 0px;
height: 0px;
visibility: hidden;
}
.footerp3{
width: 0px;
height: 0px;
visibility: hidden;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Slabo+27px&display=swap" rel="stylesheet">
<title>Doughboys Bakery</title>
<link href="StyleSheet.css" rel="stylesheet">
</head>
<body>
<header class="site-header">
<nav class="navbar">
<img class = "logo" src="Doughboys Logo - Website Version.png" alt="Logo" width="80"height="45.109">
<a class="navbar-name" href="">Doughboy's Bakery.</a>
<a class="navbar-login" href="">Log In</a>
<img class = "loginLogo" src="loginLogo2.png" onmouseover="this.src='loginLogo2Black.png';" onmouseout="this.src='loginLogo2.png';" width="50"height="28.889"/>
<a class="navbar-contact" href="#contactPage">Contact</a>
<a class="navbar-products" href="#productsPage">Products</a>
<a class="navbar-about" href="#aboutUsPage">About</a>
<a class="navbar-home" href="#homePage">Home</a>
</nav>
</header>
<div class = "homePage" id="homePage">
<h1 class="homePageH1">Quality or Quantity</h1>
<h2 class="homePageH2">We're here to give you both</h2>
<div class = "homePageButtons">
<a class="aboutUsButton" href="#aboutUsPage">About Us</a>
<a class="ourProductsButton" href="#productsPage">Our Products</a>
</div>
</div>
<div class = "aboutUsPage" id="aboutUsPage">
<div class = "aboutUsText">
<h1 class="aboutUsH1">Who we are.</h1>
<p class="aboutUsP">Doughboys Bakery is a locally owned and operated wholesale bakery located near the city centre of Palmerston North. We produce traditional bakery goods like the classic Mince and Cheese Pies and Custard Squares. <br/><br/>We deliver actively in the Manawatu-Whanganui, Horowhenua & Wairarapa regions. (T's & C's Apply)<br/><br/>Use the contact section below to see how we can help suit your baking needs.</p>
</div>
</div>
<div class = "productsPage" id="productsPage">
<h1 class="productsH1">What we make.</h1>
<p class="productsP">At Doughboys' we supply traditionally sold bakery goods all the way from the classic Mince and Cheese Pie to the humble Scone.</p>
<button class="productListButton" type="submit" onclick="window.open('ProductList.doc')">Full Product List</button>
<div id="slideshow">
<div>
<img class="slideshowImage1" src="fruitPies.jpeg">
</div>
<div>
<img class="slideshowImage2" src="pies.jpg">
</div>
</div>
</div>
<div class="contactPage" id="contactPage">
<h1 class="contactH1">Contact Us.</h1>
<p class="contactP1">ADDRESS: 15 Johnston St </p>
<p class="contactP2">TEL: (06) 123 1234 | doughboys#gmail.net.nz</p>
<div class = "contact-form">
<form id = "contact-form" method="post" action="contactForm.php">
<input class= "nameInput" type="text" id="name" name="name" placeholder="Your name...">
<input class= "emailInput" type="text" id="email" name="email" placeholder="Your email...">
<textarea class= "messageInput" id="message" name="message" placeholder="Write something..." style="height:100px"></textarea>
<input class= "submitButton" type="submit" value="Submit">
</form>
</div>
</div>
<div class="footer">
<a href="https://www.facebook.com/Doughboys-Bakery-Ltd-216199385212667">
<img class = "facebookLogo" src="facebookLogo.png" >
</a>
<p class="footerp1">(06) 123 1234</p>
<p class="footerp2">doughboys#gmail.net.nz</p>
<p class="footerp3">15 Johnston St</p>
</div>
</body>
</html>
I am having a little bit of trouble figuring this out.
On the site I am working on, in between the two sections and footer, there seems to be a blank space with the background color showing, and I can't figure out how to get rid of that so the sections and footer sit on top of each other with no space between them. If someone could check out the code, it'll be much appreciated.
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: #5CDB95;
font-family: 'Gamja Flower', sans-serif;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: black;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-left: 20px;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
font-size: 20px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
margin-bottom: 40px;
text-align: center;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
font-size: 20px;
text-align: center;
}
footer {
background-color: black;
padding: 80px 0 80px;
margin: 50px 0px 50px;
text-align: center;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">
<title>Raijin Studios</title>
</head>
<header>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle" onmouseover="changeColor(this)" onmouseout="changeColor(this)">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
</div>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" maxlength="256" required="" class="field"><input class="button" type="submit" value="Get Notified"></form>
</div>
</header>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns to the
help of a strange girl who finds him and helps him remeber who he was and where he came from.</p>
</section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>
<footer>
<p>©Raijin Studios 2018.</p>
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
1) you can just delete margins for sections and increase paddings instead;
OR
2) You can make body background white, and than change add background color and padding bottom to sign-up-form
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: 'Gamja Flower', sans-serif;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: black;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-left: 20px;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
font-size: 16px;
text-align: center;
background: #5CDB95;
padding-bottom: 50px;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
font-size: 20px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
margin-bottom: 40px;
text-align: center;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
font-size: 20px;
text-align: center;
}
footer {
background-color: black;
padding: 80px 0 80px;
margin: 50px 0px 50px;
text-align: center;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">
<title>Raijin Studios</title>
</head>
<header>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
</div>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" maxlength="256" required="" class="field"><input class="button" type="submit" value="Get Notified"></form>
</div>
</header>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns to the
help of a strange girl who finds him and helps him remeber who he was and where he came from.</p>
</section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>
<footer>
<p>©Raijin Studios 2018.</p>
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
Use Margin for section margin: 0px;
There you go.
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: #5CDB95;
font-family: 'Gamja Flower', sans-serif;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: black;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-left: 20px;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
font-size: 20px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
text-align: center;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
padding: 80px 0 80px;
background-color: white;
font-size: 20px;
text-align: center;
margin-top:-50px;
}
footer {
background-color: black;
padding: 80px 0 80px;
margin: 50px 0px 50px;
text-align: center;
font-size: 20px;
}
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%;
}
I correctly linked my pdf to my project and spelled everything right but when I hover over it and click it, nothing happens. Im not sure if its something to do with the positioning of everything?
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
/*----------header styles-------------*/
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 100%;
padding-left: 3em;
position: relative;
height: 15%;
box-sizing: border-box;
padding-top: 1em;
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 50%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
/*----------hero image styles-------------*/
#hero{
padding-top: 25em;
width: 100%;
height: 30em;
position: relative;
z-index: -1;
}
#heroImage
{
top: 9%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 34em;
top: -5%;
margin-left: 30%;
z-index: 2;
position: relative;
clear: left;
}
h2{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px #000000;
text-align: center;
}
h3{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 30px;
color: white;
opacity: 1.0;
text-shadow: 3px 3px 2px #000000;
text-align: center;
}
a.down{
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-decoration: none;
color: #181b1e;
background: #45CCCC;
position: relative;
padding: 0.6em 1em;
font-size: 1.2em;
-webkit-border-radius: 6px;
width: 100%;
}
a.down:hover{
text-decoration: underline;
}
<body>
<div id="header">
<a href="index.html"><div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Notes</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
<h3>Graphic Artist | Web Designer</h3>
View Resume
</div>
</div>
It's the z-index -1 on #hero - it's basically making it under the body. Change that to 0 or remove it and you should be good.