Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    reducing sidebar width

    hi, how do i push the black vertical line that is just to the right of my main body of text, and in doing so i will be able to reduce the width of my sidebar with the banner.

    i want to move the black line to the right

    www.mmorpg-finder.com

    css stylesheet file:

    Code:
    /*  
    Theme Name: Breaking News
    Theme URI: http://www.idsg.it/
    Description: A "mixed" width, three columns "daily newspaper" theme for Wordpress.<br /><br />Wordpress Widgets ready. <br /><br />Minimal style ready for personal improvements.
    Version: 1.0
    Author: ShinRa
    Author URI: http://www.idsg.it/
    */
    
    /**
    * Eric Meyer's Reset stylesheet - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
    */
    
    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,
    dl,dt,dd,ol,ul,li,
    fieldset,form,label,legend,
    table,caption,tbody,tfoot,thead,tr,th,td{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-weight:normal;
    font-style:normal;
    font-size:100%;
    font-family:inherit;
    vertical-align:baseline;
    }
    
    body{
    line-height:1;
    color:black;
    background:white;
    }
    
    ol,ul{
    list-style:none;
    }
    
    table{
    border-collapse:separate;
    border-spacing:0;
    }
    
    caption,th,td{
    text-align:left;
    font-weight:normal;
    }
    
    blockquote:before,blockquote:after,
    q:before,q:after{
    content:"";
    }
    
    blockquote,q{
    quotes:"" "";
    }
    
    /**
    * GLOBALS
    */
    
    body{
    background:#fff url(images/sfondobis.jpg) repeat left top;
    color:#333;
    text-align:center;
    font-family:Georgia,"Lucida bright","Times new roman",Georgia,"lucida bright",serif;
    font-size:12px;
    }
    
    h1{
    
    }
    
    h2{
    font-size:18px;
    font-weight:bold;
    line-height:150%;
    font-family:"lucida bright",Georgia,serif;
    font-variant:small-caps;
    text-align:left;
    }
    
    h3{
    text-align:left;
    font-size:15px;
    font-weight:bold;
    line-height:150%;
    font-variant:small-caps;
    }
    
    hr{
    display:none;
    }
    
    a{
    text-decoration:none;
    color:#123456;
    }
    
    a:visited{
    color:#345678;
    }
    
    a:hover{
    text-decoration:underline;
    color:#654321;
    }
    
    p{
    line-height:150%;
    margin-bottom:10px;
    }
    
    li{
    line-height:140%;
    }
    
    ul,ol{
    margin-bottom:10px;
    }
    
    img{
    padding:1px;
    background:#000;
    border:10px solid #eee;
    max-width:90%;
    margin:0 0 10px 0;
    }
    
    img.wp-smiley{
    display:inline !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    vertical-align:middle !important;
    border:0 !important;
    }
    
    strong{
    font-weight:bold;
    }
    
    em{
    font-style:italic;
    }
    
    /**
    * MAIN WRAPPER
    */
    
    #wrapper{
    text-align:justify;
    margin:0 auto 0 auto;
    padding:0;
    background:transparent url(images/sfondo.jpg) repeat-y right top;
    max-width:1024px;
    }
    
    /**
    * HEADER
    */
    
    #header{
    padding:35px 10px 10px 10px;
    height:75px;
    text-align:center;
    background:transparent url(images/sfondobis.jpg) repeat left top;
    border-bottom:5px solid #000;
    }
    
    #header h1{
    letter-spacing:2px;
    font-size: 34px;
    line-height: 1;
    text-align:center;
    font-variant: small-caps;
    }
    
    
    
    #header h1 a{
    color:#000;
    text-decoration:none;
    }
    
    
    #header h2 {
    font-size: 10px;
    text-align: center;
    color:#999;
    letter-spacing:2px;
    text-transform:uppercase;
    }
    
    #header div.logo{
    display:block;
    width:142px;
    height:75px;
    background: transparent url (images/logo.gif) no-repeat left top;
    position:absolute;
    top:10px;
    margin-left:10px;
    }
    
    #header div.logo span{
    }
    
    h1.keyword {
    	font-size: 12px;
    	margin: 3px;
    	padding: 0;
    	float: right;
    }
    
    /**
    * TOP PAGES LIST
    */
    
    #pagine{
    border-bottom:5px solid #000;
    background:transparent url(images/sfondobis.jpg) repeat left top;
    text-align:center;
    }
    
    #pagine ul{
    margin-bottom:0;
    padding:5px;
    }
    
    #pagine ul li{
    display:inline;
    margin-right:10px;
    }
    
    #pagine a{
    color:#333;
    text-transform:uppercase;
    }
    
    /**
    * FIRST MAIN COLUMN
    */
    
    #content{
    padding:10px;
    margin-right:500px;
    }
    
    #content div.post{
    padding-bottom:30px;
    margin-bottom:30px;
    border-bottom:1px solid #000;
    color:#000;
    }
    
    #content div.post h2{
    font-size:24px;
    }
    
    #content ul{
    list-style-type:square;
    padding-left:30px;
    }
    
    #content ol{
    list-style-type:lower-alpha;
    padding-left:30px;
    }
    
    #content code{
    font-family:courier,"courier new", monospace;
    font-size:14px;
    background-color:#dfdfdf;
    }
    
    #content blockquote{
    padding:6px;
    font-style:italic;
    color:#555;
    }
    
    #content blockquote p{
    font-style:italic;
    }
    
    .navigation div{
    line-height:200%;
    }
    
    p.details_small{
    font-size:11px;
    color:#876543;
    }
    
    p.details_small a{
    color:#876543;
    text-decoration:underline;
    }
    
    p.date{
    text-align:right;
    font-size:12px;
    color:#111;
    }
    
    #content em{
    font-style:italic;
    }
    
    
    /**
    * RIGHT SIDEBAR WITH MENU
    */
    
    #sidebar{
    padding:10px;
    float:right;
    width:230px;
    font-size:11px;
    }
    
    #sidebar h2{
    font-size:16px;
    }
    
    #sidebar ul li ul{
    border-bottom:1px solid #000;
    margin-bottom:15px;
    padding-bottom:15px;
    }
    
    #sidebar ul,
    #sidebar ul li ul li ul{
    border-bottom:0;
    margin-bottom:0;
    padding-bottom:0;
    }
    
    #sidebar ul li ul li ul{
    margin-bottom:0;
    padding-left:10px;
    border-left:1px solid #aaa;
    }
    
    /**
    * LEFT SIDEBAR WITH EXTRA CONTENTS
    */
    
    #sidebarB{
    padding:10px;
    float:right;
    width:230px;
    font-size:11px;
    }
    
    #sidebarB h2, #sidebarB h3{
    font-size:16px;
    }
    
    #sidebarB div.post{
    padding-bottom:15px;
    margin-bottom:15px;
    border-bottom:1px solid #000;
    }
    
    #sidebarB em{
    font-style:italic;
    }
    
    #sidebarB blockquote{
    padding:6px;
    font-style:italic;
    color:#555;
    }
    
    #sidebarB blockquote p{
    font-style:italic;
    }
    
    #sidebarB code{
    font-family:courier,"courier new", monospace;
    font-size:14px;
    background-color:#dfdfdf;
    }
    
    #sidebarB div.information{
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:1px solid #000;
    }
    
    /**
    * FOOTER
    */
    
    #footer{
    padding:10px;
    background:transparent url(images/sfondobis.jpg) repeat left top;
    border-top:5px solid #000;
    clear:both;
    text-align:center;
    font-size:11px;
    }
    Last edited by pupkevicius; 11-23-2008 at 05:22 PM. Reason: incorrect post

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello pupkevicius,
    Try adjusting the width of that div here-
    Code:
    /**
    * LEFT SIDEBAR WITH EXTRA CONTENTS
    */
    
    #sidebarB{
    padding:10px;
    float:right;
    width:230px;
    font-size:11px;
    }
    
    #sidebarB h2, #sidebarB h3{
    font-size:16px;
    }
    And then adjust the width of .post -
    Code:
    /**
    * FIRST MAIN COLUMN
    */
    
    #content{
    padding:10px;
    margin-right:440px;
    }
    
    #content div.post{
    padding-bottom:30px;
    margin-bottom:30px;
    border-bottom:1px solid #000;
    color:#000;
    }
    It looks like that border is coming from the googlead. I looked in your code for "the black vertical line that is just to the right of my main body of text" for a while before I figured that out. You might have to play with the widths a bit to get it all to fit with the right spacing...
    Last edited by Excavator; 11-23-2008 at 05:55 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Or you can use a percent if you want it auto adjusted depending on a persons screen res.

    Code:
    width:10%;

  • #4
    New Coder
    Join Date
    Nov 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that black vertical line is definently not from the google ad.

    i tried to do what you suggested, for the first one only the banner moved to the left overlapping the black line, then for your second part the content moved to the right being obscured by the banner,

    bassically neither step moved the balck vertical line, instead moved other stuff,

    can you please help me identify the coding responsible for the black line

    thanks

  • #5
    New Coder
    Join Date
    Nov 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i think i may have found the problem, the blacklines are part of a .jpeg image, which are used to make up the background.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Oops! So they are -





    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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