It's working but

1

Okay i’ve done some serious editing to my html and css code. It works great online but somehow it turns out now to difficult to edit in dreamweaver. The body of the website is shifted to the right. I can’t finish the rest of the site because it’s difficult to bring the other content to the rest of the pages. Here is the code.


<!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>Precious Jewels Learning Incorporated - Home</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>

<body>
    <div id="wrapper">
         <div id="header">
            <div id="followus">
                <a class="facebook"><img src="images/header/Precious-Jewels-Learning-Incorporated - facebook.jpg" alt="Facebook Page" /></a>
                <a class="twitter"><img src="images/header/Precious-Jewels-Learning-Incorporated - twitter.jpg"  alt="Twitter Page" /></a>
                <a class="home"><img src="images/header/Precious-Jewels-Learning-Incorporated - home.jpg" alt="Home" /></a>
                <a class="contact"><img src="images/header/Precious-Jewels-Learning-Incorporated - email.jpg" alt="email" /></a>
            </div><!-- end "followus" DIV-->
        </div><!-- end "header" DIV-->

        <div id="navigation">
            <ul id="MenuBar1" class="MenuBarHorizontal">
                <li><a class="MenuBarItemSubmenu" href="#">Home</a>
                    <ul>
                        <li><a href="#">Item 1.1</a></li>
                        <li><a href="#">Item 1.2</a></li>
                        <li><a href="#">Item 1.3</a></li>
                    </ul>
                </li>
                <li><a href="#">About Us</a></li>
                <li><a class="MenuBarItemSubmenu" href="#">Our Services</a>
                    <ul>
                        <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
                            <ul>
                                <li><a href="#">Item 3.1.1</a></li>
                                <li><a href="#">Item 3.1.2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Item 3.2</a></li>
                        <li><a href="#">Item 3.3</a></li>
                    </ul>
                </li>
                      <li><a href="#">Contributions</a></li>
                      <li><a href="#">Contact</a></li>
            </ul>
        </div><!-- end "navigation" DIV-->

        <div id="main">
            <div id="left"><img src="images/body/Precious-Jewels-Learning-Incorporated---ezekial.jpg" alt="ezekial" /></div>
            <div id="right"><img src="images/body/Precious-Jewels-Learning-Incorporated---picture-gallery.jpg" alt="pic gallery" />
        </div><!-- end "main" DIV-->

        <div style="clear: both;">
            &nbsp;
        </div><!-- end "clear" DIV-->

    </div><!-- end "wrapper" DIV-->



        <div id="footer">
        </div><!-- end "footer" DIV-->

<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</div>
</body>

</html>






/*    =========================RESET BROWSER CSS============================*/



html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td     {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

body    {
    line-height: 1;
}


h1, h2, h3, h4, h5, h6    {
    font-weight: normal;
    clear: both;
}


ol, ul    {
    list-style: none;
}



blockquote:before, blockquote:after {
    content: none;
    content: none;
}


del {
    text-decoration: line-through;
}


/* tables still need 'cellspacing="0"' in the markup */


table    {
    border-collapse: collapse;
    border-spacing: 0;
}


a img
    {border: none; }





/* ============================END RESET================================== */




/*=========================MAIN ELEMENTS==================================*/

/*==========Wrapper=============*/

#wrapper {
    width: 814px;
    margin: 0 auto;
}

/*==========Header=============*/

#header {
    background-image: url(../images/header/Precious-Jewels-Learning-Incorporated%20-%20header.jpg);
    background-repeat: no-repeat;
    width: 814px;
    height: 217px;
}

#followus {
    position: absolute;
    width: 200px;
    height: 65px;
    margin: 3px 0 0 552px;
}

#followus a.twitter {
    position: absolute;
    margin: 3px 0 0 10px;
}
    
#followus a.home {
    position: absolute;
    margin: 3px 0 0 72px;
}    

#followus a.contact {
    position: absolute;
    margin: 3px 0 0 135px;
}

/*========Navigation==========*/

#navigation {
    background: #333;
}

/*==========Main=============*/

#main {
    background-image: url(../images/body/Precious-Jewels-Learning-Incorporated-body.jpg);
    height: 400px;
}

#left {
    height: 306px;
    width: 50%;
    float: left;
    margin: 0;
}

#left img {
    position: absolute;
    margin: 20px 0 0 30px;
}

#right {
    height: 306px;
    width: 50%;
    float: right;
    margin: 0px;
}

#right img {
    position: absolute;
    margin: 20px 0 0 5px;
}
    
/*==========Footer=============*/

#footer {
    background-image: url(../images/footer/Precious-Jewels-Learning-Incorporated-footer.jpg);
    height: 100px;
    font-family: "Arial Black", Gadget, sans-serif;
    color: #FFF;
}

Here is the link…

http://www.preciousjewelslearning.org/

Thanks in advance…