Hello All, I am new to the CSS realm of design. I am stuck, I want to align the page to the left and I cannot figure out how to do this. I am using multiple stylye sheets throughout the site. Listed below are the the Stylrsheets code: STYLESHEET 1 Main Stlye body { margin:0px; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #000099; } a { color: #000099; } h1 { font-size:1.8em; font-weight:bold; margin:0; padding:0; } h2 { font-size:1.2em; font-weight:bold; margin:0; padding:0; } h3 { font-size:1em; font-weight:bold; margin:0; padding:0; } .pageHead { height: 119px; background: url(../Images/TopBackground.png) repeat-x; } .datetime { font-family: Arial; font-weight: bold; font-size: 12px; color: white; } .leftmenu { background:url(../Images/LeftBackground.gif) repeat-y; padding-left:44px; } .menuButton { width: 120px; background: url(../Images/btn_bg.png) repeat-x; text-align: center; } .menuButton a { font-weight: bold; text-decoration: none; color: White; display: block; } .menuButton a:hover { color: Yellow; } .main { text-align:left; } .footer { font-size:10px; text-align:center; } .footer a { text-decoration: none; } .footer a:hover { text-decoration: underline; } .blueBoxUL { width:35px; height:25px; background: url(../Images/BlueTableBox_1x1.gif); } .blueBoxU { height:25px; background: url(../Images/BlueTableBox_1x2.gif) repeat-x; } .blueBoxUR { width:35px; height:25px; background: url(../Images/BlueTableBox_1x3.gif); } .blueBoxL { width:35px; background: url(../Images/BlueTableBox_2x1.gif) repeat-y; } .blueBoxC { background: url(../Images/TripleSwoosh.png) no-repeat center center; } .blueBoxR { width:35px; background: url(../Images/BlueTableBox_2x3.gif) repeat-y; } .blueBoxBL { width:35px; height:35px; background: url(../Images/BlueTableBox_3x1.gif); } .blueBoxB { height:35px; background: url(../Images/BlueTableBox_3x2.gif) repeat-x; } .blueBoxBR { width:35px; height:35px; background: url(../Images/BlueTableBox_3x3.gif); } td.bulletcolumn { font-size:12px; color:Black; line-height:20px; text-align:left; padding-left:10px; } td.datacolumn { line-height:20px; text-align:center; } .bold { font-weight:bold; } ul.features { text-align:left; padding-bottom:0px; margin-bottom:0px; } li.features { padding-bottom:20px; font-size:12px; } .continuebtn { background-color:#D0E6FF; border:solid 1px #1919D1; line-height:30px; width:250px; font-weight:bold; cursorointer; } .orange { color:#D8522E; } .icon { float:left; padding:10px 0px 10px 0px; width:100px; } .center { text-align:center; } DU STYLESHEET Secondary Stlye body { background-color: silver; text-align: center; padding: 0px; margin: 0px; } img { border: none; } .testborder { border: solid 1px lime; } .clear { clear: both; } .masterbody { align: left; margin: 0 auto; width: 800px; background-color: white; } .subbody { width: 786px; background-color: white; margin-top: 4px; background: url(cssimages/leftcolumnbkgr.gif) repeat-y left;; margin-left:auto; margin-right:auto; margin-bottom:0 } .basichead { background-image: url(cssimages/Basichead22.jpg); background-repeat: no-repeat; width: 786px; height: 109px; position: relative } .homebutton { position: absolute; top: 1024px; left: 265px; width: 315px; height: 100px; cursor: pointer; } .signup { width: 170px; position: absolute; right: 16px; top: 26px; height: 65px; } .headnav { position: absolute; left: 305px; bottom: -2px; width: 270px; height: 56px; } .headnavbutton { font-weight: bold; font-size: 9px; list-style: none; padding: 0px; margin: 0px; text-decoration: none; } .headnavbutton a:link, .headnavbutton a:visited { color: Black; } .headnavbutton a:hover { background-image: url(cssimages/headnavbutton.gif); } .headnavbutton a:active { color: #FFC314; } .headnavbutton li { float: left; width: 59px; height: 56px; background-image: url(cssimages/headnavbutton.gif); background-repeat: no-repeat; margin-right: 6px } .headnavbutton div { padding-top: 12px; } .navcolumn { width: 170px; min-height: 300px; float: left; padding: 10px 0 100px; } .leftcolumnnav { margin: 0px; padding: 0px; list-style: none; font-size: 13px; font-weight: bold; color: White; } .leftcolumnnav li { margin: 0px; padding: 0px; } .navlabel a:link, .navaccesslabel a:link { color: White; } .navlabel a:visited, .navaccesslabel a:visited { color: White; } .navlabel a:hover, .navaccesslabel a:hover { color: Yellow; } .navlabel a:active, .navaccesslabel a:active { color: #FFC314; } .navhome { height: 56px; background-image: url(cssimages/home_btn150.gif); background-repeat: no-repeat; background-position: bottom; } .navsignup { height: 56px; background-image: url(cssimages/signup_btn150.gif); background-repeat: no-repeat; background-position: bottom; } .navaccess { height: 56px; background-image: url(cssimages/accessno_btn150.gif); background-repeat: no-repeat; background-position: bottom; } .navaccesslabel { width: auto; text-align: center; padding-right: 32px; padding-top: 26px; line-height: 16px; margin: 0 auto; } .navlabel { text-align: center; padding-right: 32px; padding-top: 26px; margin: 0 auto; } .navaccelerator { height: 56px; background-image: url(cssimages/accelerator_btn150.gif); background-repeat: no-repeat; background-position: bottom; } .navalert { height: 56px; background-image: url(cssimages/callalert_btn150.gif); background-repeat: no-repeat; background-position: bottom; } .navabout { height: 56px; background-image: url(cssimages/aboutbasic_btn150.gif); background-repeat: no-repeat; background-position: bottom; } .plans { background-image: url(cssimages/planbackground.gif); background-repeat: no-repeat; width: 548px; height: 321px; margin-left: 26px; position: relative } .contentarea { width: 600px; float: right; padding-top: 20px; padding-bottom: 10px; } .standardplan { height: 165px; position: relative; cursor: pointer; } .accelplan { height: 156px; position: relative; cursor: pointer; } .DSLplan { height: 156px; position: relative; cursor: pointer; } .plantitle { font-size: 40px; font-style: italic; font-weight: bold; position: absolute; } .titlewhite { color: white; z-index: 2; top: 10px; left: 20px; } .titleblack { color: Black; z-index: 1; top: 13px; left: 23px; } .planjoin { font-size: 18px; font-style: italic; font-weight: bold; color: black; position: absolute; display: inline; top: 41px; left: 419px; } .planbullets { font-size: 16px; line-height: 20px; position: absolute; top: 67px; left: 260px; width: 250px; color: Black; } .planbullets ul { list-style: none; margin: 0px; padding: 0px; } .planbullets li { padding-left: 10px; font-size: 13px; } .planlisttitle { font-weight: bold; font-style: italic; } .reasonhead { font-style: italic; font-weight: bold; font-size: 22px; color: #1919d1; text-align: left; padding: 10px 0px; } .reasontitle { font-size: 18px; font-style: italic; font-weight: bold; color: #ED1C24; text-align: left; margin-bottom: 3px; padding-left: 20px; } .reason { font-size: 18px; font-style: italic; font-weight: bold; color: #ED1C24; width: 165px; float: left; position: relative; padding: 30px 0px; text-align: left; } .reasonbullet { position: absolute; top: 5px; left: -20px; } .reasontext { font-size: 12px; text-align: left; padding-left: 20px; margin-bottom: 20px; } .subscribe { color: #d8522e; font-style: italic; font-weight: bold; text-decoration: none; } .basicbullet { list-style-image: url(cssimages/sailbullet_solid.gif); } .basicbullet a:hover { color: #ED1C24 !important; } .tbox { width: 150px; margin: 20px auto; } .thead { width: 150px; height: 8px; background: url(cssimages/tboxtop.gif) no-repeat; } .tbody { width: 150px; background: url(cssimages/tboxbkgr.gif) repeat-y; } .tfoot { width: 150px; height: 8px; background: url(cssimages/tboxbottom.gif) no-repeat; } .testimonial { font-size: small; padding: 0px 10px 0px 10px; text-align: left; } .testwho { font-weight: bold; font-style: italic; } .testtitle { font-weight: bold; text-align: center; margin-bottom: 5px; } .aboutbutton { text-align: center; font-size: 12px; font-weight: bold; } .aboutlabel { padding-top: 54px; } .buttonpseudo a, .buttonpseudo a:link, .buttonpseudon a:visited { color: White; text-decoration: none; } .buttonpseudo a:hover { color: yellow; } .buttonpseudo a:active { color: #FFC314; } .faqbutton { float: left; width: 76px; height: 76px; background: url(cssimages/aboutFAQ.gif) no-repeat top; margin-left:12px; margin-right:4px; margin-top:0; margin-bottom:0 } .historybutton { float: left; width: 76px; height: 76px; background: url(cssimages/aboutHist.gif) no-repeat top; margin: 0 4px } .ispbutton { float: left; width: 76px; height: 76px; background: url(cssimages/aboutComp.gif)no-repeat top; margin: 0 4px } .servicebutton { float: left; width: 76px; height: 76px; background: url(cssimages/aboutServ.gif) no-repeat top; margin-left:4px; margin-right:12px; margin-top:0; margin-bottom:0 } .returnbutton { width: 324px; height: 35px; margin: 4px 13px; font-size: 12px; font-weight: bold; color: White; line-height: 35px; background: url(cssimages/returnbar2.gif) no-repeat top; } .maintitle { font-size: 2em; font-weight: bold; font-style: italic; color: #3D74EE; } .faqLinks a { text-decoration: none; } .faq h1 { margin-top: 1em; color: #D8522E; } .faq h2 { margin-top: .5em; padding-left: 2em; } .faq p { margin-top: .5em; } .basicbutton { font-weight: bold; line-height: 25px; background-color: #DDDDDD; border: solid 1px navy; text-align: center; max-width: 200px; } .basicbutton a { text-decoration: none; } .basicbutton a:hover { color: #ED1C24; } .BISPtext { color: Navy; } .lmar4 { margin-left: 4px; } .rmar4 { margin-right: 4px; } STYLESHEET LANDING .plantable { background: url(cssimages/swoop64.gif) no-repeat; } .plantablePrivacy { background: url() no-repeat; } .tabletopA { background: url(cssimages/tabletop_a.gif)no-repeat; } .tabletopB { background: url(cssimages/tabletop_b22.jpg ) no-repeat; } .tabletoptwocolumn { background: url( ../Images/landing/tabletop_2column.jpg ) no-repeat; } .tableleft { background: url( ../Images/landing/table_left.gif ) repeat-y; } .tableright { background: url( ../Images/landing/table_right.gif ) repeat-y; } .tableLbtm { background: url( ../Images/landing/table_btmlft.gif ) no-repeat; } .tablebottom { background: url( ../Images/landing/table_btm.gif ) repeat-x; } .tableRbtm { background: url( ../Images/landing/table_btmrt.gif ) no-repeat; } .handcursor { cursor: pointer; } .warningbox { background-image: url(../Images/landing/warningbar.gif); padding: 10px; } .warninglabel { font-family: Arial Black, Franklin Gothic Heavy, Arial, helvetica, Sans-Serif; font-size: 30px; color: white; line-height: 34px; text-align: center; margin-bottom: 5px; } .tabletopBnetzero { background: url( ../Images/landing/tabletop_b-netzero.jpg ) no-repeat; } .cellfill { background: url( ../Images/landing/cellbkgr.gif ); } .choosebar { width: 550px; height: 100px; font-weight: bold; cursor: pointer; background-image: url(cssimages/Choosejagdu.gif); background-repeat: no-repeat; } .bold { font-weight: bold; } .bottomchartrow { line-height: 40px; font-size: 16px; font-weight: bold; padding-left: 10px; } .chartbutton { float: right; background-color: #313BDA; border: solid 2px silver; line-height: 25px; color: White; font-size: 14px; font-style: italic; padding-left: 20px; padding-right: 20px; margin-top: 6px; margin-right: 40px; } .DSLplantable { width: 554px; height: 450px; text-align: left; margin: 0 auto; padding: 0; position: relative; background-image: url(cssimages/swoop642.gif); background-repeat: no-repeat; } Any help would be welcomed with appreciation.
Entire site? I'd use body{margin-left:0px;} but since you have body{margin: 0px;} your page should be at the upper left corner. Some HTML of your site would be great to see.. or an online demo? Seems you already have got that in your code..
First, put all your CSS in one (or more) stylesheet(s). So not in your webpages itself. Your coding does look messy because of it. Clean it up by assigning a class or id to the element you wish to give styles to and put the styling in your stylesheet. Then import your stylesheet like this (place it in your head section): <style type="text/css"> @import url('pathToStylesheet/stylesheet.css'); </style> Code (markup):
At a quick glance I found the following code: .masterbody { align: left; margin: 0 auto; width: 800px; background-color: white; } remove: margin: 0 auto;
Somesite, Thank you very much. That was a fix. Simple, but hard to find for a newbie. Thanks again, ZagDesigns
You've got a lot of other 'problems' in there.... For example there is no CSS property "align", so that "align:left" is gibberish.