...

View Full Version : reducing sidebar width



pupkevicius
11-23-2008, 05:21 PM
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:


/*
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;
}

Excavator
11-23-2008, 05:32 PM
Hello pupkevicius,
Try adjusting the width of that div here-
/**
* 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 -
/**
* 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...

masterofollies
11-23-2008, 05:47 PM
Or you can use a percent if you want it auto adjusted depending on a persons screen res.


width:10%;

pupkevicius
11-23-2008, 08:00 PM
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

pupkevicius
11-23-2008, 08:06 PM
i think i may have found the problem, the blacklines are part of a .jpeg image, which are used to make up the background.

Excavator
11-23-2008, 08:09 PM
Oops! So they are -

http://mmorpg-finder.com/wp-content/themes/breaking-news-10/images/sfondo.jpg



.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum