Author Topic: issue centering website  (Read 1444 times)

Natalie.Hruska

  • Global Moderator
  • Full Member
  • *****
  • Posts: 22
    • Website for Natalie Hruska
issue centering website
« on: August 22, 2013, 08:57:01 am »
Hi- can you help me figure out why this website does not center?
It appears that there might be some JQuery code interfering, but I cannot see where

http://gloshep.aisites.com/IMD312/JNats/index.html

Natalie

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: issue centering website
« Reply #1 on: August 22, 2013, 03:38:52 pm »
They shouldn't really be setting so many CSS properties on the body. I would start by removing the width and border.


body {
    border: 5px solid #006600;
    clear: none;
    color: #000000;
    float: none;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 100%;
    height: auto;
    line-height: normal;
    padding: 0;
    position: relative;
    width: 1028px;
}

Then update the container CSS to give it a width and margin of 0 auto:

#container {
    background-image: url("images/JNatsbkgrd.png");
    border: 5px solid #006600;
    margin: 0 auto;
    width: 960px;

}

From looking at the body CSS, I think a lot of the properties can be removed. I would modify it to the following:


body {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 100%;
}
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu

Natalie.Hruska

  • Global Moderator
  • Full Member
  • *****
  • Posts: 22
    • Website for Natalie Hruska
Re: issue centering website
« Reply #2 on: August 22, 2013, 03:49:16 pm »
thanks

 :D