Need some css help

Jeka · 2008-02-07, 11:19 PM

Working on a new template for a blog and I wonder how I can get the sidebar move left? The original template is 950px wide, I changed that to 720 but now the sidebar doesn't fit below the header anymore.

Here's the style.css

Code:

*/
body {
	font: 75%/150% "Trebuchet MS", Tahoma, Arial;
	color: #ffffff;
	
                background: #000000 ;
	margin: 0px;
	padding: 50px 0px 10px 0px;
}
 a {
	color: #8caa31 ;
	text-decoration: none;
                
}
a:visited {
	color: #8caa31;
	text-decoration: none;
                
}
a:hover {
	color: #35ad25;
	text-decoration: none;
}
img {
	border: 1px solid #8caa31;

}
p {
	padding: 0px 0px 15px;
	margin: 0px;
}
h1 {
	margin:0px;
	padding-left: 0px;
	height: 60px;
	font: bold 36px/100% "Trebuchet MS", Tahoma, Arial;
	color: #d9d351;
}
h1 a, h1 a:visited{
	color: #d9d351;
	text-decoration: none;
}
h1 a:hover{
	color: #d9d351;
	text-decoration: none;
}
h2 {
	color: #d7c525;
	margin: 0px 0px 2px;
	border-bottom: 1px dotted #d9d351;
	letter-spacing: -1px;
	font: normal 190%/100% "Trebuchet MS", Tahoma, Arial;
	padding-bottom: 3px;
}
h2 a, h2 a:visited {
	color: #d7c525;
	text-decoration: none;
}
h2 a:hover {
	color: #EAB43B;
	text-decoration: none;
}
h3 {
	font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
	color: #d7c525;
	margin: 10px 0px 5px;
}
h4 {
	font: normal 130%/100% "Trebuchet MS", Tahoma, Arial;
	color: #d7c525;
	margin: 10px 0px 5px;
}
form {
	margin:0px;
	padding:0px;
}
#page {
	margin: 0px auto;
	width: 950px;
	background: #000000 ;
                
}
/* header area */
#header {
	background: #000000 url(img/header.jpg) no-repeat;
	height: 170px;
	position: relative;
}
#headerlogo {
	position: relative;
	padding: 20px 0px 0px 360px;
	height: 60px;
}
#headerlogo .description{
	position: absolute;
	left: 520px;
	bottom: 3px;
	color: #d9d351;
	font-size: 16px;
}
#nav {
	list-style: none;
	margin: 0px;
	position: absolute;
                right: 5px;
	top: -27px;
}
#nav li {
	float: left;
	margin-left: 2px;
}
#nav .current_page_item a:visited{
	color: #8caa31;
	text-decoration: none;
}
#nav .page_item a{
	color: #8caa31;
	text-decoration: none;
	background: #000000;
	padding: 5px 15px;
	font: bold 14px/100% Arial, Helvetica, sans-serif;
	border: 1px solid #8caa31;
	display: block;
}
 #nav .current_page_item a,#nav .page_item a:hover {
	color: #d7c525;
                text-decoration: none;
	background: #000000 ;
	padding: 5px 15px;
	font: bold 14px/100% Arial, Helvetica, sans-serif;
	border :1px dotted #d7c525;
	display: block;
}
/* content  */
#content {
	padding: 10px 10px 25px 13px;
	float: left;
	width: 692px;
	overflow: hidden;
}
.post {
	clear:both;
	padding-top: 15px;
}

