ok, here is the page:
http://billboardfamily.com/?page_id=2
Issue:
I want to add a background color to add some separation lik eon this page:
http://iwearyourshirt.com/about-us
I can not get the background to work correctly in the content part of the page, I have tried to add css styling, but it never quite works perfectly… Please advise. Thanks.
By the way, your page has some serious problems in IE6/7.
I looked at it in IE7 (haven’t looked at it in IE6 yet but I suspect it is bad) and your top nav is missing and the top of the right column has gone haywire.
I suspect you have some haslayout and float issues going on there.
For example .column2 would be the bottom divs
.column,. column2 {
font-size: 11px;
float:left;
width:345px;
background:transparent url(../images/largedots.png) repeat-x;
padding-top:4px;
padding-bottom:36px;
color: #000000;
}
. column2 {
padding-bottom:16px;
}
You could use the faux columns method which uses a repeating image to color both columns. You would set it on the #body div in that case.
Much better. Only thing left is to make the top and bottom background color areas start and stop even with the sidebar on the right.
Sorry, I should have mentioned that you have to get rid of your inline styles. The BG property is nullifying the BG color in the css.
Get rid of this -
<div id="table" style="background: url("http://billboardfamily.com/wp-content/themes/mensa/assets/images/map.png") no-repeat; padding-top: 465px;">
And simply make it this -
<div id="table">
Now set the BG Image and Color in the css with the BG property
#table {
width:710px;
padding:465px 10px 10px;
overflow:hidden;
font-family:Arial;
background: #CCC url("http://billboardfamily.com/wp-content/themes/mensa/assets/images/map.png") no-repeat 0 0;
}
There are small white areas between the sidebar and content, and between the header/footer and the content/sidebar. This is what I am trying to accomplish, but I can;t quite get it.
You have set up two columns in your #body div. You have one column as your sidebar and the main left column is called #table.
Move the BG color to #table from #body and then force #table to contain it’s floats so the BG color extends. I have already tested the new width so it gives the 10px space on the right in place of the 10px left padding on the sidebar.
#table {
width:710px;
padding:465px 10px 10px;
overflow:hidden; /*contain floats*/
background-color:#CCC;
}
Now get rid of the left padding on the sidebar and your BG color on the left column should look right
Now remove the top margin from the sidebar and set it on the #body div to catch both columns.
#body {
clear:both;
[COLOR=Blue]margin:15px 0;[/COLOR]
}
You have been a big help. I do have 2 questions that I am unsure about.
How can I make the background on the left columns extend less below the last line of text? It extends a bit far.
Is it possible to have the sidebar extend to 100% of the main content (in this case the left columns), in case the length of the page content changes, like when blogging, for example?
I did this, and, you are right…the columns liik right. There is just one problem…the background color is now gone. I moved it from #body to #table as you said, but it is not showing up.
the new code I added to get this far is at the bottom under “BEGIN Misc.”. All the code above that was already there before I started to try to do this part. I could not get this to look the way I want to, so I tried to use borders, which I know is not the way to do this, but I knew not of any other way, and I wanted to see what it might look like. thanks.
style.css
* {
margin: 0; padding: 0;
}
body {
text-align: left;
font: 13px Verdana;
color: #566777;
background: #ffffff url(../images/headerbg.gif) repeat-x 0 0;
}
a {
text-decoration: none;
outline:0;
}
a:hover {
text-decoration: underline;
outline:0;
}
img {
border: 0;
}
.break {
font-size: 0;
width: 0; height: 0;
clear: both;
}
.alignleft {
float: left;
margin: 4px 10px 5px 0;
}
.alignright {
float: right;
margin: 4px 0 5px 10px;
}
.aligncenter {
text-align: center;
}
.hidden {
display: none;
}
/** BEGIN wrapper **/
.wrapper {
width: 1000px;
margin: auto auto;
text-align: left;
}
/** END wrapper **/
/** BEGIN header **/
#header {
height: 178px;
}
#header .search {
float: right;
margin-top: 11px;
}
#header .search form {
float: right;
background: url(../images/search.png) no-repeat 0 0;
height: 49px;
width: 255px;
}
#header .search form input {
float: right;
background-color: transparent;
border: 0;
font-size: 0.8em;
color: #FFFFFF;
height: 38px;
width: 195px;
margin-top: 5px;
text-transform: uppercase;
}
#header .search form button {
float: left;
width: 59px;
height: 49px;
background-color: transparent;
border: 0;
color: transparent;
text-indent: -9999px;
}
#header .subscribe {
position: relative;
top: 75px;
left: 765px;
float: left;
text-align: center;
color: #ffffff;
}
#header .purchase {
clear: both;
position: relative;
bottom: 21px;
left: 844px;
width: 20px;
}
#header .logo {
clear: both;
}
#header .logo h1 {
padding-bottom: 32px;
}
#header .logo h1 a {
position: relative;
bottom: 15px;
background: url(../images/logo.png) no-repeat 0 0;
display: block;
text-indent: -9999px;
height: 62px;
width: 352px;
}
#header ul {
list-style-type: none;
}
#header ul li {
float: left;
margin-right: 15px;
}
#header ul li a {
padding: 5px 8px;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
font-size: 0.9em;
font-weight: bold;
}
#header ul li a:hover {
background-color: #b9c3cf;
}
/** END header **/
/** BEGIN featured **/
#featured {
padding: 43px 53px 0 53px;
background: #b7c3cf;
}
#featured .l {
float: left;
margin-right: 22px;
margin-top: 75px;
}
#featured .items {
width: 650px; height: 240px;
overflow: hidden;
margin-right: 10px;
float: left;
}
#featured .feat {
width: 650px;
}
#featured .featuredimg {
display: block;
float: left;
border: 5px solid #ffffff;
margin-bottom: 45px;
margin-right: 25px;
width: 240px; height: 190px;
overflow: hidden;
}
#featured .feat img {
width: 240px;
}
#featured .feat .text {
float: right;
width: 375px;
padding-top: 5px;
}
#featured .feat .text h2 a {
text-decoration: none;
color: #566777;
font-size: 1.9em;
font-family: Arial;
padding-bottom: 10px;
}
#featured .feat .text p {
color: #5f6168;
font-size: 0.9em;
}
#featured .r {
float: right;
margin-top: 75px;
}
/** END featured **/
/** BEGIN top **/
#top {
clear: both;
padding: 20px 0;
}
#top .box {
width: 240px;
float: left;
margin: 0 40px 0 14px;
}
#top .box .name {
height: 58px;
background: url(../images/border.gif) repeat-x 0 bottom;
}
#top .box .name img {
float: left;
padding-bottom: 5px;
padding-right: 9px;
}
#top .box .name .title {
color: #566777;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
font-family: Arial;
font-size: 1.1em;
}
#top .box .name .title2 {
text-transform: uppercase;
text-decoration: none;
font-family: Arial;
color: #5f6168;
font-size: 0.8em;
}
#top .box .text2 {
clear: both;
margin: 15px 0 40px 6px;
}
#top .box .text2 p {
color: #76848f;
font-size: 0.8em;
margin-bottom: 20px;
}
#top .box .text2 .more {
font-size: 0.8em;
color: #38b5c4;
text-decoration: underline;
}
/** END top **/
/** BEGIN body **/
#body {
clear: both;
}
/** END body **/
/** BEGIN content **/
#content {
width: 511px;
float: left;
}
#content .post {
margin-bottom: 22px;
margin-top: 37px;
clear: both;
}
#content .post h2 {
font-size: 1.8em;
text-transform: uppercase;
font-family: Arial;
font-weight: bold;
padding-bottom: 18px;
background: url(../images/border.gif) repeat-x 0 bottom;
}
#content .post h2 a {
color: #566777;
text-decoration: none;
}
#content .post img {
float: left;
padding: 5px;
background-color: #FFFFFF;
margin: 17px 11px 19px 4px;
}
#content .post p {
margin-top: 20px;
font-size: 0.9em;
line-height: 1.5em;
color: #566777;
}
#content .post .date {
color: #566777;
height: 20px;
padding-top: 5px;
clear: both;
}
#content .post .category a {
background: url(../images/category.gif) no-repeat 0 0;
color: #566777;
padding-left: 29px;
padding-right: 10px;
text-decoration: underline;
height: 16px;
}
#content .post .comments a {
background: url(../images/comments.gif) no-repeat 0 0;
color: #566777;
padding: 0 10px 5px 23px;
text-decoration: underline;
height: 20px;
}
#content .entry {
font-weight: bold;
color: #00a5b6;
text-decoration: none;
text-transform: uppercase;
background: url(../images/previous.gif) no-repeat 0 6px;
padding-left: 15px;
}
#content .last {
margin-bottom: 70px;
}
#content .postnav {
text-transform: uppercase;
font-weight: bold;
padding: 20px 0;
}
#content .postnav a {
text-decoration: none;
}
/** END content **/
/** BEGIN sidebar **/
#sidebar {
float: right;
width: 326px;
padding-bottom: 40px;
}
#sidebar .box2 h2 {
text-transform: uppercase;
color: #566777;
font-size: 1.1em;
font-family: Arial;
padding-bottom: 11px;
margin-top: 32px;
background: url(../images/border.gif) repeat-x 0 bottom;
}
#sidebar .sub ul {
list-style-type: none;
}
#sidebar .sub ul li {
float: left;
margin-top: 11px;
margin-bottom: 17px;
margin-right: 6px;
margin-left: 10px;
}
#sidebar .ad {
clear: both;
}
#sidebar .ad img {
float: left;
margin-right: 10px;
}
#sidebar .ad p {
font-size: 0.8em;
color: #81848a;
margin: 5px 0 20px 0;
}
#sidebar .ad .time {
text-decoration: none;
font-size: 0.8em;
color: #00a5b6;
}
#sidebar .pop ul {
list-style-type: none;
}
#sidebar .pop ul li {
float: left;
width: 320px;
margin: 10px 0 10px 10px;
}
#sidebar .pop ul li img {
background-color: #FFFFFF;
padding: 5px;
margin-right: 11px;
float: left;
width: 50px; height: 50px;
}
#sidebar .pop ul li .title {
color: #5f6168;
font-weight: bold;
text-decoration: none;
}
#sidebar .pop ul li .artcom {
color: #3ab7c5;
text-decoration: none;
font-size: 0.8em;
}
#sidebar .pop ul li p {
margin-top: 15px;
margin-bottom: 5px;
}
#sidebar .flick img {
width: 80px; height: 80px;
margin: 5px;
}
#sidebar .flick h2 {
margin-bottom: 7px;
}
#sidebar .video {
margin: 15px 0;
}
#sidebar .cat {
width: 135px;
float: left;
margin-right: 20px;
}
#sidebar .cat ul {
list-style-type: none;
margin-left: 10px;
}
#sidebar .cat ul li {
padding-top: 18px;
}
#sidebar .cat ul li a {
color: #5f6168;
font-size: 0.9em;
text-decoration: none;
}
#sidebar .cat ul li a:hover {
color: #00a5b6;
}
/** END sidebar **/
/** BEGIN sidebar about us **/
#sidebaraboutus {
float: right;
width: 255px;
padding: 0 0 0 10px;
}
#sidebaraboutus .box {
height: 225px;
background: #000000;
text-align: left;
padding: 5px 10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
behavior: url(/border-radius.htc);
border-radius: 8px;
}
#sidebaraboutus .box h2 {
color: #00AFEF;
font-size: 1.0em;
font-family: Arial;
padding-bottom: 5px;
padding-top: 5px;
margin-top: 15px;
}
#sidebaraboutus .box p {
color: #999999;
font-size: 1.1em;
font-family: Arial;
padding-bottom: 11px;
margin-top: 10px;
}
#sidebaraboutus .box2 {
height: 1200px;
margin-top: 10px;
background: #000000;
text-align: left;
padding: 5px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
behavior: url(/border-radius.htc);
border-radius: 8px;
}
#sidebaraboutus .box2 h2 {
color: #00AFEF;
font-size: 1.1em;
font-family: Arial;
padding-bottom: 5px;
padding-top: 5px;
}
#sidebaraboutus .box2 p {
color: #999999;
font-size: 1.1em;
font-family: Arial;
padding-bottom: 11px;
}
#sidebaraboutus .box2 h3 {
color: #00AFEF;
font-size: 1.1em;
font-family: Arial;
padding-bottom: 5px;
padding-top: 20px;
}
/** END sidebar about us **/
/** BEGIN footer **/
#footer {
background: #000000 url(../images/footerbg.gif) repeat-x 0 0;
height: 340px;
clear: both;
padding: 15px 0;
}
#footer #reviews {
float: left;
border-right;
color: #999999;
}
#footer #info {
padding-left: 10px;
float: right;
color: #999999;
border-left: 1px solid #515151;
}
#info a {
text-decoration: none;
color: #00AFEF;
}
#info a:hover {
text-decoration: underline;
color: #00AFEF;
}
/** END footer **/
/** BEGIN reviews **/
#reviews {
background: #000000;
}
#reviews .l {
float: left;
margin-right: 22px;
margin-top: 40px;
}
#reviews .items {
width: 650px; height: 130px;
overflow: hidden;
margin-right: 10px;
float: left;
}
#reviews .feat {
width: 650px;
}
#reviews .featuredimg {
display: block;
float: left;
border: 1px solid #999999;
margin-bottom: 45px;
margin-right: 25px;
width: 150px; height: 120px;
overflow: hidden;
}
#reviews .feat img {
width: 150px;
}
#reviews .feat .text {
float: left;
width: 350px;
padding-top: 5px;
}
#reviews .feat .text h2 a {
text-decoration: none;
color: #566777;
font-size: 1.0em;
font-family: Arial;
padding-bottom: 10px;
}
#reviews .feat .text p {
color: #999999;
font-size: 0.9em;
}
#reviews .r {
float: right;
margin-top: 40px;
}
/** END featured **/
/** begin pages submenu **/
#header li ul {
clear: both;
position: absolute;
list-style-type: none;
display: none;
z-index: 200;
height: auto !important;
padding-top: 1px;
padding-left: 0 !important;
margin-left: -1px;
background-image: none !important;
border-width: 0 0 1px !important;
border-color: #ffffff;
border-style: solid;
}
#header li ul li {
clear: both;
margin: 0 !important;
background-image: none !important;
border-width: 1px 1px 0;
border-style: solid;
border-color: #ffffff;
padding: 0 !important;
}
#header li ul li a {
padding: 4px 15px !important;
line-height: 1.5em;
width: 170px;
background-color: #015A77;
}
#header li ul li a:hover {
background-color: #000033 !important;
background-image: none !important;
}
/** end pages submenu **/
/** BEGIN miscellaneous **/
#content .single {
padding: 20px;
margin-bottom: 50px;
}
#content .single p {
line-height: 1.5em;
margin-bottom: 10px;
}
#content .single ul, #content .single ol {
list-style-position: inside;
margin-bottom: 10px;
}
#content .single li {
line-height: 1.5em;
padding: 2px 0;
}
#content .single blockquote {
padding: 10px 10px 5px;
margin-bottom: 10px;
background-color: #eeeeee;
border-width: 1px 0;
border-style: solid;
border-color: #bbbbbb;
}
#content .single h3, #content .single h4, #content .single h5, #content .single h6 {
font-size: 1.2em;
margin-bottom: 5px;
}
#content .single h2 {
font-size: 2em;
}
#comments {
padding: 20px;
}
#comments a {
text-decoration: none;
}
#comments h2 {
font-size: 1.2em;
margin: 10px 0;
}
#comments p {
margin-bottom: 10px;
line-height: 1.6em;
}
#comments form {
}
#comments form p {
margin-bottom: 5px;
}
#comments form input {
margin-right: 5px;
}
#comments form input, textarea {
border: 1px solid #bbbbbb;
font-size: 0.9em;
font-family: Verdana;
padding: 4px;
background-position: 4px 4px;
background-repeat: no-repeat;
}
#comments form input {
width: 240px;
border: 1px solid #bbbbbb;
}
#comments form textarea {
width: 350px;
padding: 4px 4px !important;
border: 1px solid #bbbbbb;
}
#comments form button {
border: 1px solid #a0a0a0;
font-size: 1em;
font-family: Verdana;
padding: 2px 6px;
}
.commentdetails {
margin-top: 25px;
}
.commentauthor {
margin-bottom: 5px !important;
font-weight: bold;
}
.commentdate {
font-size: 0.8em;
margin-bottom: 5px;
color: #909090;
}
.required {
color: #ff0000;
}
h2.title {
font-size: 1em !important;
text-transform: uppercase;
color: #565656;
padding-top: 30px;
display: none;
}
.notfound {
padding: 40px;
}
.notfound h2 {
font-size: 18px;
font-weight: normal;
margin-bottom: 10px;
}
/** END miscellaneous **/
/** BEGIN wordpress 2.7 comments **/
#comments ol {
list-style-type: none;
clear: both;
padding: 0;
margin: 0;
}
#comments .buffer {
padding: 10px;
}
#comments ol li {
margin-bottom: 10px;
}
#comments ol li ul li {
border: 1px solid #eeeeee;
padding: 10px;
}
#comments ol li .avatar {
float: right;
}
#comments ol li .comment-author {
}
#comments ol li .comment-author .fn {
font-weight: bold;
font-size: 1.2em;
}
#comments ol li .comment-meta {
font-size: 0.9em;
color: #999999;
margin: 5px 0 10px;
}
#comments ol li .reply {
font-size: 0.9em;
font-weight: bold;
padding-bottom: 10px;
}
#comments .children {
list-style-type: none;
}
#comments .navigation {
padding: 0 0 40px;
font-size: 0.9em;
}
#comments .navigation a {
color: #999999;
padding: 3px 8px;
border: 1px solid #bbbbbb;
}
#comments .navigation a:hover {
color: #000000;
border-color: #000000;
text-decoration: none;
}
#comments .says {
display: none;
}
/** END wordpress 2.7 comments **/
/** BEGIN about us columns **/
#table {
padding:20px;
font-family: Arial;
}
#table .block {
border-top:10px solid #fff;
margin:10px -10px 0;
padding:8px 10px;
}
.column {
font-size: 11px;
float:left;
width:345px;
background:transparent url(../images/largedots.png) repeat-x;
padding-top:4px;
padding-bottom:36px;
color: #000000;
}
.column p {
padding-right:18px;
}
.row {
background:transparent url(../images/smalldots.png) repeat-x 0 bottom;
float:left;
padding:3px 0;
}
.about {
margin-bottom:15px;
background:transparent url(../images/smalldots.png) repeat-x 0 top;
}
.rowinfo {
float:left;
width:210px;
font-weight:bold;
}
.column h3 {
color:#00AFEF;
font-size: 14px;
margin-bottom:0;
padding:5px 0 6px;
}
.row-head {
float:left;
width:134px;
padding-left:1px;
}
.column a {
text-decoration: none;
outline:0;
color:#00AFEF;
}
.column a:hover {
text-decoration: underline;
outline:0;
color:#00AFEF;
}
/** END about us columns **/
/** BEGIN mailing list signup form **/
label {
float: left;
clear: left;
width: 6em;
padding: .2em;
color: #999999 !important;
font-family: Arial;
}
input#attribute3, input#email{
width:225px;
padding:5px;
}
input#contactsubmit {
float: left;
}
input#required {
float: left;
text-align: center;
}
/** END mailing list signup form **/
/** BEGIN Misc **/
#body {
background: #ccc;
border-top: 10px solid #ffffff;
border-bottom: 25px solid #ffffff;
border-right: 5px solid #ffffff;
}
#sidebaraboutus {
background:#f7f7f7
}
/** END Misc **/
I don’t have any of those browsers, so I can not even see what the issues are. I really do need to fix them, however.
If you show your css I will try and help you. I see some strange things in your source
I played with some of those settings, and got pretty close. If you look at this site: http://iwearyourshirt.com/about-us
you will see that their sidebar is one color and extends to 100% of the content height, and the content is in a light yellow colored background that extends to 100% of the content height. There are small white areas between the sidebar and content, and between the header/footer and the content/sidebar. This is what I am trying to accomplish, but I can;t quite get it.
Here is what I have so far:
http://billboardfamily.com/?page_id=2
Here is what I added to the style sheet:
#body {background: #ccc; top-margin: 5px; bottom-margin: 5px;}
#sidebaraboutus{ background:#f7f7f7}
I would prefer not to have to add a background to the #sidebarabout us, if possible.
I want to add a background color to add some separation lik eon this page:
Not sure what do you mean by separation. I am guessing you would like to have differenet color for background and divs on the content area. To get this done you can add background property to few elements.
for example:
body { background:#ff0000;}
#body {background: #ccc;}
#sidebaraboutus{ background:#f7f7f7}