* positioning * Moving the entire #content/#header/#footer to the right
-
I have a situation where I want to move the entire #content/#header/#footer over to the right.
What do I change to get everything shifted to the very right side, and left a blank background on the left side. My content (middle part) is 888px, and it is currently centered in the middle. I just need to shift it over. Thanks!
Here is my stylesheet:
/***** general *****/
body {
margin:0px auto;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
background: #4c4c4e;
background-image: url(‘images/bg_xcan.jpg’);
background-repeat: repeat;
background-attachment: fixed;
color:#000000;
}
img {
border:0px;
padding:5px;
max-width: 100%; /* not working in IE6*/
/*height: auto;*/ /* you can enable this.*/
}
a {color:#003399;text-decoration: none;}
a:hover {color: #003300;text-decoration: none;}h1 {font-size:30px;}
h2 {font-size:26px;}
h3 {font-size:21px;}
h4 {font-size:17px;}
h5 {font-size:14px;}
h6 {font-size:12px;}p {margin: 0px 0px 12px 0px;}
hr {height:1px;border:none;border-top:1px dashed #73943B; width:90%;}
del {color:red;}
ins {color:green;}
blockquote {
clear: left;
text-align: justify;
padding: 0px 0px 0px 10px;
margin: 20px 20px 10px 20px;
border-left: 2px solid #73943B;
}
input,select,textarea {
font-size:12px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
}
code{
font: 1.1em ‘Courier New’, Courier, Fixed;
}.alignleft {float: left;}
.alignright {float: right;}
.aligncenter,div.aligncenter{
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft {
padding: 5px;
margin: 0 7px 2px 0;
display: inline;
}img.alignright {
padding: 5px;
margin: 0 0 2px 7px;
display: inline;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.clear {clear:both;}
.spacer {height:29px;}
/***** layout *****/
#base{
width:888px;
margin:0px auto;
background: url(‘images/repeater.jpg’) repeat-y center;
}
#base2{
width:888px;
background: url(‘images/footer_xcan.jpg’) no-repeat center bottom;
}
#header{
position:relative;
width: 888px;
height: 334px;
background:url(‘images/header_xcan.jpg’) no-repeat center;
}
#container{
position:relative;
width:888px;
overflow:hidden;
background:url(‘images/container_bg.jpg’) no-repeat 0 0;
}#content{ /*width=698px*/
float:left;
display:inline;
overflow:hidden; /*when ie6, image’s with is > content width, hidden*/
width:658px;
min-height:614px; /*ie6 not support*/
padding: 0px 15px 0px 25px;
background:url(‘images/content_bg.jpg’) no-repeat 567px 0px;
}
#sidebar{ /*width=190px*/
float:right;
display:inline;
overflow:hidden;
width: 174px;
margin:0 0 0 0;
padding: 0px 8px 0px 8px;
color:#ffffff;
}
#footer {
clear:both;
margin:0px;
color: #ffffff;
font-size: 11px;
padding:35px 190px 14px 20px;
}
#footer a {color: #1589FF; font-weight:bold;}/***** header *****/
#blogtitle {font-family: Arial,Verdana; position:absolute; width:80%; float:right; right:45px; top:90px; text-align:right; font-size:24px; color:#ffffff; font-weight:bold;}
#blogtitle a, #blogtitle a:hover {font-family: Arial,Verdana; color:#ffffff; text-decoration:none;}
#subtitle {font-family: Verdana,Arial; position:absolute; width:80%; float:right; right:45px; top:125px; text-align:right; font-size:13px; color:#90b349; font-weight:bold; font-style:italic;}#header ul {
position: absolute;
height: 22px;
float:right;
top: 21px;
right: 57px;
margin:0px;
}
#header ul li {
display: inline;
font-size: 13px;
}#header ul li a {
display: block;
float: left;
line-height: 22px;
color: #ffffff;
padding: 0 15px;
text-decoration:none;
}#header ul li a:hover, #header ul li.current_page_item a {
background: #6c9025;
}#header img.home {
position: absolute;
margin:0px;padding:0px;
right: 15px;
top: 19px;
width:35px;
height:35px;
}/***** content *****/
.archivetitle {
color: #000000;
font-size: 14px;
font-variant: normal;
padding: 0px 0px 0px 0px;
margin: 0px 0px 12px 0px;
}
.title, .title a {
color: #000000;
font-size: 20px;
}.date {
font-size: 10px;
padding: 0px 0px 4px 0px;
border-bottom: 1px solid #73943B;
}.entry {
color: #000000;
line-height: 1.6em;
text-align: justify;
padding: 8px 0px 0px 0px;
}
.page_entry {
margin: 10px 0px 0px 0px;
padding: 2px 0px 20px 0px;
border-top: 2px solid #73943B;
border-bottom: 1px solid #73943B;
}.info {
line-height: 1.6em;
font-size: 10px;
text-align: left;
margin: 0px 1px 50px 0px;
padding: 4px 0px 1px 1px;
border-top: 1px solid #73943B;
}
.category {
font-size: 10px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 4Px 20px;
background: url(‘images/category.gif’) no-repeat top left transparent;
}.tags {
font-size: 10px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 4px 20px;
background: url(‘images/tags.gif’) no-repeat top left transparent;
}.bubble {
font-size: 12px;
font-weight: bold;
margin: 0px 0px 0px 0px;
padding: 0px 0px 4px 20px;
background: url(‘images/bubble.gif’) no-repeat top left transparent;
}.navigation {
font-size: 11px;
margin: 40px 0px 0px 0px;
padding: 2px 0px 17px 0px;
border-top: 2px solid #73943B;
border-bottom: 1px solid #73943B;
}.sorry {
font-size: 11px;
font-style: italic;
margin: 8px 0px 0px 0px;
padding: 3px 0px 3px 0px;
border-top: 1px solid #73943B;
border-bottom: 1px solid #73943B;
}
#postmetadata {
font-size: 12px;
margin: 10px 0px 20px 0px;
padding: 5px 15px 5px 15px;
border-top: 1px solid #73943B;
border-bottom: 2px solid #73943B;
}/**** relative posts ****/
.wp-relative{
border-top: 2px dotted #3A6629;
border-bottom: 2px dotted #3A6629;
border-left: 2px dotted #3A6629;
border-right: 2px dotted #3A6629;
background:#B2D0B4;
padding: 0px 5px 5px 6px;
}.nocomments {background: none; color: #000000;}
.commenttitle {
color: #000000;
font-size: 14px;
text-align: left;
font-weight: bold;
margin: 0px 0 20px 0;
padding: 2px 0px 2px 0px;
font-variant: normal;
border-bottom: 1px solid #80b608;
}
.commentlist {list-style: none;}
.commentbody {
color: #000000;
font-size: 11px;
position: relative;
list-style-type: none;
margin: 0px 0px 15px 0px;
padding: 0px 0px 0px 0px;
border-bottom: 1px solid #80b608;
}.adminbody {
color: #000000;
font-size: 11px;
position: relative;
list-style-type: none;
margin: 0px 0px 20px 25px;
padding: 0px 0px 0px 0px;
border-bottom: 1px solid #80b608;
}
.commenthead {
color: #000000;
padding: 5px 0px 8px 0px;
margin: 0px 0px 10px 0px;
border-bottom: 1px dotted #80b608;
background:#ffffff;
}.adminhead {
color: #000000;
margin: 0px 0px 10px 0px;
padding: 5px 0px 8px 0px;
border-bottom: 1px dotted #80b608;
background:#ffffff;
}.avatar {
position:relative;
float: left;
margin: 0px 5px 0px 0px;
padding: 0px;
background: #ffffff;
}
.commentcount {
float: right;
color: #000000;
font-size: 20px;
font-weight: bold;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: Georgia, Times, ‘Times New Roman’, serif;
}
.authorlink {color: #000000; font-size: 11px; font-weight: bold;}
.authorlink a {color: #000000; font-size: 11px; font-weight: bold;}
.commentlink {font-size: 10px; color: #000000;}
.trackhead {
color: #000000;
margin: 0px 0px 10px 0px;
padding: 7px 0px 8px 41px;
border-bottom: 1px dotted #80b608;
background: url(images/track.jpg) no-repeat top left;
}
.trackbody {
color: #000000;
font-size: 11px;
position: relative;
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 20px 0px;
border-bottom: 1px solid #80b608;
}
.trackbody p a {color: #000000;}
#commentform {
margin:0;
padding:20px 0 0 0;
}
#email, #author, #url {
color: #000000;
font-size: 12px;
background: none;
padding-left: 2px;
vertical-align: middle;
border: 1px solid #73943B;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
}
#comment {
width: 400px;
color: #000000;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
border: 1px solid #80b608;
padding: 2px 2px 2px 2px;
}#submit {
width: 80px;
height: 20px;
color: #000000;
font-size: 12px;
background: #ffffff;
margin: 0px 0px 0px 0px;
padding: 0px 10px 2px 10px;
border: 1px solid #80b608;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
}/***** search *****/
#searchform{
margin:0 0 15px 0;
padding:0 0 0 0;
}
.searchbox {
position:relative;
margin:0 0 0 0;
padding:0 0 0 0;
width:170px;
height:28px;
}
.search-field input {
position:relative;
float:left;
top:8px;
left:8px;
width:117px;
height:13px;
font-family:Verdana;
font-size:11px;
font-weight:bold;
color:#999999;
padding:2px 3px 1px 3px;
border:0px;
background:#f0f0f0;
}
.search-but input {
float:right;
position:relative;
top:5px;
right:10px;
width:25px;
height:22px;
}
/***** sidebar *****/
#sidebar a{color:#ffffff;}
#sidebar a:hover {color:#73943B;}
#sidebar ul {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#sidebar li {
list-style-type: none;
margin: 0px 0px 24px 0px;
padding: 2px 0px 2px 0px;
border-bottom: 1px dotted #73943B;
}#sidebar ul ul li {
color: #c8c8c8;
line-height: 1.6em;
list-style-type: none;
font-size:12px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 2px 13px;
border:0px;
background:url(‘images/titlearrow.gif’) no-repeat 0px 5px;
}
#sidebar ul ul ul li {
font-size:12px;
border:0px;
margin: 0px 0px 0px 1px;
padding: 0px 0px 0px 12px;
line-height: 1.5em;
background:url(‘images/arrow.gif’) no-repeat 0px 5px;
color: #ffffff;
}#sidebar h1 {
color: #ffffff;
font-size: 12px;
font-weight: bold;
letter-spacing: 0px;
font-variant: normal;
margin: 0px 0px 0px 0px;
padding: 3px 20px 3px 0px;
border-top: 3px solid #73943B;
border-bottom: 1px solid #73943B;
background:url(‘images/sidetitle.gif’) no-repeat right;
}
#sidebar select{
margin:5px 0px 2px 2px;
font-size:11px;
width:170px;
overflow:hidden;
}/***** widget *****/
#wp-calendar td {font-size:11px;}
#wp-calendar td a {font-weight:bold;text-decoration:underline;}
#wp-calendar {
width: 174px;
text-align: center;
font-size:11px;
border-bottom: 0px solid #73943B;}.wp-caption { /*images caption*/
text-align: center;
color:#666666;
}.textwidget { /*text box*/
margin:2px 0px 5px 2px;}
.rsswidget img{
display:none;
}#akismetwrap{
margin:2px 0 2px 25px;
}#sidebar .widget_rss h1{
background:url(‘images/rss.png’) no-repeat right;
}
.wp-smiley{
vertical-align:middle;
border:0px;
padding:0px;
}}
.edit
font-size:9px;
}
- The topic ‘* positioning * Moving the entire #content/#header/#footer to the right’ is closed to new replies.