.post-date {
	width: 45px;
	height: 56px;
                color: #149f01;
                float:left;
	
}
.post-month {
	font-size: 11px;
	text-transform: uppercase;
	color: #FADEA2;
	text-align: center;
	display:block;
	line-height: 11px;
	padding-top: 2px;
	margin-left: -3px;
}
.post-day {
	font-size: 18px;
	text-transform: uppercase;
	color: #8caa31;
	text-align: center;
	display:block;
	line-height: 18px;
	padding-top: 2px;
	margin-left: -3px;
}
.entry {
	float:left;
	width: 440px;
}
.post-cat {
	background: #000000;
	padding-left: 20px;
	float:left;
	font-size: 95%;
	color: #149f01;
}
.post-comments {
	background: #000000;
	padding-left: 20px;
	float: right;
	font-size: 95%;
}
.post-calendar {
	background: #000000;
	padding-left: 20px;
	float: right;
	font-size: 95%;
	color: #149f01;
}
.post-content {
	clear: both;
	padding-top: 10px;
}
.navigation {
	clear: both;
	padding: 10px 0px;
}
.navigation a, .navigation a:visited {
	color: #8caa31;
}
.previous-entries a {
	float: left;
	padding-left: 18px;
	background: url(img/arrowleft.gif) no-repeat left center;
}
.next-entries a {
	float: right;
	padding-right: 18px;
	background: url(img/arrowright.gif) no-repeat right center;
}

/* comments  */
#comments, #respond {
	border-bottom: 1px dotted #d9d351;
	padding: 10px 0 5px 0;
	clear: both;
}
.commentlist {
	margin: 10px 0px;
	padding-left: 20px;
	line-height: 130%;
}
.commentlist li{
	padding: 5px 10px;
}
.commentlist .alt {
	background: #464f06;
}
.commentlist cite, .commentlist cite a, .commentlist cite a:visited {
	font-weight: bold;
	font-style: normal;
	font-size: 120%;
	color: #FADEA2;
}
.commentlist small {
	margin-bottom: 5px;
	display: block;
	font-size: 87%;
}
#commentform {
	margin-top: 10px;
	font: 110% Arial, Helvetica, sans-serif;
}
#commentform p {
	padding: 6px 0px;
	margin: 0px;
}
#commentform label{
	color: #d9d351;
	font-size: 87%;
}
#commentform input{
	width: 200px;
	background:#000000;
	border: 1px solid #8caa31;
	padding: 3px;
	margin-top: 3px;
                color: #8caa31;
}
#commentform textarea{
	width: 515px;
	height: 115px;
	background:#000000;
	border: 1px solid #8caa31;
	padding: 2px;
	margin-top: 3px;
                color: #8caa31;
}
#commentform textarea:focus, #commentform input[type="text"]:focus {
	background: #000000;
}
#commentform #submit{
	background: #000000 ;
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #8caa31;
	border:1px solid #8caa31;	
                float:right;
	width: 144px;
	height: 28px;
	cursor: pointer;
}
/*sidebar */
#sidebar {
	float: right;
	padding: 10px 0px 25px 13px;
	width: 220px;
	color: #d9d351;
	overflow: hidden;
}
/*sidebar title  */
#sidebar h3, #sidebar .sidebartitle{
	font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
	color: #8caa31;
	margin: 20px 0px 2px;
	border-bottom: 1px dotted #818520;
}
/*sidebar text styles */
#sidebar a, #sidebar a:visited{
	color: #d9d351;
                font-size: 12px;
	text-decoration: none;
}
#sidebar a:hover{
	color: #d9d351;
                font-size: 12px;
	text-decoration: none;
}
/*sidebar list level1 */
#sidebar ul {
	margin: 0;
	padding: 0;
}
#sidebar ul li {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}
/*sidebar list level2 */
#sidebar ul li ul {
	padding:0;
	margin: 0;
}
#sidebar ul li ul li{
	padding: 0px 2px 0px 10px;
	border: none;
}
/*sidebar list level3 */
#sidebar ul li ul li ul li{
	padding: 1px 0 1px 0px;
	border: none;
}
/*blogroll widget */
ul.list-blogroll li{
	background: url(img/arrow.gif) no-repeat !important;
	padding-left: 22px !important;
}
/*meta  widget*/
ul.list-meta li{
	background: url(img/arrow.gif) no-repeat !important;
	padding-left: 22px !important;
}
/*rss widget */
ul.list-rss li{
	background: url(img/arrow.gif) no-repeat !important;
	padding-left: 22px !important;
}
/*category  widget */
ul.list-cat li, li.bar_categories li{
	background: url(img/arrow.gif) no-repeat !important;
	padding-left: 22px !important;
}
/*recent  widget  */
ul.list-rec li, li.bar_comments ul li {
	background: url(img/arrow.gif) no-repeat !important;
	padding-left: 22px !important;
}
/*archives widget */
ul.list-archives li, li.bar_archives li{
	background: url(img/arrow.gif) no-repeat !important;
	padding-left: 22px !important;
}
/*pages widget */
ul.list-page li, li.bar_pages li, li.bar_recent_entries li{
	background: url(img/arrow.gif) no-repeat !important;
	padding-left: 22px !important;
}
/*sub-pages widget */
ul.list-page li ul li, li.bar_pages li ul li{
	background: url(img/arrow.gif) no-repeat !important;
	padding-left: 15px !important;
}
/*calendar bar widget */
li.bar_calendar td {
	padding: 1px 7px;
}
/*text bar */
.textbar {
	padding-top: 5px;
}
}
#searchform br {
	display: none;
}
#searchform #s {
	width: 135px;
	height: 22px;
	padding: 4px 5px 0px 5px;
	border: 1px solid #8caa31;
	background: #000000;
	margin-right: 2px;
	color: #8caa31;
	font-weight: normal;
}
/* search form button - to specify button only use input[type="submit"] */
#searchform input {
	background: #000000;
	border: 1px solid #8caa31;
	width: 67px;
	height: 26px;
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #8caa31;
	vertical-align: middle;
}

