CSS and JavaScript display

Question

I cannot seem to find the error in my .css file so that my JavaScript displays in the centre of the page (right now displaying on the far left). I want to have the address and contact centred below the photo. I am taking a javascript course so can only use it and not other programs at this point.

Is the error from .css or .js?

HTML:

<!doctype html>    
<html lang="en">    
    <head> 

        <meta charset="utf-8"> 

        <link href="css/armchair.css" rel="stylesheet"> 

    </head>

    <body>
        <!-- wrapper  section starts -->
        <div id="wrapper">            

            <!-- header  section starts -->
            <div id="header">
                <img src="images/header.jpg" alt="Armchair Logo" width="975" height="230" class="floatcenter">
            </div>
            <!-- header  section ends -->


            <!-- menu  section starts -->       
            <div id="menu">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="newrelease.html">New Releases</a></li>
                    <li><a href="placeholder.html" >Special Selection</a></li>
                    <li><a href="contact.html" id="current" class="first">Contact</a></li>
                    <li><a href="placeholder.html">On Sale</a></li>
                </ul>
            </div>
            <!-- menu  section ends -->


            <!-- text section starts -->
            <div id="content"></div>
            &nbsp;<img src="images/viewcart.jpg" alt="" width="130" height="59" class="floatright" /> 

            <br><br>

            <img src="images/store.jpg" alt="Armchair Store" width="520" height="347" class="floatcenterb">

            <br><br>


            <div id="contact_details"></div>

            <script type="text/javascript" src="js/contact.js"></script>

            <br/>
        </div>

        <!-- footer section starts -->
        <div id="footer">
            <p class="bottom">Copyright &copy; 2012 JC Design | All Rights Reserved | <a href="#">Terms and Conditions</a></p>
        </div>
        <!-- foot section ends -->  

    <!-- wrapper section starts -->


    </body>
</html>

My .css file:

/*--------------Body-----------------*/

html {background-color: #e2e2e2}

body {
   color: #000; background: #fff;
   font-family: "Helvetica Neue",helvetica,arial, sans-serif; 
   font-size: 90%;
   text-align: left;
   width: 975px;
   margin-left: auto;
   margin-right: auto;
}


p {
   margin-left: 25px;
   margin-right: 5px;
   text-align: left;
   font-size: 110%;
}


/*--------------Links formatting------------------*/

a:link { 
   background: #fff; color: #7d890d;
}


a:visited { 
   color: #034769;
}


a:hover {
   color: #034769;  
   text-decoration: none; 
}

a:active{
    background: #63add0; color: #fff;
}

/*Bottom link formatting*/

p.bottom a:link { 
   background: #2d1d06; color: #f9b41f;
}


p.bottom a:visited { 
   color: #fff;
}


p.bottom a:hover {
   color: #7d890d;  
   text-decoration: none; 
}
p.bottom a:active{
    background: #8742d6; color: #fff;
}


/*--------------------Page wrapper----------------*/
#wrapper {
   margin: 0 auto; 
   width: 975px; 
   text-align: left;
}

/*Banner styles*/

#header {

   width: 975px;
   padding-left: 0px;
   padding-bottom: 10px;
   padding-top: 0px;
}


#footer {
   clear: both;
   background: #2d1d06; color: #fff;
   font-family: "Helvetica Neue",helvetica, arial, sans-serif;
   font-size: 90%;
   font-weight: normal;
   width: 975px;
   padding-bottom: 3px;
   padding-top: 3px;
}

#footer p {
   text-align: center;
}

#content
{
   margin-left: 15px;
}

/*---------------Navigation  styles-------------------*/

#menu {
  float: left; 
  margin:0;
  padding-top: 0px;
  width: 100%;
  background: #7d890d; color: #fff;
}  


#menu ul {
  margin: 0px;
  position: relative 
}


#menu ul li {
  display: inline; 
}


#menu ul li a {
  float: left;
  padding: 5px 16px;
  margin-right: 0px;
  background: #7d890d; color: #fff;
  text-decoration: none;
  border-right: 1px solid #e2e2e2;
}


#menu ul li a:hover {
  color: #fff; background: #f9b41f;
  text-decoration: underline;

}

#menu li a#current {
  background: #ba1212; color: #fff;
}



