₦airaland Forum

I would have love to show you the link,it is not online yet, am still working on it on the localhost.
Kindly assist me on how to active either of these background(http://www.theladyprogrammer.com or http://www.punchng.com/)

"(2) I also try to use border, but when I choose the color that I want it was display blue
See the code that I used(border-right:250px solid #E8ECE0; border-left: 250px solid #E8ECE0; margin-left:auto; margin-right: auto
What should I do?

Look at this http://www.theladyprogrammer.com/, this is kind of background that I want.

Am waiting please

/* Fonts */

body,input, textarea, select, a.button, fieldset legend { font-family: "PT Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* Downloads - Documentation */

.cta { margin: 10px auto 0px auto; padding: 10px 10px 20px 10px; background-color: #f2f2f2; position: relative;
border: 1px solid #dcdcdc;
-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; text-shadow: #fff 1px 1px 0;
box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #fff inset; -moz-box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #fff inset;
-webkit-box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #fff inset; }

.cta h3 { font-size: 1.5em; text-shadow: #fff 1px -1px 0; }

/* Image Alignment Classes */
.alignright { float: right; margin: 0px 0px 10px 15px; }

.alignleft { float: left; margin: 0px 15px 10px 0px; }

.aligncenter { display:block; margin:0 auto; }

/* Header */

#header { clear: both; margin-top: 32px; }

#header .inner { padding-top: 30px; padding-bottom: 25px; }

#logo { float: left; padding: 0 20px; }

#site-name { margin: 0; padding: 0; font-size: 60px; line-height: 55px; letter-spacing: -1px; }

#header #site-name a { margin: 0; padding: 0; line-height: 55px; text-decoration: none; font-weight: bold;
letter-spacing: -2px; text-shadow: 0px 1px 0px #FFF; }

#header #site-name a:hover { color: #3253ad; }



/* Breadcrumb */

.breadcrumb { padding:0; }

#breadcrumb { overflow: hidden; zoom: 1; margin: 0 0 1.5em !important; padding: 5px 5px 5px 10px;
font-size: 0.92em; color: #999 !important; background-color: #f1f1f1;
-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; border: 1px solid #e9e9e9;
text-shadow: 1px 1px 0px #fff; }

#breadcrumb a { color: #797979; margin-right: 6px; text-shadow: none; text-decoration:underline; }

#breadcrumb .sep { margin-right: 6px; }

/* Navigation */

#navigation { margin-bottom: 20px; clear: both; }


/* Main */
#wrap {width: 100% background: #ffffff ; }


#wrap { border-top:1px solid; }

#wrap #content { float:right; }

#main { margin-bottom: 10px; margin-left: 100px; }

.node.node-teaser { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #d6d6d6; }

.submitted { font-size: 11px; color: #666666; padding-bottom: 10px; margin-bottom: 10px; }

/* Featured */

#featured .block { padding: 0 0 20px 0; }

/* Footer */

#footer { clear: both; padding: 10px 0; border-top: 1px solid #d6d6d6; font-size: .9em; }

#credits { text-align: center; }

#footer .block { padding: 0 0 10px 0; }

/* Highlighted */

.region-highlighted { padding: 20px 0; }

/* Help */

.region-help { border: 1px solid #d3d7d9; padding: 20px; margin: 20px 0; }

/* Table Styles */

table { border: 0; border-spacing: 0; margin: 10px 0; width: 100%; }

table table { font-size: 1em; }

table tr th { border-bottom: 1px solid white; border-top: 1px solid #dddddd; font-weight: normal;
color: #707070; text-shadow: white 1px 1px 0; background: #dddddd url(../images/gradient_small_trans.png) repeat-x 0 top; }

th { padding:5px 15px; border:none; }

td { padding:15px; border:none; }

table tr th, table tr th a, table tr th a:hover { font-weight: bold; }

table tbody tr th { vertical-align: top; }

tr.odd { background-color: #F4F4F4; border-bottom: 1px solid #EBEBEB; border-top: 1px solid white; }

tr, tr.even { background-color: #F9F9F9; border-bottom: 1px solid #EDEDED; border-top: 1px solid white; }

/* List Styles */

.block ol, .block ul { margin: 0; padding: 0 0 0.25em 1em; }

.contextual-links-wrapper { font-size: small !important; }

ul.contextual-links { font-size: 0.923em; }

.contextual-links-wrapper a { text-shadow: 0 0 0 !important; }

.item-list .pager { font-size: 0.929em; }

ul.menu li { margin: 0; }

.region-content ul, .region-content ol { margin: 1em 0; padding: 0 0 0.25em 2.5em; }

.item-list ul li { margin: 0; padding: 0.2em 0.5em 0 0; }

ul.links { font-size: 11px; color: #666666; }

ul.links.inline li { padding:0 5px 0 0; margin:0 5px 0 0; border-right:1px solid #666666; }

ul.links.inline li.last { border:none; }

/* Menus */

.block ul.menu { padding: 0; margin: 0; list-style: none; }

.block ul.menu li { list-style:none; }

.block ul.menu li a { display: block; border-bottom: 1px solid #eee; padding: 8px 0px 8px 24px; line-height: 120%; font-weight: bold;
background: url(../images/light/arrow_bullet.png) no-repeat 10px; text-decoration: none; }

.block ul.menu li a:hover { color:#333333; background: url(../images/dark/arrow_bullet.png) no-repeat 10px; }

.block ul.menu ul { margin:0 0 0 1.3em; }

.block ul.menu ul li a { border:none; padding: 4px 0; font-size:13px; color:#666666; background:none; }

.block ul.menu ul li a:hover { color:#333333; background:none; }

/* Comments */

.comment h2.title { margin-bottom: 1em; }

.comment div.user-picture img { margin-left: 0; }

.comment { margin-bottom: 20px; display: table; vertical-align: top; }

.comment .attribution { display: table-cell; padding: 0 35px 0 0; vertical-align: top; overflow: hidden; }

.comment .attribution img { margin: 0; border: 1px solid #d3d7d9; }

.comment .attribution .username { white-space: nowrap; }

.comment .submitted p { margin: 4px 0; font-size: 1.071em; line-height: 1.2; }

.comment .submitted .comment-time { font-size: 0.786em; }

.comment .submitted .comment-permalink { font-size: 0.786em; text-transform: lowercase; }

.comment .content { font-size: 0.929em; line-height: 1.6; }

.comment .comment-arrow { background: url(../images/comment-arrow.gif) no-repeat 0 center transparent;
border-left: 1px solid; border-right: 1px solid; height: 40px; margin-left: -36px; margin-top: 15px; position: absolute; width: 20px; }

.comment .comment-text { padding: 0 25px 10px 35px; display: table-cell; vertical-align: top; position: relative; width: 100%; border-left: 1px solid #d3d7d9; }

.comment .indented { margin-left: 40px; }

.comment-unpublished { margin-right: 5px; padding: 5px 2px 5px 5px; }

.comment .comment-text .comment-arrow { border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; }

/* Sidebar */

#wrap #sidebar { float:left; }

#sidebar .block { padding: 0 0 0 0; margin-left:70px; }

/* Messages */

#messages { padding: 20px 0 5px; margin: 0 auto; }

div.messages { margin: 10px 0; }


===========================================
See also the screen shot
It does not show well here like the way is currently showing,many content are showing on the margin, even the navigation bar also cross the margin.
As I said earlier it is worst in IE 6-8.
Your quick resp. would be highly appreciated

Hello,
Pls explain better,I mean how to right the code. see below the style css, and tell me what to do

body
{ font-size:14px; font-weight:normal; font-style:normal; line-height: 1.5; background: #666666; word-wrap: break-word ;margin-right: 300px;
margin-left: 300px; auto; padding: 0; border: 0px ; outline: 0;border-top:0px solid; }

a:link, a:visited { text-decoration: none; }

a:hover, a:active, a:focus { text-decoration: none; }

#main a { text-decoration: underline; }

#main a:hover { text-decoration: none; }

#main h1 a, #main h2 a, #main h3 a, #main h4 a, #main h5 a { text-decoration: none; }

h1, h2, h3, h4, h5, h6 { letter-spacing: -1px; margin:0; }

h1 { font-size:35px; font-weight:normal; font-style:normal; line-height: 140%; margin-bottom: 14px; }

h2 { font-size:28px; font-weight:normal; font-style:normal; line-height: 130%; margin-bottom: 10px; }

.block h2, #footer h2 { font-weight: bold; font-size: 1.5em; line-height: 130%; margin-bottom: 10px; }

h3 { font-size:21px; font-weight:normal; font-style:normal; line-height: 130%; margin-bottom: 8px; }

h4 { font-size:17px; font-weight:bold; font-style:bold; line-height: 125%; margin-bottom: 8px; }

h5 { font-size:14px; font-weight:bold; font-style:bold; line-height: 120%; margin-bottom: 8px; }

h1 a, h2 a, h3 a, h4 a, h5 a { font-weight: inherit; text-decoration: none; }

p { margin: 0 0 20px 0; }

del { text-decoration: line-through; }

pre,code { white-space: pre; background-color: #ededed; border-bottom: 1px solid #d9d9d9; border-top: 1px solid #d9d9d9;
display: block; margin: 5px 0; padding: 5px; line-height: 125%; overflow: hidden;
font: 12px/24px Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace; }

hr { border: solid #DDD; clear: both; margin: 10px 0 30px; height: 0; border-width: 1px 0 0; }

.field-type-taxonomy-term-reference .field-item { float: left; padding: 0 1em 0 0; white-space: nowrap; }

/* Responsive Images */

img, img.scale-with-grid { outline: 0; max-width: 100%; height: auto; }

Hello webmasters,
Please am a newcomer on this forum, I want my cms site to have two background colors, i.e the margin left and right should have the same color(cream color), while the middle that would contain the content would have white color,in short like punch news paper. I have done it but it does not look nice at all, content are showing on the right margin,
Please I need your help.
Note it was very bad on IE.
Kindly help pleaseeeeeeeeeeeeeeeeeeeee