View Full Version : External CSS/DIV HELP!


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;
}

kicker91
04-14-2004, 09:24 PM
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{
background-color: #000000;
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; }

There, I fixed it up. :) Be sure you are also using div id="" instead of div class="". :)

Mistical
04-14-2004, 10:01 PM
Ok, basically I want to know if I am setting everything up the right way.
When using this layout, what exact coding do I place in my style sheet and in my html file in order for it to work correctly? Do I need to add anything?

kicker91
04-14-2004, 10:04 PM
Okay, in the head tag, normally right after the <title> tag, add this...

<link rel="stylesheet" type="text/css" href="style.css">

And what you have as your stylesheet, name style.css, or whatever you want. :)

Mistical
04-15-2004, 03:04 AM
I understand the linking of the style sheet, but does the entire code that is above go inside the external style sheet, exactly the way it is written?
and the other part of the code in the html index page?
Everytime I try this, I get a completely blank page.

Valkyrie
04-15-2004, 04:42 AM
All the CSS will go in the external style sheet. There should be no <style> tags in there either. In each page that you want to use the style sheet, type the code that Kicker gave you in the head. And then have all your divs in the body.