Mistical
04-14-2004, 09:16 PM
I'm trying to create a site using an external stye sheet to make layout changing easier. I want to use the basic 3 column layout with a header code in an external stylesheet:
http://www.lissaexplains.com/css3.shtml
Can someone tell me what I am doing wrong? I seperated the code by putting the DIV layers in my html index page and the following in my external style sheet. My external style sheet looks like this:
BODY {background-color: #000000;}
A:link {color: #B22222;text-decoration:none; font-family: verdana; font-size: 8pt}
A:visited {color: #B22222;text-decoration:none}
A:hover{color:#FFFFFF;text-decoration:none}
H1,P,DL {font-family: verdana}
H1{font-size: 18 pt;color: #B22222}
H2.HEADING {color: #FFFFFF; font-size: 10 pt; font-family:verdana; text-decoration: underline;}
p.HEADING {color: #FFFFFF; font-size: 12pt; font-family:verdana; text-decoration: underline;}
BODY{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 230px;
}
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
}
http://www.lissaexplains.com/css3.shtml
Can someone tell me what I am doing wrong? I seperated the code by putting the DIV layers in my html index page and the following in my external style sheet. My external style sheet looks like this:
BODY {background-color: #000000;}
A:link {color: #B22222;text-decoration:none; font-family: verdana; font-size: 8pt}
A:visited {color: #B22222;text-decoration:none}
A:hover{color:#FFFFFF;text-decoration:none}
H1,P,DL {font-family: verdana}
H1{font-size: 18 pt;color: #B22222}
H2.HEADING {color: #FFFFFF; font-size: 10 pt; font-family:verdana; text-decoration: underline;}
p.HEADING {color: #FFFFFF; font-size: 12pt; font-family:verdana; text-decoration: underline;}
BODY{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 230px;
}
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
}