/* page close */
#close {
	clear: both;
	background: #ffffff;
	color: #ffffff;
	font-size: 95%;
	line-height: 130%;
	padding-bottom: 0px;
}
/* footer bar */
#footer {
	margin: 0px auto;
                width: 950px;
                background: #221d1d ;
                color: #d7c525;
                height: 30px;
                font-size: 12px;
	line-height: 100%;
                border-top: 3px solid #8caa31;
                border-bottom: 2px solid #8caa31;
}
#footer a, #credit a:visited {
                margin-top: 8px;
	color: #d7c525;
}
/* alignments */
.center {
	text-align: center;
}
img.center, img[align="center"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignleft {
	float: left;
}
img.alignleft, img[align="left"] {
	float:left;
	margin: 2px 10px 5px 0px;
}
.alignright {
	float: right;
}
img.alignright, img[align="right"] {
	float:right;
	margin: 2px 0px 5px 10px;
}
.clear {
	clear:both;
}
hr.clear {
	clear:both;
	visibility: hidden;
	margin: 0px;
	padding: 0px;
}

Useless · 2008-02-08, 12:34 AM

Change:
#page {
margin: 0px auto;
width: 950px;
background: #000000 ;

to:

#page {
margin: 0px auto;
width: 750px;
background: #000000 ;

#content {
padding: 10px 10px 25px 13px;
float: left;
width: 692px;
overflow: hidden;
}

to:

#content {
padding: 10px 10px 25px 13px;
float: left;
width: 492px;
overflow: hidden;
}

and you may want to change

#headerlogo .description{
position: absolute;
left: 520px;
bottom: 3px;
color: #d9d351;
font-size: 16px;
}

to:

#headerlogo .description{
position: absolute;
left: 420px;
bottom: 3px;
color: #d9d351;
font-size: 16px;
}
in order to bring the text back onto the header background image.

dunc · 2008-02-08, 12:35 AM

Try this, it will need some tidying up

Code:

body {
	font: 75%/150% "Trebuchet MS", Tahoma, Arial;
	color: #ffffff;
	
                background: #000000 ;
	margin: 0px;
	padding: 50px 0px 10px 0px;
}
 a {
	color: #8caa31 ;
	text-decoration: none;
                
}
a:visited {
	color: #8caa31;
	text-decoration: none;
                
}
a:hover {
	color: #35ad25;
	text-decoration: none;
}
img {
	border: 1px solid #8caa31;

}
p {
	padding: 0px 0px 15px;
	margin: 0px;
}
h1 {
	margin:0px;
	padding-left: 0px;
	height: 60px;
	font: bold 36px/100% "Trebuchet MS", Tahoma, Arial;
	color: #d9d351;
}
h1 a, h1 a:visited{
	color: #d9d351;
	text-decoration: none;
}
h1 a:hover{
	color: #d9d351;
	text-decoration: none;
}
h2 {
	color: #d7c525;
	margin: 0px 0px 2px;
	border-bottom: 1px dotted #d9d351;
	letter-spacing: -1px;
	font: normal 190%/100% "Trebuchet MS", Tahoma, Arial;
	padding-bottom: 3px;
}
h2 a, h2 a:visited {
	color: #d7c525;
	text-decoration: none;
}
h2 a:hover {
	color: #EAB43B;
	text-decoration: none;
}
h3 {
	font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
	color: #d7c525;
	margin: 10px 0px 5px;
}
h4 {
	font: normal 130%/100% "Trebuchet MS", Tahoma, Arial;
	color: #d7c525;
	margin: 10px 0px 5px;
}
form {
	margin:0px;
	padding:0px;
}
#page {
	margin: 0px auto;
	width: 720px;
	background: #000000 ;
                
}
/* header area */
#header {
	background: #000000 url(img/header.jpg) no-repeat;
	height: 170px;
	position: relative;
}
#headerlogo {
	position: relative;
	padding: 20px 0px 0px 180px;
	height: 60px;
}
#headerlogo .description{
	position: absolute;
	left: 520px;
	bottom: 3px;
	color: #d9d351;
	font-size: 16px;
}
#nav {
	list-style: none;
	margin: 0px;
	position: absolute;
                right: 5px;
	top: -27px;
}
#nav li {
	float: left;
	margin-left: 2px;
}
#nav .current_page_item a:visited{
	color: #8caa31;
	text-decoration: none;
}
#nav .page_item a{
	color: #8caa31;
	text-decoration: none;
	background: #000000;
	padding: 5px 15px;
	font: bold 14px/100% Arial, Helvetica, sans-serif;
	border: 1px solid #8caa31;
	display: block;
}
 #nav .current_page_item a,#nav .page_item a:hover {
	color: #d7c525;
                text-decoration: none;
	background: #000000 ;
	padding: 5px 15px;
	font: bold 14px/100% Arial, Helvetica, sans-serif;
	border :1px dotted #d7c525;
	display: block;
}
/* content  */
#content {
	padding: 10px 10px 25px 13px;
	float: left;
	width: 450px;
	overflow: hidden;
}
.post {
	clear:both;
	padding-top: 15px;
}

.post-date {
	width: 45px;
	height: 56px;
                color: #149f01;
                float:left;
	
}
.post-month {
	font-size: 11px;
	text-transform: uppercase;
	color: #FADEA2;
	text-align: center;
	display:block;
	line-height: 11px;
	padding-top: 2px;
	margin-left: -3px;
}
.post-day {
	font-size: 18px;
	text-transform: uppercase;
	color: #8caa31;
	text-align: center;
	display:block;
	line-height: 18px;
	padding-top: 2px;
	margin-left: -3px;
}
.entry {
	float:left;
	width: 440px;
}
.post-cat {
	background: #000000;
	padding-left: 20px;
	float:left;
	font-size: 95%;
	color: #149f01;
}
.post-comments {
	background: #000000;
	padding-left: 20px;
	float: right;
	font-size: 95%;
}
.post-calendar {
	background: #000000;
	padding-left: 20px;
	float: right;
	font-size: 95%;
	color: #149f01;
}
.post-content {
	clear: both;
	padding-top: 10px;
}
.navigation {
	clear: both;
	padding: 10px 0px;
}
.navigation a, .navigation a:visited {
	color: #8caa31;
}
.previous-entries a {
	float: left;
	padding-left: 18px;
	background: url(img/arrowleft.gif) no-repeat left center;
}
.next-entries a {
	float: right;
	padding-right: 18px;
	background: url(img/arrowright.gif) no-repeat right center;
}

