Results 1 to 4 of 4
  1. #1
    ABW Ambassador Doug247's Avatar
    Join Date
    January 18th, 2005
    Location
    DE USA
    Posts
    931
    Help With CSS Please
    Can someone help me out with this CSS? I am doing a little redesigining and want to use CSS to make things easier.

    I am trying to make a page layout and have almost everything the way I want except for one thing. content section of the page is not 'floating' along side of the left nav. Can someone please have a look at my style sheet and tell me where I want wrong?? Evertying looks good in Dreamweaver but when I view the page the content section is below and to the left of the the leftnav. It should be to the left of it.

    Thanks,
    DOug

    <style>
    body {
    background-color: #A7BBCF;
    }
    #container {
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    border-color: #006699;
    border-width: 2;
    border-style: solid;
    background-color: #FFFFFF;
    clear: both;
    }

    #banner {
    padding: 0px;
    margin-bottom: 0px;
    background-color: rgb(213, 219, 225);
    }

    #content {
    padding: 0px;
    margin-left: 210px;
    background-color: #FFFFFF;
    }

    #sidebar-a {
    float: left;
    width: 200px;
    \width: 200px;
    w\idth: 200px;
    margin: 0;
    margin-right: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    border-width: 2px;
    border-color: #CCCCCC;
    border-style: solid;
    }

    #footer {
    clear: both;
    padding: 0px;
    margin-top: 0px;
    background-color: #006699;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    text-align: center;
    vertical-align: middle;
    }

    /**************************/
    /** Class Styles **/
    /**************************/
    .navheadingtd {
    background-color: #0066CC;
    color: #FFCC66;
    margin: 2px;
    text-align: center;

    }

    .navmenuitem {
    background-color: #ECECEC;
    margin: 2px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    }

    #thumbnailtd {
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #CCCCCC;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCCCCC;
    vertical-align: middle;
    text-align: center;
    }

    .buttonscontainer {
    width: 100%;
    background-color: #ececec;
    }
    .buttontitle {color: #FFCC66;
    background-color: #0066CC;
    padding: 2px;
    padding-left: 1px;
    display: block;
    border-bottom: 1px solid #000000;
    font: 14px Arial, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;}

    .buttons a {
    color: #0066CC;
    background-color: #ececec;
    padding: 2px;
    padding-left: 5px;
    display: block;
    border-bottom: 1px solid #000000;
    text-align: left;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: normal;
    font-weight: bold;
    }

    .buttons a:hover {background-color: #DDF4FF;
    color: #FFCC66;
    text-decoration: none;}
    .product {
    border-top-color: #FF0000;
    border-top-style: solid;
    border-top-width: 1px;
    border-bottom-color: #6600CC;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    }
    .thumbnail {
    width: 100px;
    height: 100px;
    vertical-align: middle;
    text-align: center;
    float: left;
    border-right-color: #CCCCCC;
    border-right-style: solid;
    border-right-width: 1px;
    }

    #navigation a
    {
    color: #000000;
    background: #FFBB00 url("Library/tab-orange-left2.gif") left top no-repeat;
    font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size:12px;
    text-decoration: none;
    padding-left: 10px;
    }
    #navigation a span
    {
    background: #FFBB00 url("Library/tab-orange-right2.gif") right top no-repeat;
    padding-right: 10px;

    }
    #navigation a:hover {
    color: #fff;
    background: #26a url("Library/left-tab-hover.gif") left top no-repeat;
    text-decoration: none;
    padding-left: 10px
    }

    #navigation a:hover span
    {
    background: url("Library/right-tab-hover.gif") right top no-repeat;
    padding-right: 10px
    }

    #navigation ul
    {
    list-style: none;
    padding: 0;
    margin: 0
    }

    #navigation li
    {
    float: left;
    display: block;
    margin: 0;
    padding: 0
    }
    #under_nav
    {
    background-color: #006699;
    text-align: center;
    }
    .whitelink {color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:none;}
    .whitelink:visited {color:#FFFFFF;}
    .whitelink:hover {color:#FFFFFF; text-decoration:underline;}

    .category {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 2px;
    padding-bottom: 0px;
    }

    .subcat {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 4px;
    padding-top: 0px;
    }
    </style>

  2. #2
    ABW Ambassador DesignerWiz's Avatar
    Join Date
    January 18th, 2005
    Location
    U.S.A
    Posts
    2,777
    Well .... the sidebar has an error in it.

    #sidebar-a {
    float: left;
    width: 200px;
    \width: 200px;
    w\idth: 200px;


    Correct it:

    #sidebar-a {
    float: left;
    width: 200px;

    I would also close each margin & padding settings.

    margin: 0 - make it - margin: 0;

    padding-left: 10px - make it - padding-left: 10px;

    etc, etc.
    Ray Thomas
    Webmaster Resources: http://DesignerWiz.com
    ABW Board Category: Programming / Coding
    http://forum.abestweb.com/forumdisplay.php?f=190

  3. #3
    Newbie
    Join Date
    March 9th, 2005
    Posts
    1
    Quote Originally Posted by DesignerWiz
    Well .... the sidebar has an error in it.

    #sidebar-a {
    float: left;
    width: 200px;
    \width: 200px;
    w\idth: 200px;
    I think the \ is actually an IE hack for floats or something (I hate IE... evil CSS "support"..)

  4. #4
    ABW Ambassador Doug247's Avatar
    Join Date
    January 18th, 2005
    Location
    DE USA
    Posts
    931
    THat is what it is.

    Thanks

  5. Newsletter Signup

+ Reply to Thread

Similar Threads

  1. CSS Help PLEASE!
    By Doug247 in forum Blogging, Mobile and Social Media
    Replies: 5
    Last Post: March 9th, 2010, 09:50 AM
  2. A little CSS help
    By Kevin in forum Programming / Datafeeds / Tools
    Replies: 13
    Last Post: September 5th, 2007, 07:59 PM
  3. CSS or Tables?
    By Cheesehead in forum Programming / Datafeeds / Tools
    Replies: 32
    Last Post: July 10th, 2007, 02:35 AM
  4. Can you do this with CSS?
    By Cagles Mill in forum Programming / Datafeeds / Tools
    Replies: 3
    Last Post: October 12th, 2006, 05:44 PM
  5. Need some CSS help
    By suzie250 in forum Programming / Datafeeds / Tools
    Replies: 4
    Last Post: August 18th, 2005, 09:02 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •