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;
}
Related
So my mission is to get the gray rectangle (<div class="brand"> </div>) to go automatic below the others, right now it's stuck between the header and my two other body divs. As I am a beginner I have no idea about how to fix this, i've searched a little and tried to add a clear: both, but that didn't solve my problem. Would love if someone out there can take a look at my code and see what's wrong. I'm sorry for no structure in my code.
Thanks,Filip
:D
CODE (CSS FIRST, THEN HTML):
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: #fff;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-search{
color: black;
font-size: 14px;
transform:scaleX(-1);
margin-left: 50px;
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
nav i:hover{
color: red;
cursor: pointer;
}
.wrapper{
position: relative;
height: 100%;
width: 100%;
}
.bild1{
height: 350px;
width: 600px;
margin-top: 100px;
margin-left: 80px;
position: absolute;
z-index: 4;
background-image: url('Img/KBA.jpg');
background-position: 10% 30% ;
background-size: 180%;
}
.bild2{
height: 350px;
width: 600px;
margin-top: 140px;
margin-left: 120px;
z-index: 3;
position:absolute;
background-color: #3D6BB8;
}
.entrytext{
float: right;
margin-right: 90px;
margin-top: 175px;
clear: both;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand{
height: 100px;
weight: 400px;
background-color: gray;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<i class="fas fa-search"></i>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
</div>
<div class="bild1">
</div>
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div>
<div class="brand">
</div>
</body>
</html>
Sorry for no structure ;D
//Filip
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: #fff;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-search{
color: black;
font-size: 14px;
transform:scaleX(-1);
margin-left: 50px;
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
nav i:hover{
color: red;
cursor: pointer;
}
.package {
width: 80%;
margin: 30px auto;
}
.bild2 {
height: 350px;
width: 50%;
background-color: #3D6BB8;
float: left;
}
.entrytext {
margin-left: 30px;
float: left;
margin-bottom:70px;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand {
height: 100px;
background-color: gray;
clear: both;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<i class="fas fa-search"></i>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
</div>
<div class="bild1">
</div>
<div class="package">
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div></div>
<div class="brand">
</div>
</body>
</html>
Add position its styling and add botom:0;
I am struggling to make the form on the page fixated to it's current position and doesn't want it to move while scrolling the page. it should be there always at it's current position. the css styling for the form {position: fixed} doesn't work. it makes the whole form disappear from the page. Tried different techniques but none did worked.
even tried giving the form element a {z-index: 1000} but that also didn't helped.
any help would be appreciated.
.rafting-and-camping{
padding-left: 130px;
height: 47px;
width: 724px;
color: #3C4858;
font-family: Roboto;
font-size: 40px;
font-weight: bold;
line-height: 47px;
}
.ganga-river-camp-by {
padding-left: 130px;
height: 48px;
width: 500px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
line-height: 24px;
}
.stories {
padding-left: 190px;
height: 16px;
width: 63px;
color: #3C4858;
font-family: Roboto;
font-size: 14px;
line-height: 16px;
display: inline;
}
.hours {
padding-left: 78px;
height: 16px;
width: 49px;
color: #8492A6;
font-family: Roboto;
font-size: 14px;
line-height: 16px;
display: inline;
}
.viewed-135-times-tod {
padding-left: 78px;
height: 19px;
width: 171px;
color: #8492A6;
font-family: Roboto;
font-size: 16px;
line-height: 19px;
display: inline;
}
.starts-from-1600 {
padding-left: 420px;
height: 42px;
width: 174px;
color: #3C4858;
font-family: "PingFang SC";
font-size: 16px;
line-height: 22px;
display: inline
}
.mask {
margin-top: 2%;
padding-left: 130px;
height: 500.62px;
width: 1020px;
}
.rectangle-2 {
margin-left: 10%;
height: 90px;
width: 250px;
border: 1px solid #C0CCDA;
display: inline-block;
}
.rectangle-3 {
height: 90px;
width: 250px;
border: 1px solid #C0CCDA;
display: inline-block;
}
.scuba-price {
height: 0.51%;
width: 4.53%;
color: #3C4858;
font-family: "PingFang SC";
font-size: 20px;
font-weight: 500;
line-height: 28px;
}
.bali-scuba-divers {
height: 19px;
width: 123px;
color: #3C4858;
font-family: Roboto;
font-size: 16px;
line-height: 19px;
}
.line-2 {
margin-left: 130px;
box-sizing: border-box;
height: 0.04%;
width: 47.34%;
border: 1px solid #E5E9F2;
}
.what-to-expect {
padding-left: 130px;
padding-top: 20px;
height: 24px;
width: 134px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 500;
line-height: 24px;
}
.let-s-sail-in-a-rega {
padding-left: 130px;
height: 125px;
width: 600px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 300;
line-height: 25px;
}
.what-s-included {
padding-left: 130px;
height: 24px;
width: 141px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 500;
line-height: 24px;
}
.tea-a-vegetarian-l {
padding-left: 130px;
height: 0.44%;
width: 24.77%;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 300;
line-height: 24px;
}
.materials-and-tools {
padding-left: 130px;
height: 71px;
width: 606.29px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 300;
line-height: 25px;
}
.pre-requisites {
padding-left: 130px;
height: 24px;
width: 124px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 500;
line-height: 24px;
}
.all-participants-sho {
padding-left: 130px;
height: 23px;
width: 606.29px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 300;
line-height: 23px;
}
.where-we-ll-meet {
padding-left: 130px;
height: 24px;
width: 153px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 500;
line-height: 24px;
}
.being-born-in-the-wr {
padding-left: 130px;
height: 161px;
width: 606.29px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 300;
line-height: 23px;
}
.rectangle-4 {
padding-left: 130px;
height: 6.14%;
width: 47.34%;
}
.contact-operator {
padding-left: 130px;
height: 24px;
width: 154px;
color: #1FB6FF;
font-family: Roboto;
font-size: 20px;
font-weight: 500;
line-height: 24px;
}
.cancellation-and-res {
padding-left: 130px;
height: 0.44%;
width: 25.7%;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 500;
line-height: 24px;
}
.any-trip-or-experien {
padding-left: 130px;
height: 48px;
width: 606.29px;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 300;
line-height: 24px;
}
.notes {
padding-left: 130px;
height: 0.44%;
width: 4.22%;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 500;
line-height: 24px;
}
.we-ll-recommend-you {
padding-left: 130px;
height: 1.32%;
width: 47.37%;
color: #3C4858;
font-family: Roboto;
font-size: 20px;
font-weight: 300;
line-height: 24px;
text-align: justify;
}
/*form style*/
.form {
max-width: 400px;
width: 100%;
margin-top: -95%;
margin-left: 60%;
position: relative;
overflow-y: auto;
}
#contact {
background: #F9F9F9;
padding: 25px;
margin: 150px 0;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#contact h3 {
display: block;
font-size: 30px;
font-weight: 300;
margin-bottom: 10px;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="date"]{
width: 93%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact select {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="date"]:hover,
#contact select {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
#contact button[type="submit"]:hover {
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.rectangle-7 {
height: 57px;
width: 350px;
background-color: #273444;
}
.price {
height: 42px;
width: 87px;
color: #FFFFFF;
font-family: "PingFang SC";
font-size: 30px;
font-weight: 500;
line-height: 42px;
}
/* form end*/
<!DOCTYPE html>
<html lang="en">
<head>
<title>TripShire</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="home.css">
</head>
</script>
<body>
<p class="rafting-and-camping">Rafting and camping by the Ganges</p>
<p class="ganga-river-camp-by"><b>Ganga River .</b> Camp by the river side and raft through the ice cold ganges</p>
<p class="stories">73 Stories</p>
<p class="hours">6 hours</p>
<p class="viewed-135-times-tod">Viewed 135 times today</p>
<p class="starts-from-1600">Starts from ₹1600</p>
<img class="mask" src="rafting.jpg">
<div class="rectangle-2">
<p class="scuba-price">₹1200</p>
<p class="bali-scuba-divers">Bali Scuba Drivers</p>
</div>
<div class="rectangle-3">
<p class="scuba-price">₹2500</p>
<p class="bali-scuba-divers">White Water Tours</p>
</div>
<div class="rectangle-3">
<p class="scuba-price">₹1500</p>
<p class="bali-scuba-divers">Bali Scuba Drivers</p>
</div>
<div class="rectangle-3">
<p class="scuba-price">₹3200</p>
<p class="bali-scuba-divers">Bali Scuba Drivers</p>
</div>
<hr class="line-2">
<h2 class="what-to-expect"><b>What to expect</b></h2>
<p class="let-s-sail-in-a-rega">Let's sail in a regatta sailboat built for a regatta in France and </br> remodeled. The idea is we enjoy Barcelona in a different and </br> adventurous way. We'll experiment the feeling of sailing in a boat that </br> can get high speed. The experience includes a selection of </br> "embutidos"(kind of Catalan meat) specially selected.</p>
<hr class="line-2">
<h2 class="what-s-included"><b>What's included</b></h2>
<h3 class="tea-a-vegetarian-l">Tea and a vegetarian lunch</h3>
<p class="materials-and-tools">Materials and tools </br> Everything will be provided. All animals are ethically sourced and were not killed specially for these workshops</p>
<hr class="line-2">
<h3 class="pre-requisites"><b>Pre requisites</b></h3>
<p class="all-participants-sho">All participants should be greater than 12 years of age</p>
<hr class="line-2">
<h2 class="where-we-ll-meet"><b>Where we'll meet</b></h2>
<p class="being-born-in-the-wr">Being born in the wrong country has always taken a toll on Lauren </br> and Max. With the urge of reliving the golden years, they have been </br> hosting 18th century parties around the world to fill the void. In the </br> real world, Lauren is a fashion stylist and Max works in a video </br> production. </br>
</br>
Address: Terrace Restaurant, Okura Macau, 28F
</p>
<img class="rectangle-4" src="rafting.jpg">
<p class="contact-operator">Contact Operator</p>
<hr class="line-2">
<h2 class="cancellation-and-res"><b>Cancellation and rescheduling policy</b></h2>
<p class="any-trip-or-experien">Any trip or experience can be canceled and fully refunded within 24 </br> hours of purchase.</p>
<hr class="line-2">
<h2 class="notes"><b>Notes</b></h2>
<p class="we-ll-recommend-you">We recommend ypu to get a jumper or something to keep you warm </br> (even in summer). This is a weather-dependent experience. This Experience is subject to sailing and weather conditions.</p>
<!-- Form -->
<div class="container form">
<form id="contact" action="" method="post" >
<h3 class="rectangle-7">₹2500 per person</h3>
<fieldset>
<p>Choose your date</p>
<input type="date" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<p>Guests</p>
<select id="guests" name="guests">
<option value="australia">5 guest</option>
<option value="canada">4 guest</option>
<option value="usa">3 guest</option>
<option value="usa">2 guest</option>
<option value="usa">1 guest</option>
</select>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
<!-- form end -->
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
document.getElementById("contact").style.postion = "fixed ";
}
</body>
</html>
Did you set any styles for the position after setting position:fixed?
eg.
#contact {
/* This will position the form in the top, right */
position: fixed;
top: 0;
right: 0;
/*===============================================*/
background: #F9F9F9;
padding: 25px;
margin: 150px 0;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
You have set too much margin to .form that it flows out of window
.form {
max-width: 400px;
width: 100%;
/* removed this
margin-top: -95%;
margin-left: 60%;
*/
position: fixed;
top: 0;
left: 0;
overflow-y: auto;
}
form {
margin: 0;
}
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 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 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.