/* comments  */
#comments, #respond {
	border-bottom: 1px dotted #d9d351;
	padding: 10px 0 5px 0;
	clear: both;
}
.commentlist {
	margin: 10px 0px;
	padding-left: 20px;
	line-height: 130%;
}
.commentlist li{
	padding: 5px 10px;
}
.commentlist .alt {
	background: #464f06;
}
.commentlist cite, .commentlist cite a, .commentlist cite a:visited {
	font-weight: bold;
	font-style: normal;
	font-size: 120%;
	color: #FADEA2;
}
.commentlist small {
	margin-bottom: 5px;
	display: block;
	font-size: 87%;
}
#commentform {
	margin-top: 10px;
	font: 110% Arial, Helvetica, sans-serif;
}
#commentform p {
	padding: 6px 0px;
	margin: 0px;
}
#commentform label{
	color: #d9d351;
	font-size: 87%;
}
#commentform input{
	width: 200px;
	background:#000000;
	border: 1px solid #8caa31;
	padding: 3px;
	margin-top: 3px;
                color: #8caa31;
}
#commentform textarea{
	width: 515px;
	height: 115px;
	background:#000000;
	border: 1px solid #8caa31;
	padding: 2px;
	margin-top: 3px;
                color: #8caa31;
}
#commentform textarea:focus, #commentform input[type="text"]:focus {
	background: #000000;
}
#commentform #submit{
	background: #000000 ;
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #8caa31;
	border:1px solid #8caa31;	
                float:right;
	width: 144px;
	height: 28px;
	cursor: pointer;
}
/*sidebar */
#sidebar {
	float: right;
	padding: 10px 0px 25px 13px;
	width: 185px;
	color: #d9d351;
	overflow: hidden;
}
/*sidebar title  */
#sidebar h3, #sidebar .sidebartitle{
	font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
	color: #8caa31;
	margin: 20px 0px 2px;
	border-bottom: 1px dotted #818520;
}
/*sidebar text styles */
#sidebar a, #sidebar a:visited{
	color: #d9d351;
                font-size: 12px;
	text-decoration: none;
}
#sidebar a:hover{
	color: #d9d351;
                font-size: 12px;
	text-decoration: none;
}
/*sidebar list level1 */
#sidebar ul {
	margin: 0;
	padding: 0;
}
#sidebar ul li {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}
/*sidebar list level2 */
#sidebar ul li ul {
	padding:0;
	margin: 0;
}
#sidebar ul li ul li{
	padding: 0px 2px 0px 10px;
	border: none;
}
/*sidebar list level3 */
#sidebar ul li ul li ul li{
	padding: 1px 0 1px 0px;
	border: none;
}
/*blogroll widget */
ul.list-blogroll li{
	background: url(img/arrow.gif) no-repeat !important;
	padding-left: 22px !important;
}
/*meta  widget*/
ul.list-meta li{
	background: url(img/arrow.gif) no-repeat !important;
	padding-left: 22px !important;
}
/*rss widget */
ul.list-rss li{
	background: url(img/arrow.gif) no-repeat !important;
	padding-left: 22px !important;
}
/*category  widget */
ul.list-cat li, li.bar_categories li{
	background: url(img/arrow.gif) no-repeat !important;
	padding-left: 22px !important;
}
/*recent  widget  */
ul.list-rec li, li.bar_comments ul li {
	background: url(img/arrow.gif) no-repeat !important;
	padding-left: 22px !important;
}
/*archives widget */
ul.list-archives li, li.bar_archives li{
	background: url(img/arrow.gif) no-repeat !important;
	padding-left: 22px !important;
}
/*pages widget */
ul.list-page li, li.bar_pages li, li.bar_recent_entries li{
	background: url(img/arrow.gif) no-repeat !important;
	padding-left: 22px !important;
}
/*sub-pages widget */
ul.list-page li ul li, li.bar_pages li ul li{
	background: url(img/arrow.gif) no-repeat !important;
	padding-left: 15px !important;
}
/*calendar bar widget */
li.bar_calendar td {
	padding: 1px 7px;
}
/*text bar */
.textbar {
	padding-top: 5px;
}
}
#searchform br {
	display: none;
}
#searchform #s {
	width: 135px;
	height: 22px;
	padding: 4px 5px 0px 5px;
	border: 1px solid #8caa31;
	background: #000000;
	margin-right: 2px;
	color: #8caa31;
	font-weight: normal;
}
/* search form button - to specify button only use input[type="submit"] */
#searchform input {
	background: #000000;
	border: 1px solid #8caa31;
	width: 67px;
	height: 26px;
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #8caa31;
	vertical-align: middle;
}