/*-------------Image area--------------*/

img 
{ 
   border: 0px 0px ; 
   padding-top: 30px;
   padding-bottom: 25px;
   border-radius: 0px;
}



.floatcenter {
   float: left;
   margin: 0px;
   padding: 0px; 
   border: none;  
}

.floatcenterb {
   margin: 0px 228px;
   padding: 1px; 
   border: none;  
}

.floatright 
{ 
   display: block;
   float: right; 
   margin: 20px;
   padding: 1px; 
   border: none;
}
.floatright2 
{ 
   float: right; 
   margin: 20px;
   padding: 1px; 
   border: none;
}



/*---------------Headings----------------*/
hr{
  position: relative;
   width: 90%;
   margin-left: 25px;
   margin-right: 25px;
   color: #3ca0d0;
   border: 1px;
   border-style: dotted;
}

h1{
   color: #2d1d06;
   font-size: 140%;
   font-weight: normal;
   margin-left: 25px;

}

h2{
   color: #2d1d06;
   font-weight: normal;
   font-size: 130% ;
   text-align: center;
   text-decoration: underline;
   margin-left: 0px;
}

h3{
   font-size: 120%;
   color: #2d1d06;
   font-weight: bold;
   text-align: left;

}

h4{
   font-size: 120%;
   color: #2d1d06;
   font-weight: normal;
   text-align: center;

}

h5{
   font-size: 110%;
   color: #7d890d; 
   width: 70px;
   margin-bottom: 0px;
   margin-top: 0px;
   font-weight: bold;
   text-align: left;

}

/* Table styling */

table {
    border: 1px;
    border-collapse:collapse;
    width: 90%;
    margin-left: 25px;
    margin-right: 25px;
    font-size: 90%;

}

th {
    background-color: #000;
    color: #FFF;
}

td {
    padding: 2px 4px;
    padding-top: 25px;

    text-align: left;
    border-bottom: 0px;
}


/*contact page*/

fieldset
{
  margin: 10px 25px;
  padding: 5px 10px;
  border: 1px solid #3697B5;
  background:#fff;
  text-align: center;
}

legend
{
  font-size: 80%;
  color: #000; background: #fff;
  font-weight:bold;
  margin-left: 25px;
} 



label
{
  float: left;  /* labels and input fields line up horizontally */
  width: 200px; 
  margin-left: 25px;    
  text-align: center; 
}

textarea
{

  margin-left: 25px;
}

My .js file:

//contact.js - this will dipaly all contact detials on the home page and contact us page//

var Addre = new Array("7945", "Town Plaza", "Vancouver", "E5T 4J9","Canada");
var phoneNo = new Array("1-604-568-4938", "Toll free: 1-888-987-4738");
var eMail = new Array("[email protected]");

// get the HTML div element
var elem = document.getElementById("contact_details");

// display Address
elem.innerHTML ="Address: <br />";
for (var i = 0; i < Addre.length; i++)
{
   if ( i > 0)
      elem.innerHTML += ", ";
   elem.innerHTML +=  Addre[i];
}

// display Phone no

elem.innerHTML += "<br /><br />Contact No:<br /> ";
for (var i = 0; i < phoneNo.length; i++)
{
   if ( i > 0)
      elem.innerHTML += " or ";
   elem.innerHTML +=  phoneNo[i];
}

// display Email

elem.innerHTML +=  "<br /><br />Email:<br /> ";
for (var i = 0; i < eMail.length; i++)
{
   if ( i > 0)
      elem.innerHTML += ", ";
   elem.innerHTML +=  eMail[i];
}

And what is that you want to displayed in the center of your page?And yes,as @user1718294 said,use Fiddle! — Harsha Venkataramu
– Harsha Venkataramu, Commented Oct 8, 2012 at 0:02

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Just set text-align: center; in your CSS for #contact_details , the element you're appending your contact information to:

#contact_details {
  text-align: center;
}

See this JS Bin for a working demonstration using your code.

Quoting Mozilla's Developer Network page on the 'text-align' CSS property:

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.

Initial value: start, or a nameless value that acts as left if direction is ltr, right if direction is rtl if not supported by the browser.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 8, 2012 at 0:25

fk_

1,43612 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS and JavaScript display

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related