Jump to content

How do I change column width and background


NJC
 Share

Recommended Posts

I was finally able to change my layout from 2-column to 3-column. But now the column widths are all up in the air and the background is out of sync.How do I correct this?My blog is at: Not Just CricketThe CSS code is: As follows in the CodeBoxI would like to have the left and right sidebar widths at around 170.The left column's left edge without any margin.The right column's right edge without any margin.The space between the (right edge of the left sidebar) and the (left edge of the central content column) to be around 16.The space between the (left edge of the right sidebar) and the (right edge of the central content column) to be around 16.If it might make things easier, I dont mind (for now) if the background color is a single flat color- white. Once the columns and backgrounds are set, I will try and do the color change.Any help will be very much appreciated.

	/* basic page elements */body{	font-family: 'trebuchet ms', times, serif;	font-size: 11px;}a { color: #06C; text-decoration: underline; }a:visited { color: #369; }a:hover { color: #900; }#banner a { color: #fff; text-decoration: none; }#banner a:visited { color: #fff; }#banner a:hover { color: #e4e4e4; }.module-content a { color: #96c; font-weight: bold; }.module-content a:visited { color: #bcaace; }.module-content a:hover { color: #9c0; }h1, h2, h3, h4, h5, h6{	font-family: 'trebuchet ms', times, serif;}.module-header,.trackbacks-header,.comments-header,.comments-open-header,.archive-header{	/* ie win (5, 5.5, 6) bugfix */	p\osition: relative; 	width: 100%;	w\idth: auto;		margin: 0 0 1px 0;	padding: 5px 5px 5px 25px;	color: #fff;	background: #799de7 url(colitem-header-bg.gif) 0 50% repeat;	font-size: 12px;	font-weight: bold;	text-transform: uppercase;	line-height: 1;}.module-header a,.module-header a:visited,.trackbacks-header a,.trackbacks-header a:visited,.comments-header a,.comments-header a:visited,.comments-open-header a,.comments-open-header a:visited.archive-header a,.archive-header a:visited{	color: #fff;}.module-header a:hover,.trackbacks-header a:hover,.comments-header a:hover,.comments-open-header a:hover,.archive-header a: hover{	color: #369;}.module-content a { color: #369; font-weight: bold;}.module-content a:visited { color: #6e849a; }.module-content a:hover { color: #900; }.entry-more-link,.entry-footer,.comment-footer,.trackback-footer,.typelist-thumbnailed{	font-size: 10px;}/* page layout */body{	min-width: 780px;	color: #333;	background: #e1e0e0 url(body-bg.gif) repeat;}#container{	width: 780px;	background: transparent url(container-bg.gif) repeat-y;}#container-inner{	margin: 0 10px 0 10px;	border-bottom: 1px solid #4A87B9;	background: transparent url(column-right-bg.gif) -500px 0 repeat-y;}#banner{	width: 760px; /* necessary for ie win */	border-bottom: 1px solid #000;	background: #369 url(banner-bg.gif) repeat;}#banner-inner { padding: 20px; }.banner-user{	width: 70px;	margin-top: 4px;	font-size: 10px;	font-weight: normal;}.banner-user-photo { border: 3px double #fff; }#banner-header{	margin: 0;	color: #FFF;	font-size: 30px;	font-weight: bold;	line-height: 1;}#banner-description{	margin: 1px 0;	color: #fff;	background: none;	font-size: 12px;	line-height: 1.125;}#alpha { margin: 20px 0 20px 20px; width: 160px; }#beta { margin: 20px 0 0 40px; width: 340px; }#gamma, #delta { width: 160px; }.date-header{	margin: 0;	padding-bottom: 10px;	color: #666;	background: transparent url(date-header-bg.gif) repeat-x;	font-size: 14px;}.entry-header{	margin: 10px 0;	padding: 0 0 0 20px;	color: #900;	background: transparent url(entry-header-bg.gif) 0 0.2em no-repeat;	font-size: 16px;	font-weight: bold;}.entry-content { margin: 0; }.entry-footer{	margin: 0 0 20px 0;	border-top: 1px solid #eee;	padding-top: 2px;	color: #666;	font-weight: normal;}.content-nav { padding-top: 0; }/* modules */.module-calendar .module-content { margin: 5px 0 15px 0; }.module-mmt-calendar .module-content table,.module-calendar .module-content table { font-size: 11px; }.module-calendar .module-content table th { font-size: 10px; }.module-mmt-calendar .module-header a { color: #900; }.module-mmt-calendar .module-header a:visited { color: #900; }.module-mmt-calendar .module-header a:hover { color: #069; }.module-powered { margin: 20px 0; }.module-powered .module-content{	margin: 0;	padding: 10px;	border: 1px solid #ccc;	color: #333;	background: #dcd8d8 url(powered-bg.gif) repeat-x;}.module-powered a { color: #369; }.module-powered a:visited { color: #369; }.module-powered a:hover { color: #900; }.module-photo { background: none; }.module-photo img { border: solid 1px #dce1e4; }.module-list-item{	padding-left: 14px;	background: url(li-bg.gif) 0 0.3em no-repeat;	line-height: 150%;}.typelist-thumbnailed .module-list{	margin: 0;}.typelist-thumbnailed .module-list-item{	margin: 0 0 1px 0;	padding: 0;	border: 1px solid #d9dee1;	background: #e5e5e5 url(typelist-thumbnailed-bg.gif) repeat-x;}.typelist-thumbnail { background: #fff; }.module-featured-photo img{	width: 414px;}/* recent photos */.module-recent-photos .module-content { margin: 6px 0 0 0; }.module-recent-photos .module-list { margin: 0; }.module-recent-photos .module-list-item{	width: 64px; /* mac ie fix */	margin: 0 6px 6px 0;	padding: 0;	background: none;}.module-recent-photos .module-list-item a{	border: 1px solid #369;	padding: 1px;	background: #fff;}.module-recent-photos .module-list-item a:hover{	border-color: #900;}/* artistic tweaks *//* calendar tweaks */		.layout-calendar #beta { overflow: visible; }		.module-mmt-calendar { width: 420px; }			.module-mmt-calendar .module-header	{		margin: 0;		border: 0;		padding: 0;		color: #999;		background: none;		font-size: 14px;		font-weight: normal;		text-align: right;		text-transform: none;	}		.module-mmt-calendar table	{		margin-top: 6px;		color: #fff;		background: #bcc5cc;	}		.module-mmt-calendar th	{		border-right: 1px solid #eee;		border-bottom: 1px solid #eee;		padding: 2px;		background: #84a7ed;		text-align: right;		font-weight: normal;	}		.module-mmt-calendar td	{		border-right: 1px solid #eee;		border-bottom: 1px solid #eee;		padding: 2px;		background: #c3c3c3 url(calendar-td-bg.gif) repeat-x;		text-align: right;		font-weight: normal;	}		.module-mmt-calendar .weekday-7, td.day-7, td.day-14, td.day-21, td.day-28, td.day-35, td.day-42	{		border-right: none;	}		.day-photo a	{		border: solid 1px #369;		padding: 1px;		background: #fff;	}		.day-photo a:hover	{		border-color: #900;	}/* moblog1 tweaks */	.layout-moblog1 #container-inner { background-position: -220px 0; }	.layout-moblog1 #pagebody	{		background: transparent url(column-left-bg.gif) -580px 0 repeat-y;	}		.layout-moblog1 #alpha { width: 200px; }		.layout-moblog1 #beta	{		width: 320px;		margin: 20px 0 20px 20px;	}		.layout-moblog1 #gamma	{		width: 160px;		margin: 20px 0 20px 40px;	}		.layout-moblog1 .entry { margin-bottom: 40px; }		.layout-moblog1 .module-recent-photos .module-content { margin: 6px 0 0 12px; }	.layout-moblog1 .module-powered .module-content	{		margin-right: 20px;	}/* moblog2 tweaks */	.layout-moblog2 #container-inner { background-position: -350px 0; }	.layout-moblog2 #pagebody	{		background: transparent url(column-left-bg.gif) -690px 0 repeat-y;	}	.layout-moblog2 #pagebody-inner	{		background: transparent url(column-right-bg.gif) -160px 0 repeat-y;	}		.layout-moblog2 #alpha { width: 70px; }	.layout-moblog2 #beta { width: 300px; margin: 0 0 0 40px; }	.layout-moblog2 #gamma { width: 170px; margin: 0 0 0 40px; }		.layout-moblog2 #delta	{		float: left;		width: 100px;		margin: 0 0 0 20px;	}		.layout-moblog2 .module-header,	.layout-moblog2 .trackbacks-header,	.layout-moblog2 .comments-header,	.layout-moblog2 .comments-open-header,	.layout-moblog2 .archive-header	{		margin: 20px 0 1px 0;	}		.layout-moblog2 .date-header { margin-top: 20px; }		.layout-moblog2 .content-nav { padding-top: 20px; }		.layout-moblog2 .module-photo .module-content { margin: 0; }	.layout-moblog2 .module-photo img { width: 80px; height: auto; }		.layout-moblog2 .module-recent-photos .module-content	{		margin: 0;		padding: 0;		background: none;	}		.layout-moblog2 .module-recent-photos .module-list { margin: 0; }	.layout-moblog2 .module-recent-photos .module-list-item { margin: 0 0 5px 0; }		.layout-moblog2 .module-powered .module-content	{		margin-right: 20px;	}	/* timeline tweaks */	.layout-timeline #container-inner { background-position: -420px 0; }		.layout-timeline #alpha { width: 340px; }	.layout-timeline #beta { width: 360px; }		.layout-timeline #gamma,	.layout-timeline #delta	{		width: 170px;	}		.layout-timeline .module-recent-photos .module-content { padding: 0 0 10px 0; }	.layout-timeline .module-recent-photos .module-list { margin: 7px 7px 0 0; }/* one-column tweaks */	.layout-one-column body	{		min-width: 620px;	}		.layout-one-column #container	{		width: 620px;		background: transparent url(one-column-container-bg.gif) repeat-y;	}		.layout-one-column #container-inner	{		margin: 0 10px 0 10px;		border-bottom: 1px solid #5b626a;		background: transparent url(column-right-bg.gif) -500px 0 repeat-y;	}		.layout-one-column #banner	{		width: 594px; /* necessary for ie win */	}		.layout-one-column #container-inner { background: none; }	.layout-one-column #alpha { width: 560px; }		/* two-column-left tweaks */	.layout-two-column-left #container-inner { background: none; }	.layout-two-column-left #pagebody	{		background: transparent url(column-left-bg.gif) -580px 0 repeat-y;	}		.layout-two-column-left #alpha { width: 200px; }	.layout-two-column-left #beta	{		width: 500px;		margin: 20px 0 0 20px;	}		.layout-two-column-left .module-powered .module-content	{		margin-right: 20px;	}/* two-column-right tweaks */	.layout-two-column-right #container-inner { background: none; }	.layout-two-column-right #pagebody	{		background: transparent url(column-right-bg.gif) -270px 0 repeat-y;	}		.layout-two-column-right #container-inner { background: none; }	.layout-two-column-right #alpha { width: 490px; }	.layout-two-column-right #beta	{		width: 200px;		margin: 20px 0 0 40px;	}/* three-column tweaks */		.layout-three-column #container-inner { background-position: -260px 0; }	.layout-three-column #pagebody	{		background: transparent url(column-left-bg.gif) -580px 0 repeat-y;	}		.layout-three-column #alpha { width: 160px; }		.layout-three-column #beta	{		width: 340px;		margin: 20px 0 20px 20px;	}		.layout-three-column #gamma	{		width: 160px;		margin: 20px 0 20px 40px;	}		.layout-three-column .module-powered .module-content	{		margin-right: 20px;	}	  

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...