Alignment of FAQ page Questions and answers - Photoshop

anon
April 3, 2014
175 views
2 votes
3 Answers

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">
<a href="Home.html"><img src="Images/Logo.png" alt="Logo"/></a>
 <div id="menu">
 <ul>
 <li><a href="Home.html"><img class="nav-icons" src="Images/Nav-icons/home.png" alt="home" /> Home</a></li>
 <li><a href="Tutorials.html"><img class="nav-icons" src="Images/Nav-icons/tutorials.png" alt="tutorials" /> Tutorials</a></li>
 <li><a href="Gallery.html"><img class="nav-icons" src="Images/Nav-icons/gallery.png" alt="gallery" /> Gallery</a></li>
 <li class="active"><a href="FAQ.html"><img class="nav-icons" src="Images/Nav-icons/faq.png" alt="faq" /> FAQ</a></li>
 <li><a href="Contact.html"><img class="nav-icons" src="Images/Nav-icons/contact.png" alt="contact" /> Contact Us</a></li>
 <li><a href="About.html"><img class="nav-icons" src="Images/Nav-icons/about.png" alt="about" /> About Us</a></li>
 <li><a href="Signup.html"><img class="nav-icons" src="Images/Nav-icons/user.png" alt="sign up" /> Sign Up</a></li>
 <li><a href="Login.html"><img class="nav-icons" src="Images/Nav-icons/login.png" alt="login" /> Login</a></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 <a href="mailto:[email protected]">[email protected]</a></dd>


            <dt>How to report a technical Issue On Creative Designs ?</dt>
            <dd>For technical issues, please email <a href="mailto:[email protected]">[email protected]</a></dd>

            <dt>How to contact Creative Designs ?</dt>
            <dd>You can go to the <a href="Contact.html">Contact Us</a> 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>
<a href="https://www.facebook.com/" target="_blank"><img class="Social" src="Images/facebook500.png" alt="Facebook" /></a>
&nbsp;
<a href="https://twitter.com" target="_blank"><img class="Social" src="Images/twitter.png" alt="Twitter" /></a>
&nbsp;
<a href="http://instagram.com/" target="_blank"><img class="Social" src="Images/instagram.png" alt="Instagram" /></a>
&nbsp;
<a href="http://www.behance.net/" target="_blank"><img class="Social" src="Images/behance.png" alt="Behance" /></a>
 </div>

  <div id="footerbox2">

 <header>Navigate</header>
 <br>
    <a href="Home.html">Home</a> &nbsp; <a href="Tutorials.html">Tutorials</a> <br><br>
    <a href="Gallery.html">Gallery</a> &nbsp; <a href="FAQ.html">FAQ</a> <br><br>
    <a href="Contact.html">Contact Us</a> &nbsp; <a href="About.html">About Us</a>

 </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 &copy; 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;
}

Answers

- RickPaul
- April 3, 2014 at 11:26 pm
- 0 votes
0
“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/
Login or Signup to reply.

- SunnyPatel
- April 3, 2014 at 11:29 pm
- 0 votes
0
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.
Login or Signup to reply.

- BigSmoke
- April 3, 2014 at 11:32 pm
- 0 votes
0
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.
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Alignment of FAQ page Questions and answers – Photoshop

Answers