By drupko on
I've changed style.css in contended7 theme,so now this theme have fixed width and height.However,this theme is now on left side browser and I want to be centered,but I don't know how. This is style.css.Can you please help me?
/**
* Layout
*/
#header-region {
float: center;
width: 1030px;
min-height: 20px;
}
#header-region .block-region {
display: block;
margin: 10px;
padding: .5em;
}
#wrapper {
float: center;
width: 1030px;
}
#wrapper #container {
max-width: 1240px;
margin: 0 auto;
padding: 0 10px;
}
#wrapper #container #header {
height: 100px;
}
#wrapper #container #header #logo img {
float: left; /* LTR */
margin: 10px 0 0 10px; /* LTR */
}
#wrapper #container #header #slogan-floater {
float: left; /* LTR */
margin: 10px 0 0 10px; /* LTR */
padding: 0;
}
#wrapper #container #header #slogan-floater .site-slogan {
float: left; /* LTR */
clear: both;
}
/* With 3 columns, require a minimum width of 1020px to ensure there is enough horizontal space. */
body.two-sidebars {
min-width: 980px;
}
/* With 2 columns, require a minimum width of 800px. */
body.no-sidebars,
body.sidebar-left,
body.sidebar-right {
min-width: 760px;
}
/* We must define 100% width to avoid the body being too narrow for near-empty pages */
#center {
float: left;
width: 100%;
padding: 10px 0 0;
}
/* So we move the #center container over the sidebars to compensate */
body.sidebar-left #center {
margin-left: -210px;
}
body.sidebar-right #center {
margin-right: -210px;
}
body.two-sidebars #center {
margin: 0 -210px;
}
/* And add blanks left and right for the sidebars to fill */
body.sidebar-left #squeeze {
margin-left: 210px;
}
body.sidebar-right #squeeze {
margin-right: 210px;
}
body.two-sidebars #squeeze {
margin: 0 210px;
}
/* We ensure the sidebars are still clickable using z-index */
#wrapper #container .sidebar {
width: 210px;
float: left;
font-size: 75%;
padding: 10px 0 0;
z-index: 2;
position: relative;
}
#sidebar-left .block {
padding-right: 10px;
}
#sidebar-right .block {
padding-left: 10px;
}
.sidebar .block {
margin: 0 0 10px;
}
.block .content {
padding: 2px 5px;
}
.sidebar .block .content {
border: #CCC solid 1px;
}
#sidebar-left .block-region {
margin-right: 10px;
}
#sidebar-right .block-region {
margin-left: 10px;
}
.block-region {
padding: 1em;
background: transparent;
border: 2px dashed #CCC;
text-align: center;
font-size: 1.2em;
}
/* Now we add the backgrounds for the main content shading */
#center .node h1,
#center .node h2,
#center .node h3 {
border-bottom: #CCC solid 1px;
}
#center h1.title,
#center h2.title,
#center .block h2.title {
color: #333;
margin: 15px 0;
font-weight: bold;
letter-spacing: -1px;
border: none;
}
#center h2.title a {
color: #333;
}
.block h2 {
height: 16px;
color: #EEE;
background: #CCC;
font-size: 1em;
font-weight: normal;
text-align: left; /* LTR */
line-height: 16px;
margin: 0;
padding: 0 5px;
}
.block h2 a,
.block h2 a:hover {
color: #EEE;
text-decoration: none;
}
.sidebar .block-1 .content {
border: #C63 solid 1px;
}
.sidebar .block-2 .content {
border: #999 solid 1px;
}
.sidebar .block-3 .content {
border: #F96 solid 1px;
}
.sidebar .block-4 .content {
border: #C96 solid 1px;
}
.sidebar .block-1 h2 {
background: #C63;
}
.sidebar .block-2 h2 {
background: #999;
}
.sidebar .block-3 h2 {
background: #F96;
}
.sidebar .block-4 h2 {
background: #C96;
}
#footer {
float: left;
width: 100%;
font-size: 75%;
border-top: 3px solid #C63;
text-align: center;
line-height: 1.5em;
margin: 10px 0 0;
}
#mission {
display: block;
float: left;
width: 100%;
margin: 0;
padding: 0;
}
#search-theme-form {
margin: 0 0 10px;
}
#search-theme-form label {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
/**
* Header
*/
#wrapper #container #header {
color: #EEE;
background: #C63;
}
#wrapper #container #header #slogan-floater h1.site-name {
float: left; /* LTR */
line-height: 1.2em;
margin: 0 0 5px;
padding: 0;
}
#wrapper #container #header #slogan-floater h1.site-name a {
color: #EEE;
background: #C63;
font-weight: bold;
}
#wrapper #container #header #slogan-floater h1.site-name a:hover {
text-decoration: underline;
}
#wrapper #container #header #slogan-floater .site-slogan {
color: #EEE;
background: #C63;
font-size: 83%;
}
/**
* Primary navigation
*/
#primary-links ul {
display: block;
float: right; /* LTR */
color: #EEE;
background: #C63;
list-style: none;
text-align: center;
margin: 73px 0 4px;
padding: 0;
}
#primary-links ul li {
float: left; /* LTR */
height: 20px;
line-height: 20px;
margin: 0 5px 0 0; /* LTR */
padding: 0;
}
#primary-links ul li a {
display: block;
color: #EEE;
background: #C63;
text-decoration: none;
padding: 1px 8px;
}
#primary-links ul li a:hover,
#primary-links ul li a.active {
border: 1px solid #EEE;
text-decoration: none;
padding: 0 7px;
}
Comments
CSS errors
No such thing as float:center in CSS.
Have a look at:
margin-left:auto;
margin-right:auto;
The CSS snippet you provided is a mess. I'd start again with an unmodified style.css.
Also, this post would probably get a better response if it was put in the issue queue for Contented7 (the theme), this is a general discussion section ... unlikely to find much help.