Help For Css On Wordpress Site

Discussion in 'HTML & Website Design' started by renet, Feb 17, 2013.

  1. #1
    (Moderator - if I've put anything below incorrectly I understand it may be changed or deleted till the information is correct).

    I will place the css & html below. The idea here is to have a #fff background within the area that contains the pages, posts, sidebar, containers. The "body" background is grey and not able to keep that grey outside of the "content areas". The other issue is getting the boxes all lined up nicely. The sidebar should be about 250px x 610px (adsense) and the page / posts would fill the remainder of the area on the right side. Also, container2 sites above the pages/posts.

    Thank you to all who are willing and able to help with this.

    CSS:
    ======================================================
    /*
    Theme Name: Bosco 2.0 Basic
    Theme URI: http://www.example.com
    Author: Michael D. Pollock
    Author URI: http://www.example.com/


    */


    /* -------------------[ Main Page Elements ]------------------- */

    body {
    font-size: 9pt;
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    background: #eee;
    color: #333;
    text-align: left;
    margin: 0;
    padding: 0px;
    line-height: 150%;
    }

    #blogtitle {
    width: 886px;
    height: 110px;
    border-right: solid #ccc 2px;
    border-left: solid #ccc 2px;
    margin: 5px auto 0px auto;
    padding: 0;
    background: url(/wp-content/uploads/2013/02/testbanner.png) top left no-repeat;
    }

    #containertop1 {
    clear: both;
    width: 270px;
    height: 610px;
    margin: 0 auto;
    padding: 0;
    }

    #containertop2 {
    clear: both;
    width: 600px;
    height: 250px;
    background: #fff;
    margin: 0px 0px 0px 347px;
    padding: 0;
    }

    #container {
    width: 940px;
    background: #fff;
    border: black solid 1px;
    margin: 0 auto;
    padding: 0;
    }

    #page {

    width: 580px;
    background: #fff;
    margin: 0px 0px 0px 325px;
    padding: 0px;
    }

    #content {
    background: #fff;
    width: 560px;
    float: right;
    margin: 0;
    padding: 0;
    }

    #sidebar {
    background: #fff;
    font-size: 8pt;
    width: 286px;
    height: 610px;
    float: left;
    margin: -250px 0px 0px -288px;
    padding: 0;
    line-height: 130%
    }

    #containerbot {
    clear: both;
    width: 940px;
    height: 30px;
    background:
    margin: 0 auto 0px auto;
    padding: 0;
    }

    #footer {
    color: #fff;
    clear: both;
    width: 940px;
    margin: 0 auto;
    padding: 25px 50px 15px 50px;
    text-align: center;
    font-size: 10px;
    background: url(images/footerbg.gif) top left no-repeat;
    }

    /* -------------------[ Headings ]------------------- */

    h1, h2, h3,h4,h5 {
    font-family: arial;
    font-weight: normal;
    margin: 0 0 10px 0;
    padding: 0;
    letter-spacing: -1px;
    text-align: left;
    line-height: 110%;
    }

    h1 {
    font-size: 2em;
    border-top: 4px solid #111;
    padding: 5px 0;
    margin: 0;
    }

    h2 {
    font-size: 1.7em;
    border-top: 4px solid #111;
    padding: 5px 0;
    margin: 0;
    }

    h3 {
    font-size: 1.7em;
    }

    h4,h5 {
    font-size:1.5em;
    }

    #blogtitle h1 {
    border: none;
    font-size: 2.2em;
    font-family: arial;
    font-weight: bold;
    text-transform: capitalize;
    letter-spacing: -1px;
    margin: 0px;
    padding: 10px 50px 5px 50px;
    text-align: center;
    }

    .pagetitle {
    font-size: 2em;
    border-top: 4px solid #111;
    padding: 5px 0px;
    border-bottom: 1px solid #cc0000;
    margin: 0 0 10px 0;
    }

    h2#comments,h2#respond,h2#trackbacks {
    border-bottom: 1px solid #000;
    padding-bottom:3px;
    margin-bottom:1px;
    }

    .entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 {
    border:0;
    padding:0;
    margin-bottom:10px;
    }

    /* -------------------[ Links ]------------------- */

    a, a:link, a:visited {
    color: #cc0000;
    text-decoration: none;
    }

    a:hover, a:active {
    color: #fff;
    background: #111;
    }

    #footer a {
    color: #fff;
    text-decoration: underline;
    }

    #blogtitle h1 a {
    color: #fff;
    }


    /* -------------------[ Images ]------------------- */

    .entry img {
    float: right;
    clear: right;
    margin: 0 0 5px 10px;
    background: #fff;
    padding: 2px;
    border: 1px solid #ccc;
    }

    img.alignright {
    float: right;
    clear: right;
    margin: 0 0 5px 10px;
    background: #fff;
    padding: 2px;
    border: 1px solid #ccc;
    }

    img.alignleft {
    float: left;
    clear: left;
    margin: 0 10px 5px 0px;
    background: #fff;
    padding: 2px;
    border: 1px solid #ccc;
    }

    img.centered {
    display: block;
    padding: 2px;
    margin: 0 auto 20px auto;
    border: 1px solid #ccc;
    float: none;
    clear: both;
    }

    /* -------------------[ Form Elements ]------------------- */

    #commentform {
    background: #eee;
    font-size:8pt;
    padding: 15px 15px 1px;
    margin: 0 0 10px 0;
    }

    #commentform label {
    display:block;
    margin: 0;
    }

    #commentform input {
    width: 170px;
    padding: 1px;
    margin: 0px 5px 10px 0;
    }

    #commentform textarea {
    width: 400px;
    padding: 0;
    margin: 0px 0px 10px 0;
    }

    #commentform #submit {
    margin: 0 0 20px 0;
    }

    #commentform p {
    margin: 5px 0;
    }

    /* -------------------[ Sidebar ]------------------- */

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

    #sidebar ul li {
    list-style-type: none;
    margin: 0 0 15px 0;
    padding: 10px;
    background: fff;
    border: 1px solid #ddd;
    }

    #sidebar h2 {
    border:0;
    font-size: 10px;
    font-family: tahoma;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0px;
    margin: 0;
    }

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

    #sidebar li li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background:transparent;
    border: 0;
    }


    /* -------------------[ Comments ]------------------- */


    ol.commentlist {
    font-size:8pt;
    padding: 0;
    margin: 0;
    }

    ol.commentlist li {
    display: block;
    list-style: none;
    padding: 15px 15px 1px;
    margin: 0 0 1px ;
    background: #eee;
    }

    ol.tblist {
    list-style: none;
    background: #eee;
    padding: 15px 15px 10px;
    font-size: 8pt;
    margin: 0 0 1px;
    }

    ol.tblist li {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #eee;
    }

    /* -------------------[ Misc Tags and Classes ]------------------- */

    acronym, abbr, span.caps {
    cursor: help;
    }

    acronym, abbr {
    border-bottom: 1px dotted #999;
    }

    * html acronym, abbr {
    border-bottom: 1px dashed #999;
    }

    blockquote {
    margin: 10px 30px;
    padding-left: 10px;
    border-left: 5px solid #ddd;
    color: #666;
    }

    .center {
    text-align: center;
    }

    a img, img a {
    border: none;
    }

    .navigation {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0px;
    padding: 10px;
    }

    .navigation .alignright {
    float: right;
    margin: 0 0 10px 0;
    }

    .navigation .alignleft {
    float: left;
    margin: 0 0 10px 0;
    }

    p {
    margin-top: 0px;
    margin-bottom: 15px;
    }

    .entry {
    padding: 10px 0 0 0;
    margin: 0;
    }

    .postinfo {
    font-size:10px;
    margin: 0px;
    border-bottom: 1px solid #000;
    padding: 0px 0px 5px 0px;
    }

    .postinfo2 {
    clear: both;
    margin: 10px 0 0 0px;
    font-size:10px;
    padding: 5px 0 5px 0px;
    border-top: 1px solid #000;
    }

    .post {
    margin: 0 0 20px 0px;
    padding: 0;
    line-height: 130%;
    }

    .featurepost {
    margin: 0 0 40px 0px;
    padding: 20px;
    line-height: 130%;
    background: #eee url(images/featuredbg.gif) top left no-repeat;
    border: 1px solid #ddd;
    }

    .description {
    color: #fff;
    text-align: center;
    padding: 0 50px;
    }

    .date {
    float: right;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    width: 120px;
    height: 21px;
    color: #fff;
    background: url(images/datebg.gif) top left no-repeat;
    padding: 4px 0 0 0;
    margin: 0;
    }

    code {
    font: 1.1em 'Courier New', Courier, Fixed;
    }

    acronym, abbr, span.caps {
    font-size: 0.9em;
    letter-spacing: .07em;
    }

    /* -------------------[ Top Navigation Bar ]------------------- */

    #nav {
    clear: both;
    width: 770px;
    margin: 0 auto;
    padding: 0;
    }

    #nav ul {
    margin: 0;
    padding: 0;
    }

    #nav li {
    float:left;
    margin:0;
    padding:0;
    list-style-type: none;
    }

    #nav li a {
    float:left;
    background: #eee url(images/buttonbg.gif) top left repeat-x;
    font-size: 9pt;
    display: block;
    border: 1px solid #ddd;
    padding: 3px 10px;
    margin: 0 10px 10px 0;
    color: #111;
    }

    #nav li a:hover {
    background: #111;
    color: #fff;
    }

    #nav li ul {
    float:left;
    }

    /* -------------------[ Search ]------------------- */

    #searchform {
    margin: 0;
    padding: 0;
    }

    #searchform #s {
    width: 120px;
    margin-right: 2px;
    }

    #searchform #submit {
    }
    ======================================================

    HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.example.com/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.example.com/1999/xhtml">

    <head profile="http://example.com/xfn/11">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title> I Town Square</title>

    <meta name="generator" content="WordPress 3.5.1" />

    <link rel="stylesheet" href="http://example.com/wp-content/themes/bosco20/style.css" type="text/css" media="screen" />

    <link rel="alternate" type="application/rss+xml" title="I Town Square RSS Feed" href="http://example.com/feed/" />

    <link rel="pingback" href="http://example.com/xmlrpc.php" />

    <link rel="alternate" type="application/rss+xml" title="I Town Square &raquo; Sample Page Comments Feed" href="http://example.com/sample-page/feed/" />
    <link rel='stylesheet' id='admin-bar-css' href='http://example.com/wp-includes/css/admin-bar.min.css?ver=3.5.1' type='text/css' media='all' />
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://example.com/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://example.com/wp-includes/wlwmanifest.xml" />
    <meta name="generator" content="WordPress 3.5.1" />
    <link rel='canonical' href='http://example.com/' />
    <style type="text/css" media="print">#wpadminbar { display:none; }</style>
    <style type="text/css" media="screen">
    html { margin-top: 28px !important; }
    * html body { margin-top: 28px !important; }
    </style>

    </head>

    <body>

    <div id="blogtitle">

    <h1><a href="http://example.com">I Town Square</a></h1>

    <p class="description">Local Town Business Directory and Events</p>

    </div>

    <div id="containertop2">
    ADSENSE 300X250 | ADSENSE 300X250
    </div></div>
    <div style="clear:both;"></div>

    <div id="page">

    <div id="content">


    <div class="post" id="post-2">

    <h1 class="pagetitle">Sample Page</h1>

    <div class="entry">
    <p>This is an example page. It&#8217;s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:</p>
    <blockquote><p>Hi there! I&#8217;m a bike messenger by day, aspiring actor by night, and this is my blog. I live in Los Angeles, have a great dog named Jack, and I like pi&#241;a coladas. (And gettin&#8217; caught in the rain.)</p></blockquote>
    <p>&#8230;or something like this:</p>
    <blockquote><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p></blockquote>
    <p>As a new WordPress user, you should go to <a href="http://example.com/wp-admin/">your dashboard</a> to delete this page and create new pages for your content. Have fun!</p>
    </div>

    </div>


    </div>

    <div id="sidebar">
    <ul>
    <li id="text-2" class="widget widget_text">
    <div class="textwidget">Adense 120x600
    </div>
    </li>

    </ul>
    </div>
    </div>

    <div id="containerbot"></div>

    <div id="footer">
    <p>I Town Square is proudly powered by <a href="http://example.com/">WordPress</a><br />
    <a href="http://example.com/feed/">Entries (RSS)</a> | <a href="http://example.com/comments/feed/">Comments (RSS)</a> | <a href="http://example.com/check?uri=referer">XHTML</a> | <a href="http://example.com/css-validator/check/referer">CSS</a></p>

    <!-- 14 queries. 0.165 seconds. -->
    <script type='text/javascript' src='http://example.com/wp-includes/js/admin-bar.min.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://example.com/wp-content/js/devicepx-jetpack.js?ver=201308'></script>
    <script type="text/javascript">
    (function() {
    var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');

    request = true;

    b[c] = b[c].replace( rcs, ' ' );
    b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
    }());
    </script>
    <div id="wpadminbar" class="nojq nojs" role="navigation">
    <a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a>
    <div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Top navigation toolbar." tabindex="0">
    <ul id="wp-admin-bar-root-default" class="ab-top-menu">
    <li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://example.com/wp-admin/about.php" title="About WordPress"><span class="ab-icon"></span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
    <li id="wp-admin-bar-about"><a class="ab-item" href="http://example.com/wp-admin/about.php">About WordPress</a> </li></ul><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu">
    <li id="wp-admin-bar-wporg"><a class="ab-item" href="http://example.com/">example.com</a> </li>
    <li id="wp-admin-bar-documentation"><a class="ab-item" href="http://example.com/">Documentation</a> </li>
    <li id="wp-admin-bar-support-forums"><a class="ab-item" href="http://example.com/">Support Forums</a> </li>
    <li id="wp-admin-bar-feedback"><a class="ab-item" href="http://example.com/support/forum/requests-and-feedback">Feedback</a> </li></ul></div> </li>
    <li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://example.com/wp-admin/">I Town Square</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-site-name-default" class="ab-submenu">
    <li id="wp-admin-bar-dashboard"><a class="ab-item" href="http://example.com/wp-admin/">Dashboard</a> </li></ul><ul id="wp-admin-bar-appearance" class="ab-submenu">
    <li id="wp-admin-bar-themes"><a class="ab-item" href="http://example.com/wp-admin/themes.php">Themes</a> </li>
    <div>

    </div>
    </div>
    </body>
    </html>
    <!-- Dynamic page generated in 0.164 seconds. -->
    <!-- Page not cached by WP Super Cache. Check your settings page. Not caching requests by known users. (See Advanced Settings page) -->
     
    renet, Feb 17, 2013 IP
  2. b4db0y

    b4db0y Notable Member

    Messages:
    3,523
    Likes Received:
    74
    Best Answers:
    0
    Trophy Points:
    205
    #2
    too much text.
    use pastebin please so easier to read and understand what you want.
    Thanks
     
    b4db0y, Feb 17, 2013 IP
  3. pix582

    pix582 Active Member

    Messages:
    313
    Likes Received:
    14
    Best Answers:
    1
    Trophy Points:
    70
    #3
    Your code is a mess, but if you want a white background container you need to add
    <body>
    <div id="wrapper">
    <div id="blogtitle">
    /\/\/\/\/\/\/\/
    then at the bottom close the tag,
    </div>
    </div></li></ul></div></div></div></div><!--end wrapper-->
    </body></html>
    And add
    #wrapper {
    width: 1050px;
    margin: auto;
    background-color: #fff;
    }
    As for the rest, you need to do a bit of tidying as its is a big mess and i dont 100% know what your trying to do. if you can tidy it a bit then i can help more.
     
    pix582, Feb 18, 2013 IP
  4. renet

    renet Greenhorn

    Messages:
    54
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #4
    Thank you for your help. Everything seems to be working correctly now.
     
    Last edited: Feb 18, 2013
    renet, Feb 18, 2013 IP