Please help!
I tried many tricks to remove the white space under my footer but none of them solved my problem. I noticed that the white space is only visible in the pages with text, p and h1 tags. Any help is highly appreciated.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Olive Green Studio</title>
<link href="oliva.css" rel="stylesheet" type="text/css" />
<!—[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]—>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header"><!-- end #header -->
<div id="logo">
<a href="index.html">
<img src="olivaimages/olivegreenlogoweb.png" border="none"/>
</a>
</div>
<div id="sidebar1">
<ul>
<li>Home</li>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- end #sidebar1 --></div>
</div>
<div id="mainContent">
<h1>Contact Us </h1>
<p>If you need a creative help or want to take your project to the next level please don't hesitate to drop us a line.</p>
<a class="worklinks" href= "mailto:info#olivegreenstudio.com"> info#olivegreenstudio.com</a>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div class="clearfooter"></div>
<!-- end #container -->
</div>
<div id="footerframe">
<div id="footer">
<div id="footer2">
<div id="address">Khobar<br> Saudi Arabia </div>
<div id="contact">
<strong>Services:</strong><br> Logos<br>Branding<br>Identity<br>Collaterals<br>Packaging<br> Web Design & Development <br>
</div>
<div id="email">
If you have a project inquiry, we will be happy to answer you <a class="contactlink" href="mailto:info#olivegreenstudio.com"> here.</a>
</div>
<div class="social">
<div class="twitter">
<a href="https://twitter.com/OliveGreenSTU" />
<img src="olivaimages/twitterbirdwebgreen.png" onmouseover="this.src='olivaimages/twitterbirdweb-lightgreen.png'" onmouseout="this.src='olivaimages/twitterbirdwebgreen.png'" />
</div>
</a>
<div id="pinterest">
<a href="http://pinterest.com/olivegreenstu/">
<img src="olivaimages/pinterestwebgreen.png" onmouseover="this.src='olivaimages/pinterestweb-lightgreen.png'"
onmouseout="this.src='olivaimages/pinterestwebgreen.png'" />
</a>
</div>
<div class="copywrite"> © 2013 Olive Green. All rights reserved.</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#charset "UTF-8";
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #FFFFFF;
height: 100%;
}
.twoColFixLtHdr #header {
height: 170px;
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: center center;
margin: 0px;
padding: 0;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #5A6219;
text-decoration: none;
font-style: normal;
font-weight: normal;
padding-bottom: 20px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #908B23;
text-decoration: none;
line-height: 1.5em;
margin-bottom: 30px;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
color: #908B23;
text-decoration: none;
margin: 0px;
}
.twoColFixLtHdr #container {
width: 900px;
text-align: left; /* this overrides the text-align: center on the body element. */
min-height: 100%;
margin-top: 0;
margin-right: auto;
margin-left: auto;
position: relative;
margin-bottom: -215px;
height: 100%;
}
.twoColFixLtHdr #mainContent {
height: 100%;
background-color: #FFF;
float: left;
width: 100%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
padding-top: 50px;
padding-bottom: 70px;
}
.workmaincontent {
height: 100%;
background-color: #FFF;
float: left;
width: 100%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
padding-top: 50px;
padding-bottom: 70px;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.twoColFixLtHdr #sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 300px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
margin-top: 70px;
background-color: #FFFFFF;
height: 30px;
}
#sidebar1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 200px;
line-height: 1.5em;
text-decoration: none;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
width: 500px;
}
#sidebar1 ul {
background-color: #FFFFFF;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#sidebar1 li {
display: run-in;
list-style-type: none;
}
#sidebar1 a {
display: run-in;
text-decoration: none;
color: #918C10;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
padding: 5px;
float: left;
width: 65px;
}
#sidebar1 a:hover {
color: #5A6219;
}
.worklinks{
font-family: Arial, Helvetica, sans-serif;
color: #5A6219;
text-decoration: none;
}
.worklinks:hover{
font-family: Arial, Helvetica, sans-serif;
color: #908B23;
text-decoration: none;
}
#print{
height: 100%;
background-color: #FFF;
width: 730px;
float: left;
padding-right: 15px;
padding-left: 15px;
margin-left: 85px;
margin-right: 85px;
}
#web{
height: 100%;
background-color: #FFF;
width: 730px;
float: left;
padding-right: 15px;
padding-left: 15px;
margin-left: 85px;
margin-top: 50px;
margin-bottom: 50px;
}
#packaging{
background-color: #FFF;
height: 100%;
width: 730px;
float: left;
padding-right: 15px;
padding-left: 15px;
margin-left: 85px;
}
.imagetitles a {
text-decoration: none;
font-family: "Century Gothic";
font-size: 25px;
font-style: normal;
font-weight: normal;
color: #00CCCC;
}
#printtitle{
bottom: -5px;
left: 333px;
}
#webtitle{
position: absolute;
left: 333px;
top: 521px;
}
#packagingtitle{
position: absolute;
left: 317px;
top: 823px;
width: 89px;
}
#bigimages{
width: 570px;
height: 100%;
}
.imagestalk {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
font-size: 14px;
line-height: 1.5em;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 20px;
}
.thumbnails {
border: 5px solid #666666;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
color: #5A6219;
text-decoration: none;
}
h3 a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
font-style: normal;
font-weight: normal;
text-decoration: none;
}
h3 a:visited {
color: #D0BA0B;
text-decoration: underline;
}
h3 a:hover {
color: #5A6219;
}
h3 a:active {
color: #579835;
}
.back{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
padding-left: 520px;
}
.back a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #666666;
}
.back a:visited {
color: #666666;
text-decoration: none;
}
.back a:hover {
color: #000000;
text-decoration: none;
}
.back a:active {
color: #333333;
text-decoration: none;
}
.source{
font-size: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
}
.workimage {
height: 150px;
width: 200px;
float: left;
margin: 20px;
}
img {
border: 0;
}
#logo {
height: 150px;
width: 300px;
float: left;
}
#footerframe {
width: 100%;
background-color: #AEA03A;
height: 215px;
position: relative;
float: right;
}
#footer {
width: 900px;
font-family: Verdana, Arial, Helvetica;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
margin-right: auto;
margin-left: auto;
background-color: #AEA03A;
float: none;
position: relative;
height: 215px;
}
#footer2 {
width: 100%;
background-color: #AEA03A;
padding-top: 30px;
float: left;
position: relative;
}
#address {
height: 50px;
width: 180px;
background-color: #AEA03A;
float: left;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
color: #5A6219;
line-height: 1.5em;
}
#contact {
height: 130px;
width: 180px;
background-color: #AEA03A;
float: left;
text-align: left;
margin-right: 180px;
margin-left: 180px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #5A6219;
text-decoration: none;
line-height: 18px;
}
#email {
background-color: #AEA03A;
height: 50px;
width: 180px;
float: right;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #5A6219;
text-decoration: none;
}
.social {
background-color: #AEA03A;
height: 35px;
width: 100%;
float: right;
margin-top: 20px;
}
#pinterest {
height: 20px;
width: 20px;
float: left;
background-repeat: no-repeat;
margin-left: 15px;
margin-bottom: 15px;
}
.twitter {
height: 20px;
width: 20px;
background-repeat: no-repeat;
float: left;
margin-bottom: 15px;
}
.copywrite {
font-size: 11px;
font-weight: lighter;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
text-align: right;
width: 300px;
background-color: #AEA03A;
float: right;
height: 15px;
color: #5A6219;
vertical-align: middle;
margin-bottom: 10px;
margin-top: 5px;
}
.contactlink {
font-family: Arial, Helvetica, sans-serif;
color: #5A6219;
text-decoration: none;
}
.contactlink a {
font-family: Arial, Helvetica, sans-serif;
color: #5A6219;
text-decoration: none;
}
.contactlink:hover {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
}
h4 {
color: #5A6219;
}
.indeximg {
height: 100px;
width: 900px;
background-repeat: no-repeat;
background-position: center top;
background-image: url(../olivaimages/indeximg.png)
}
.indexwrap {
height: 100%;
width: 810px;
padding-left: 90px;
}
#wrapper {
min-height: 100%;
}
.clearfooter {
height: 215px;
clear: both;
}
try this
#footerframe {
background-color: #AEA03A;
bottom: 0;
float: right;
height: 223px;
position: absolute;
width: 100%;
}
Replacing the footers 900px with 100% should do the trick.
I think you'll need implement a sticky footer technics by setting html,body height to 100% and
setting id#container as the following:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
height: auto !important;
min-height: 100%;
height: 100%;
}
example
Related
How would i be able to align my navigation links to the header?
This is what i currently have:
But, I'd really like to have the links vertically aligned within the header, like this:
How would i do this?
Below is my CSS & HTML.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
}
.wrapper {
width: 1100px;
max-width: 90%;
margin: 0 auto;
}
#top_header {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
background-color: #26ABF5;
height: 70px;
vertical-align: middle;
}
#logo_top {
display: inline-block;
width: 53px;
padding-top: 8px;
}
#main_nav {
display: inline-block;
font-size: 12px;
padding-left: 170px;
}
#main_nav a {
color: #fff;
font-weight: 400;
text-decoration: none;
margin-left: 6em;
}
.button {
float: right;
justify-content: center;
display: flex;
width: 101px;
margin-top: 14px;
padding-top: 9px;
padding-bottom: 9px;
border-radius: 2px;
background-color: #fff;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color: #26abf5;
font-size: 13px;
font-weight: 600;
}
<body>
<header id="top_header">
<div class="wrapper">
<img id="logo_top" draggable="false" src="images/logo1.png">
<nav id="main_nav">
FORSIDE
HVAD TILBYDER VI?
PRISER
OM OS
</nav>
<a class="button" href="#">LOG IND</a>
</div>
</body>
Use line-height for vertical-align. Im add the line in #main_nav.
Edit: add float: left; for your logo image.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
}
.wrapper {
width: 1100px;
max-width: 90%;
margin: 0 auto;
}
#top_header {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
background-color: #26ABF5;
height: 70px;
vertical-align: middle;
}
#logo_top {
display: inline-block;
float: left;
width: 53px;
padding-top: 8px;
}
#main_nav {
display: inline-block;
font-size: 12px;
line-height: 70px;
padding-left: 170px;
}
#main_nav a {
color: #fff;
font-weight: 400;
text-decoration: none;
margin-left: 6em;
}
.button {
float: right;
justify-content: center;
display: flex;
width: 101px;
margin-top: 14px;
padding-top: 9px;
padding-bottom: 9px;
border-radius: 2px;
background-color: #fff;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color: #26abf5;
font-size: 13px;
font-weight: 600;
}
<body>
<header id="top_header">
<div class="wrapper">
<img id="logo_top" draggable="false" src="images/logo1.png">
<nav id="main_nav">
FORSIDE
HVAD TILBYDER VI?
PRISER
OM OS
</nav>
<a class="button" href="#">LOG IND</a>
</div>
</body>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<!--<meta name="viewport" content="width=960">
<meta name="viewport" content="width=480">-->
<title>Habitat for Humanity Restore | Home</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div class="headimg">
<h2 class="slogan1">HOME IMPROVEMENT & FURNITURE OUTLET</h2>
<h3 class="slogan2"> A clean, happy place to find treasures</h3>
</div>
</header>
<!--
<div class="socialmedia"><img src="images/facebook-14.png" width="40" height="52" alt="FacebookSM">
<img src="images/Pinterest-icon.png" width="40" height="52" alt="PinterestLogo">
<img src="images/twitter-icon.png" width="40" height="52" alt="TwitterLogo"></div>
-->
</div>
<div id="nav">
<ul>
<li>SHOP</li>
<li>DONATE</li>
<li>VOLUNTEER</li>
<li>CONTACT US</li>
</ul>
</div>
<!-- Tony please fix text shadows, sidebar shadows and nagivation effects -->
<div id="sidebarleft">
<ul class="sidebartextleft">
<li class="pleftsidebar">ABOUT US</li>
<li class="pleftsidebar">REPURPOSED </li>
<li class="pleftsidebar">DONATE</li>
<li class="pleftsidebar">VOLUNTEER</li>
<li class="pleftsidebar">UNITED WAY </li>
<li class="pleftsidebar">NEWSLETTER</li>
<li class="pleftsidebar">EMAIL US</li>
<li class="pleftsidebar">SEND US PHOTOS</li>
<li class="pleftsidebar">MAP TO RESTORE</li>
<li class="pleftsidebar">DIRECTIONS</li>
</ul>
<!--<p>CONTACT US </p>-->
<div class="sidebartextleftsmall">
Restore Facility<br/>
200 South Larkin<br/>
Joliet, IL. 60436<br/>
P: 815-714-7100<br/>
E: info#restorejoliet.org
</div>
</div>
<!--</div>-->
<div id="sidebarright">
<div class="sidebartextright">
<p>FEATURED THIS WEEK:</p>
</div>
<div class="rightsidebarimg">
<div class="featuredimg">
<img src="images/furniture for sale.jpg" width="265" height="457" alt="furniture for sale">
</div>
</div>
<div class="sidebartextrightsmall"><span>Save our contact info to your smartphone</span>
<img src="images/scancode.jpg" width="125" height="126" alt="Habitat Restore Contact Information Smartphone Code">
</div>
</div>
<div id="content">
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="images/restorelocationtext.png" alt="Will County Habitat For Restore Location">
</figure>
<figure>
<img src="images/slider2.jpg" alt="Worker setting up bookshelf">
</figure>
<figure>
<img src="images/slider3.jpg" alt="Warehouse selection">
</figure>
<figure>
<img src="images/slider4.JPG" alt="More Ware Selection Tables and fans">
</figure>
<figure>
<img src="images/slider5.JPG" alt="Household furniture warehouse selection">
</figure>
</figure>
</div>
<div id="box">
<img src="images/habitatBox1.png" alt="Shop for repurposed materials" class="center" />
<img src="images/habitatBox2.png" alt="Donate Heart" class="center" />
<img src="images/habitatBox3.png" alt="Shop for repurposed materials" class="center" />
</div>
</div>
<div id="sidebarbottom">
<ul class="sidebartextleft">
<li class="pleftsidebar">ABOUT US</li>
<li class="pleftsidebar">REPURPOSED</li>
<li class="pleftsidebar">DONATE</li>
<li class="pleftsidebar">VOLUNTEER</li>
<li class="pleftsidebar">UNITED WAY</li>
<li class="pleftsidebar">NEWSLETTER</li>
<li class="pleftsidebar">EMAIL US</li>
<li class="pleftsidebar">SEND US PHOTOS</li>
<li class="pleftsidebar">MAP TO RESTORE</li>
<li class="pleftsidebar">DIRECTIONS</li>
</ul>
</div>
<div id="footer">2015 Will County Habitat for Humanity ReStore. All Rights Reserved.</div>
</div>
</body>
</html>
I'm having an issue in which my content section suddenly stops before reaching the footer causing a black underlay to show up, I've looked into editing the wrapper size and height of the content container but cannot figure out what the issue may be, please help me out
This below image is what the page is complete page should look like
CSS
#media only screen and (min-width: 960px) {
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
header {
height: 106px;
background-color: #d9e6ef;
}
#wrapper {
width: 100%;
}
#nav {
height: 52px;
background-color: #51b948;
}
#nav ul {
padding: 7px;
text-align: center;
font-size: 24px;
font-style: normal;
font-weight: bold;
color: #FFF;
}
#nav ul li {
display: inline-block;
list-style-type: none;
margin: 0 15px;
}
#nav ul li a {
display: inline-block;
text-align: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color: #F4E9E9;
text-decoration: none;
background-color: #406718;
padding: 5px;
border: thin solid #030303;
width: 170px;
}
.socialmedia {
float: right;
margin-right: 45px;
padding: 8px 8px 0;
}
a {
text-decoration: none;
}
a:visited {
color:#FFF !important;
}
#sidebarleft {
float: left;
width: 20%;
height: 784px;
background-color: #005596;
}
#sidebarright {
float: right;
width: 20%;
height: 784px;
background-color: #005596;
}
#sidebarbottom {
display: none;
}
.sidebartextleft {
font-family: Arial, Helvetica, sans-serif;
padding-top: 30px;
margin-left: 25px;
font-size: 20px;
color: #FFF;
font-weight: bolder;
height: 368px;
font-style: normal;
}
.sidebartextright {
position: relative;
font-family: Arial, Helvetica, sans-serif;
padding: 15px 0 20px 5px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 20px;
height: 30px;
font-style: normal;
}
.sidebartextlefthead {
font-family: Arial, Helvetica, sans-serif;
font-style: bold;
font-size: 22px;
padding-bottom: 20px;
font-weight: bold;
}
.pleftsidebar {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #d5b89a;
padding-top: 4px;
padding-bottom: 3px;
width: 80%
}
#content {
width: 60%;
height: 768px;
float: left;
}
#footer {
width: 100%;
padding-top: 10px;
bottom: 0;
text-align: center;
background-color: #dbf1da;
font-weight: bold;
color: #000;
}
.rightsidebarimg {
text-align: center;
padding: 0 15px;
}
.sidebartextrightsmall {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
font-size: 20px;
width: 90%;
height: 200px;
font-style: normal;
margin: 60px auto 0;
}
.sidebartextrightsmall span {
display: block;
padding-bottom: 20px;
}
.sidebartextrightsmall img {
max-width: 125px;
height: auto;
text-align: center;
}
.sidebartextleftsmall {
margin: 200px 1px 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #c7b199;
font-size: 17px;
font-weight: normal;
width: 100%;
height: auto;
font-style: normal;
}
.featuredimg img {
width: 100%;
height: auto;
}
#box {
text-align: center;
}
img.center {
display: inline-block;
width: 30%;
padding: 0 8px;
}
.headimg {
height: 106px;
margin-left: 100px;
display: inline-block;
background: url(images/head.png) no-repeat;
}
h2.slogan1 {
padding: 53px 0 0 220px ;
font-weight: bold;
font-size: 24px;
}
h3.slogan2 {
padding-left: 220px ;
font-style: italic;
font-weight: bold;
font-size: 20px;
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0;
background: #101010;
}
div#captioned-gallery {
width: 90%;
overflow: hidden;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
margin: 40px auto;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff;
width: 100%;
padding: .6rem;
}
/* Bracket below closes desktop media query */
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
header {
height: 106px;
background-color: #d9e6ef;
}
#wrapper {
width: 100%;
}
#header {
height: 106px;
background-color: #d9e6ef;
}
#nav {
height: 52px;
background-color: #51b948;
}
#nav ul {
padding: 9px;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #FFF;
}
#nav ul li {
display: inline-block;
list-style-type: none;
margin: 0 15px;
}
#nav ul li a {
display: inline-block;
text-align: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color: #F4E9E9;
text-decoration: none;
background-color: #406718;
padding: 5px;
border: thin solid #030303;
width: 140px;
}
.socialmedia {
float: right;
margin-right: 45px;
padding: 8px 8px 0;
}
#sidebarleft {
float: left;
width: 25%;
height: 784px;
background-color: #005596;
}
#sidebarright {
display: none;
}
#sidebarbottom {
display: none;
}
.sidebartextleft {
font-family: Arial, Helvetica, sans-serif;
padding-top: 30px;
margin-left: 25px;
font-size: 20px;
color: #FFF;
font-weight: bolder;
height: 368px;
font-style: normal;
}
.sidebartextright {
position: relative;
font-family: Arial, Helvetica, sans-serif;
padding: 15px 0 20px 5px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 20px;
height: 30px;
font-style: normal;
}
.sidebartextlefthead {
font-family: Arial, Helvetica, sans-serif;
font-style: bold;
font-size: 22px;
padding-bottom: 20px;
font-weight: bold;
}
.pleftsidebar {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #d5b89a;
padding-top: 4px;
padding-bottom: 3px;
width: 80%
}
#content {
width: 75%;
height: 768px;
float: left;
}
#footer {
width: 100%;
padding-top: 10px;
bottom: 0;
text-align: center;
background-color: #dbf1da;
font-weight: bold;
color: #000;
}
.rightsidebarimg {
text-align: center;
padding: 0 15px;
}
.sidebartextrightsmall {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
font-size: 20px;
width: 90%;
height: 200px;
font-style: normal;
margin: 60px auto 0;
}
.sidebartextrightsmall span {
display: block;
padding-bottom: 20px;
}
.sidebartextrightsmall img {
max-width: 125px;
height: auto;
text-align: center;
}
.sidebartextleftsmall {
margin: 200px 1px 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #c7b199;
font-size: 17px;
font-weight: normal;
width: 100%;
height: auto;
font-style: normal;
}
.featuredimg img {
width: 100%;
height: auto;
}
#box {
text-align: center;
}
img.center {
display: inline-block;
width: 30%;
padding: 0 8px;
}
.headimg {
height: 106px;
margin-left: 40px;
background: url(images/head.png) no-repeat;
}
h2.slogan1 {
padding: 53px 0 0 220px ;
font-weight: bold;
font-size: 22px;
}
h3.slogan2 {
padding-left: 220px ;
font-style: italic;
font-weight: bold;
font-size: 18px;
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0;
background: #101010;
}
div#captioned-gallery {
width: 90%;
overflow: hidden;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
margin: 40px auto;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff;
width: 100%;
padding: .6rem;
}
/* Bracket below closes tablet media query */
}
#media only screen and (min-width: 320px) and (max-width: 767px) {
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
header {
height: 106px;
background-color: #d9e6ef;
}
#wrapper {
width: 100%;
}
#nav {
background-color: #51b948;
}
#nav ul {
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #FFF;
}
#nav ul li {
display: block;
list-style-type: none;
border-bottom: 2px dotted white;
}
#nav ul li:last-child {
border-bottom: none;
}
#nav ul li a {
display: block;
text-align: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color: #F4E9E9;
padding: 20px;
}
#nav ul li a:link {
text-decoration: none;
}
#nav ul li a:visited {
color: #F4E9E9;
}
#nav ul li a:hover {
background: #51b948;
}
#nav ul li a:active {
background: #406718;
}
.socialmedia {
float: right;
margin-right: 45px;
padding: 8px 8px 0;
}
#sidebarleft {
display: none;
float: left;
width: 25%;
height: 784px;
background: #005596;
}
#sidebarright {
display: none;
}
#sidebarbottom {
width: 100%;
background: #005596;
text-align: center;
}
#sidebarbottom ul li a {
display: block;
padding: 15px;
border-bottom: 3px solid #fff;
}
#sidebarbottom ul li a:link {
text-decoration: none;
}
#sidebarbottom ul li a:visited {
color: #fff;
}
#sidebarbottom ul li a:hover {
background: #005596;
}
#sidebarbottom ul li a:active {
background: #d9e6ef;
}
.sidebartextleft {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFF;
font-weight: bolder;
font-style: normal;
}
.sidebartextright {
position: relative;
font-family: Arial, Helvetica, sans-serif;
padding: 15px 0 20px 5px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 20px;
height: 30px;
font-style: normal;
}
.sidebartextlefthead {
font-family: Arial, Helvetica, sans-serif;
font-style: bold;
font-size: 22px;
padding-bottom: 20px;
font-weight: bold;
}
#content {
width: 100%;
background: #dbf1da;
padding: 0;
margin: 0;
}
#footer {
width: 100%;
padding-top: 10px;
bottom: 0;
text-align: center;
background-color: #dbf1da;
font-weight: bold;
color: #000;
}
.rightsidebarimg {
text-align: center;
padding: 0 15px;
}
.sidebartextrightsmall {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
font-size: 20px;
width: 90%;
height: 200px;
font-style: normal;
margin: 60px auto 0;
}
.sidebartextrightsmall span {
display: block;
padding-bottom: 20px;
}
.sidebartextrightsmall img {
max-width: 125px;
height: auto;
text-align: center;
}
.sidebartextleftsmall {
margin: 200px 1px 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #c7b199;
font-size: 17px;
font-weight: normal;
width: 100%;
height: auto;
font-style: normal;
}
.featuredimg img {
width: 100%;
height: auto;
}
#box {
text-align: center;
}
img.center {
display: inline-block;
width: 33%;
margin: 0;
background: #42603C;
}
img.center:first-child {
float: left;
}
img.center:last-child {
float: right;
}
.headimg {
height: 106px;
margin: 0 auto;
padding: 0 auto;
text-align: center;
background: url(images/head.png) no-repeat center;
}
h2.slogan1 {
display: none;
/*
padding: 35px 0 0 220px ;
font-weight: bold;
font-size: 20px;
*/
}
h3.slogan2 {
display: none;
/*
padding-left: 220px ;
font-style: italic;
font-weight: bold;
font-size: 16px;
*/
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0;
background: #101010;
}
div#captioned-gallery {
width: 100%;
overflow: hidden;
margin: 0 auto;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff;
width: 100%;
padding: .6rem;
}
/* Bracket below closes phone media query */
}
You are closing one div more then you open div (tags). Count them and then look, which div should close at which point. You could for example search for all div> to get all open and closing div tags. One tip: take a look at the sourcecode in the browser, at least Firefox highlights wrong html syntax (too manny or to few tags or not matching tags) which makes it easy to find them.
Edit:
You close your content div after this div <div id="box">....</div>
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.
I developed a site and it's working fine. It's just that when I view on smaller window a white space appear on the right hand side.
I found the cause is the width:76% set for div=middle. I tried removing the width and adjusting the middle layout using padding. Again it needs 76% of width to get fixed. Yet the extra space appears.
How to get rid of it? here I attached the css part and html of my scripting. Thanks in advance.
CSS:
body {
font-family: Calibri;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.wrapper {
min-height: 100%;
position: absolute;
}
.left {
background-image: url('images/SideTexture_01.png');
background-repeat: repeat-y;
width: 12%;
height: 100%;
position: absolute;
}
.middle {
width: 76%; /* deactivated to remove extra space on right side */
height: 100%;
position: relative;
float: right;
margin-right: 12%;
padding-left: 12%;
z-index: 99px;
}
.header {
background-color: #cf2122;
width: 100%; /*774*/
height: 30px;
position: relative;
}
.footer {
background-color: #373435;
width: 100%; /*774*/
height: 40px;
text-align: justify;
margin: 0 auto;
clear: both;
}
.border {
border: 1px solid #DFDFDF;
padding: 5px;
}
.border-index {
border: 1px solid #EAEAEA;
padding: 10px;
}
.right {
background-image: url('images/side_texture-2.png');
background-repeat: repeat-y;
width: 12%;
height: 100%;
position: absolute;
float: left;
z-index: -1;
margin-left: 88%;
}
.disclaimer {
color: #FFF;
float: left;
font-size: 9px;
width: 60%;
text-align: justify;
padding-left: 10px;
padding-top: 2px;
}
.copyright {
color: #FFF;
float: right;
font-size: 9px;
position: relative;
float: right;
width: 31%;
padding-top: 15px;
}
A.menu-top:link {
COLOR: #FFFFFF;
TEXT-DECORATION: none;
FONT-WEIGHT: none;
FONT-FAMILY: Calibri;
FONT-SIZE: 13px;
text-transform: uppercase;
}
A.menu-top:active {
COLOR: #FFFFFF;
TEXT-DECORATION: none;
FONT-WEIGHT: none;
FONT-FAMILY: Calibri;
FONT-SIZE: 13px;
text-transform: uppercase;
}
A.menu-top:visited {
COLOR: #FFFFFF;
TEXT-DECORATION: none;
FONT-WEIGHT: none;
FONT-FAMILY: Calibri;
FONT-SIZE: 13px;
text-transform: uppercase;
}
A.menu-top:hover {
COLOR: #FFFFFF;
text-decoration: underline;
FONT-WEIGHT: none;
FONT-FAMILY: Calibri;
FONT-SIZE: 13px;
text-transform: uppercase;
}
.separate {
font-size: 15px;
color: #FFFFFF;
FONT-FAMILY: Calibri;
}
A.menu:link {
COLOR: #fff;
TEXT-DECORATION: none;
FONT-WEIGHT: none;
FONT-FAMILY: Calibri;
FONT-SIZE: 13px;
text-transform: uppercase;
}
A.menu:active {
COLOR: #fff;
TEXT-DECORATION: none;
FONT-WEIGHT: none;
FONT-FAMILY: Calibri;
FONT-SIZE: 13px;
text-transform: uppercase;
}
A.menu:visited {
COLOR: #fff;
TEXT-DECORATION: none;
FONT-WEIGHT: none;
FONT-FAMILY: Calibri;
FONT-SIZE: 13px;
text-transform: uppercase;
}
A.menu:hover {
COLOR: #fff;
text-decoration: underline;
FONT-WEIGHT: none;
FONT-FAMILY: Calibri;
FONT-SIZE: 13px;
text-transform: uppercase;
}
#body_content {
padding: 0px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #000000;
padding-top: 12px;
padding-bottom: 0px;
}
.require {
font-family: Calibri;
font-weight: bold;
color: #CC0000;
}
td {
font-family: Calibri;
font-size: 12px;
color: #3a3a3a;
}
th {
font-family: Calibri;
color: #3a3a3a;
}
.input {
border: 0;
color: #3a3a3a;
font-size: 10px;
text-align: left;
}
.input_contact {
border: 1px solid #999999;
background-color: #F6F7F1;
color: #3a3a3a;
height: 15px;
font-size: 12px;
width: 234px;
}
#media only screen and (max-width: 1280px) {
td.search {
width: 425px;
}
}
#media only screen and (min-width: 1197px) {
td.search {
width: 180px;
}
}
#media only screen and (min-width: 1289px) {
td.search {
width: 170px;
}
}
#media only screen and (min-width: 1346px) {
td.search {
width: 120px;
}
.copyright {
width: 23%;
}
.body-content {
padding-right: 250px;
}
}
.textarea {
border: 1px solid #999999;
background-color: #F6F7F1;
color: #3a3a3a;
font-size: 12px;
}
.star {
font-family: Tahoma;
color: red;
font-size: 16px bold;
}
.notice {
font-family: Tahoma;
color: #0066FF;
font-size: 14px bold;
}
.error {
font-family: Tahoma;
color: #CC0000;
font-size: 14px bold;
}
.require {
font-family: Tahoma;
font-weight: bold;
color: #CC0000;
}
.about-us-image {
width: 99%;
height: 40%;
background-image: url('images/AboutUsBg_01.png'),url('images/AboutUsBg_01.png'),url('images/AboutUsBg_01.png');
z-index: -1;
}
HTML:
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginheight="0">
<div class="wrapper">
<div class="left"></div>
<div class="middle">
<div class="header top_menu"><?php include 'top-menu.php'; ?> </div>
<div id="body_content">
<table height="600" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td>
<table height="600" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-top:10px; padding-left:50px; padding-right:50px; padding-bottom:230px; text-align:justify;">
<?php include('product-include.php'); ?>
<br /> <br />
<?php echo $row_RecTitle['FullTxt']; ?>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="footer" style="top:628px;">
<?php include('footer.php'); ?>
</div>
<div class="right"></div>
</div>
</body>
Update
Image hidden for copyright purpose, This problem only when browser window resized.
Thanks again ..
In my project, I solved it with this
html {
overflow-x: hidden;
}
Try this .. I think it's the easiest way to do what you want . You can creat a div which will be the right side of the background, and the other side will be the ::before selector of the same div ...
In HTML
<body>
<div class="bg"></div>
<div class="middle">
// Some HTML Text
</div>
</body>
In CSS
body{
margin: 0;
padding: 0;
}
.bg::before{
content:" ";
top: 0;
left: 0;
width: 12%;
height: 100%;
background-image: url('images/SideTexture_01.png');
background-repeat: repeat-y;
position: fixed;
z-index: 1;
}
.bg{
top: 0;
right: 0;
width: 12%;
height: 100%;
background-image: url('images/SideTexture_02.png');
background-repeat: repeat-y;
position: fixed;
z-index: 1;
}
.middle{
background: #fff;
margin: auto;
width: 76%;
position: relative;
z-index: 10;
}
Hope this will help you ...
This will solve your issue:
html,body{
margin:0;
padding:0;
overflow:auto;
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.