Aligning all CSS to the left

Discussion in 'CSS' started by zagdesigns, Apr 1, 2009.

  1. #1
    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;
    cursor:pointer;
    }

    .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.
     
    zagdesigns, Apr 1, 2009 IP
  2. fex

    fex Peon

    Messages:
    89
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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..
     
    fex, Apr 1, 2009 IP
  3. fex

    fex Peon

    Messages:
    89
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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):
     
    fex, Apr 2, 2009 IP
  4. Somesite

    Somesite Peon

    Messages:
    152
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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, Apr 3, 2009 IP
  5. zagdesigns

    zagdesigns Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Somesite,

    Thank you very much. That was a fix. Simple, but hard to find for a newbie.

    Thanks again,
    ZagDesigns
     
    zagdesigns, Apr 4, 2009 IP
  6. Somesite

    Somesite Peon

    Messages:
    152
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Sure thing and any time -- keep up the good work ^_^
     
    Somesite, Apr 4, 2009 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    You've got a lot of other 'problems' in there.... For example there is no CSS property "align", so that "align:left" is gibberish.
     
    deathshadow, Apr 4, 2009 IP