N
nelly-knowall
I am VERY new to css and need help. I am trying to adapt a template to my
own colours.
http://www.tbandu.co.uk/tbandu2.htm.
I have changed header and footer to color I require 66cccc but for the life
of me cannot change left and right columns any ideas. I have been at it for
hours!
Thanks in advance
Here is the CSS code
..........................................................................................
BODY {
PADDING-RIGHT: 2em; PADDING-LEFT: 2em; FONT-SIZE: 100.1%; PADDING-BOTTOM:
2em; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 2em; BACKGROUND-COLOR: #990000
}
#pageWrapper {
BORDER-RIGHT: 1px solid; BORDER-TOP: 0px solid; FONT-SIZE: 80%; MARGIN:
0px; BORDER-LEFT: 1px solid; WIDTH: auto; BORDER-BOTTOM: 0px solid;
FONT-FAMILY: arial, helvetica, sans-serif; min-width: 500px
}
HTML #pageWrapper {
WORD-WRAP: break-word
}
#masthead {
BORDER-RIGHT: 0px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 0px solid;
COLOR: #fff; BORDER-BOTTOM: 1px solid; BACKGROUND-COLOR: #66cccc
}
#masthead H1 {
DISPLAY: inline
}
#outerColumnContainer {
BORDER-RIGHT: #999 14em solid; BORDER-TOP: 0px solid; Z-INDEX: 1;
BORDER-LEFT: #ccc 14em solid; COLOR: #000; BORDER-BOTTOM: 0px solid;
BACKGROUND-COLOR: #fff
}
HTML #outercolumncontainer {
BORDER-TOP: #000 1px solid; MARGIN-TOP: -1px
}
#innerColumnContainer {
BORDER-RIGHT: 1px solid; BORDER-TOP: 0px solid; Z-INDEX: 2; MARGIN:
0px -1px; BORDER-LEFT: 1px solid; WIDTH: 100%; BORDER-BOTTOM: 0px solid
}
UNKNOWN {
BORDER-LEFT-COLOR: transparent; MARGIN-BOTTOM: -1px; BORDER-TOP-COLOR:
transparent; BORDER-BOTTOM: transparent 1px solid; BORDER-RIGHT-COLOR:
transparent
}
#leftColumn {
Z-INDEX: 10; FLOAT: left; OVERFLOW: visible; POSITION: relative
}
#rightColumn {
Z-INDEX: 10; FLOAT: left; OVERFLOW: visible; POSITION: relative
}
#contentColumn {
Z-INDEX: 10; FLOAT: left; OVERFLOW: visible; POSITION: relative
}
#leftColumn {
MARGIN: 0px 1px 0px -14em; WIDTH: 14em
}
#rightColumn {
FLOAT: right; MARGIN: 0px -14em 0px 1px; WIDTH: 14em
}
#rightColumn .inside {
FONT-SIZE: 90%
}
#contentColumn {
MARGIN: 0px -1px; WIDTH: 100%
}
#footer {
BORDER-RIGHT: 0px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 0px solid;
COLOR: #fff; BORDER-BOTTOM: 1px solid; POSITION: relative; BACKGROUND-COLOR:
#66cccc; TEXT-ALIGN: center
}
UNKNOWN {
PADDING-BOTTOM: 1.01em
}
P {
MARGIN: 1em 0px
}
H1 {
MARGIN: 1em 0px
}
H2 {
MARGIN: 1em 0px
}
H3 {
MARGIN: 1em 0px
}
H4 {
MARGIN: 1em 0px
}
H5 {
MARGIN: 1em 0px
}
H6 {
MARGIN: 1em 0px
}
..clear {
CLEAR: both
}
..inside {
PADDING-RIGHT: 1.5em; PADDING-LEFT: 1.5em; PADDING-BOTTOM: 0px;
PADDING-TOP: 0px
}
#leftColumn {
PADDING-BOTTOM: 0.5em; PADDING-TOP: 0.5em
}
#centerColumn {
PADDING-BOTTOM: 0.5em; PADDING-TOP: 0.5em
}
#rightColumn {
PADDING-BOTTOM: 0.5em; PADDING-TOP: 0.5em
}
#masthead {
PADDING-BOTTOM: 0.5em; PADDING-TOP: 0.5em
}
#masthead {
PADDING-RIGHT: 1em; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; PADDING-TOP:
1em
}
#footer {
PADDING-RIGHT: 1em; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; PADDING-TOP:
1em
}
#pageWrapper {
BORDER-LEFT-COLOR: #000; BORDER-BOTTOM-COLOR: #000; BORDER-TOP-COLOR: #000;
BORDER-RIGHT-COLOR: #000
}
#innerColumnContainer {
BORDER-LEFT-COLOR: #000; BORDER-BOTTOM-COLOR: #000; BORDER-TOP-COLOR: #000;
BORDER-RIGHT-COLOR: #000
}
#masthead {
BORDER-LEFT-COLOR: #000; BORDER-BOTTOM-COLOR: #000; BORDER-TOP-COLOR: #000;
BORDER-RIGHT-COLOR: #000
}
#footer {
BORDER-LEFT-COLOR: #000; BORDER-BOTTOM-COLOR: #000; BORDER-TOP-COLOR: #000;
BORDER-RIGHT-COLOR: #000
}
#outerColumnContainer {
BORDER-TOP-COLOR: #000
}
/* navbar*/
#navcontainer { width: 130px; }
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer a
{
display: block;
padding: 3px;
width: 130px;
background-color: #036;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #369;
color: #fff;
}
own colours.
http://www.tbandu.co.uk/tbandu2.htm.
I have changed header and footer to color I require 66cccc but for the life
of me cannot change left and right columns any ideas. I have been at it for
hours!
Thanks in advance
Here is the CSS code
..........................................................................................
BODY {
PADDING-RIGHT: 2em; PADDING-LEFT: 2em; FONT-SIZE: 100.1%; PADDING-BOTTOM:
2em; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 2em; BACKGROUND-COLOR: #990000
}
#pageWrapper {
BORDER-RIGHT: 1px solid; BORDER-TOP: 0px solid; FONT-SIZE: 80%; MARGIN:
0px; BORDER-LEFT: 1px solid; WIDTH: auto; BORDER-BOTTOM: 0px solid;
FONT-FAMILY: arial, helvetica, sans-serif; min-width: 500px
}
HTML #pageWrapper {
WORD-WRAP: break-word
}
#masthead {
BORDER-RIGHT: 0px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 0px solid;
COLOR: #fff; BORDER-BOTTOM: 1px solid; BACKGROUND-COLOR: #66cccc
}
#masthead H1 {
DISPLAY: inline
}
#outerColumnContainer {
BORDER-RIGHT: #999 14em solid; BORDER-TOP: 0px solid; Z-INDEX: 1;
BORDER-LEFT: #ccc 14em solid; COLOR: #000; BORDER-BOTTOM: 0px solid;
BACKGROUND-COLOR: #fff
}
HTML #outercolumncontainer {
BORDER-TOP: #000 1px solid; MARGIN-TOP: -1px
}
#innerColumnContainer {
BORDER-RIGHT: 1px solid; BORDER-TOP: 0px solid; Z-INDEX: 2; MARGIN:
0px -1px; BORDER-LEFT: 1px solid; WIDTH: 100%; BORDER-BOTTOM: 0px solid
}
UNKNOWN {
BORDER-LEFT-COLOR: transparent; MARGIN-BOTTOM: -1px; BORDER-TOP-COLOR:
transparent; BORDER-BOTTOM: transparent 1px solid; BORDER-RIGHT-COLOR:
transparent
}
#leftColumn {
Z-INDEX: 10; FLOAT: left; OVERFLOW: visible; POSITION: relative
}
#rightColumn {
Z-INDEX: 10; FLOAT: left; OVERFLOW: visible; POSITION: relative
}
#contentColumn {
Z-INDEX: 10; FLOAT: left; OVERFLOW: visible; POSITION: relative
}
#leftColumn {
MARGIN: 0px 1px 0px -14em; WIDTH: 14em
}
#rightColumn {
FLOAT: right; MARGIN: 0px -14em 0px 1px; WIDTH: 14em
}
#rightColumn .inside {
FONT-SIZE: 90%
}
#contentColumn {
MARGIN: 0px -1px; WIDTH: 100%
}
#footer {
BORDER-RIGHT: 0px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 0px solid;
COLOR: #fff; BORDER-BOTTOM: 1px solid; POSITION: relative; BACKGROUND-COLOR:
#66cccc; TEXT-ALIGN: center
}
UNKNOWN {
PADDING-BOTTOM: 1.01em
}
P {
MARGIN: 1em 0px
}
H1 {
MARGIN: 1em 0px
}
H2 {
MARGIN: 1em 0px
}
H3 {
MARGIN: 1em 0px
}
H4 {
MARGIN: 1em 0px
}
H5 {
MARGIN: 1em 0px
}
H6 {
MARGIN: 1em 0px
}
..clear {
CLEAR: both
}
..inside {
PADDING-RIGHT: 1.5em; PADDING-LEFT: 1.5em; PADDING-BOTTOM: 0px;
PADDING-TOP: 0px
}
#leftColumn {
PADDING-BOTTOM: 0.5em; PADDING-TOP: 0.5em
}
#centerColumn {
PADDING-BOTTOM: 0.5em; PADDING-TOP: 0.5em
}
#rightColumn {
PADDING-BOTTOM: 0.5em; PADDING-TOP: 0.5em
}
#masthead {
PADDING-BOTTOM: 0.5em; PADDING-TOP: 0.5em
}
#masthead {
PADDING-RIGHT: 1em; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; PADDING-TOP:
1em
}
#footer {
PADDING-RIGHT: 1em; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; PADDING-TOP:
1em
}
#pageWrapper {
BORDER-LEFT-COLOR: #000; BORDER-BOTTOM-COLOR: #000; BORDER-TOP-COLOR: #000;
BORDER-RIGHT-COLOR: #000
}
#innerColumnContainer {
BORDER-LEFT-COLOR: #000; BORDER-BOTTOM-COLOR: #000; BORDER-TOP-COLOR: #000;
BORDER-RIGHT-COLOR: #000
}
#masthead {
BORDER-LEFT-COLOR: #000; BORDER-BOTTOM-COLOR: #000; BORDER-TOP-COLOR: #000;
BORDER-RIGHT-COLOR: #000
}
#footer {
BORDER-LEFT-COLOR: #000; BORDER-BOTTOM-COLOR: #000; BORDER-TOP-COLOR: #000;
BORDER-RIGHT-COLOR: #000
}
#outerColumnContainer {
BORDER-TOP-COLOR: #000
}
/* navbar*/
#navcontainer { width: 130px; }
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer a
{
display: block;
padding: 3px;
width: 130px;
background-color: #036;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #369;
color: #fff;
}