/* page close */
#close {
	clear: both;
	background: #ffffff;
	color: #ffffff;
	font-size: 95%;
	line-height: 130%;
	padding-bottom: 0px;
}
/* footer bar */
#footer {
	margin: 0px auto;
                width: 720px;
                background: #221d1d ;
                color: #d7c525;
                height: 30px;
                font-size: 12px;
	line-height: 100%;
                border-top: 3px solid #8caa31;
                border-bottom: 2px solid #8caa31;
}
#footer a, #credit a:visited {
                margin-top: 8px;
	color: #d7c525;
}
/* alignments */
.center {
	text-align: center;
}
img.center, img[align="center"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignleft {
	float: left;
}
img.alignleft, img[align="left"] {
	float:left;
	margin: 2px 10px 5px 0px;
}
.alignright {
	float: right;
}
img.alignright, img[align="right"] {
	float:right;
	margin: 2px 0px 5px 10px;
}
.clear {
	clear:both;
}
hr.clear {
	clear:both;
	visibility: hidden;
	margin: 0px;
	padding: 0px;
}

I changed the #page and #footer width to 720px, altered the #content and #sidebar width to make it all fit

Jeka · 2008-02-08, 01:08 AM

Thanks guys, I tried both of your codes but it did not change the template. The sidebar is still too far on the right.

Useless · 2008-02-08, 01:54 AM

Quote:

Originally Posted by Jeka

Thanks guys, I tried both of your codes but it did not change the template. The sidebar is still too far on the right.

Clear your cache. See if that does the trick.

Jeka · 2008-02-08, 05:49 AM

Did that but it's still the same.

Useless · 2008-02-08, 09:14 AM

Quote:

Originally Posted by Jeka

Did that but it's still the same.

Looking at your CSS, it doesn't appear that you've saved any of the changes that were suggested. If you make the changes I printed above (#page, #content, #headlogo.description) and Dunc's footer width change, it looks fine in both FireFox and IE.

Jeka · 2008-02-08, 09:18 AM

Well I uploaded the old css file again after the changes did not show up. I changed it again now and cleared my cache and it works.

thanks UW!

2008-02-08, 12:34 AM	#2
Useless Certified Nice Person Join Date: Oct 2003 Location: Dirty Undies, NY Posts: 11,268	Change: #page { margin: 0px auto; width: 950px; background: #000000 ; to: #page { margin: 0px auto; width: 750px; background: #000000 ; #content { padding: 10px 10px 25px 13px; float: left; width: 692px; overflow: hidden; } to: #content { padding: 10px 10px 25px 13px; float: left; width: 492px; overflow: hidden; } and you may want to change #headerlogo .description{ position: absolute; left: 520px; bottom: 3px; color: #d9d351; font-size: 16px; } to: #headerlogo .description{ position: absolute; left: 420px; bottom: 3px; color: #d9d351; font-size: 16px; } in order to bring the text back onto the header background image. __________________ Click here to purchase a bridge I'm selling.

2008-02-08, 01:08 AM	#4
Jeka My wife is not a doobie to be passed around! On our wedding day I promised to bogart her for life! Join Date: Jul 2004 Posts: 275	Thanks guys, I tried both of your codes but it did not change the template. The sidebar is still too far on the right.

2008-02-08, 05:49 AM	#6
Jeka My wife is not a doobie to be passed around! On our wedding day I promised to bogart her for life! Join Date: Jul 2004 Posts: 275	Did that but it's still the same.

2008-02-08, 09:18 AM	#8
Jeka My wife is not a doobie to be passed around! On our wedding day I promised to bogart her for life! Join Date: Jul 2004 Posts: 275	Well I uploaded the old css file again after the changes did not show up. I changed it again now and cleared my cache and it works. thanks UW!