PDA

View Full Version : Help linking to external CSS

jackichad
10-03-2004, 11:37 PM
Hi Gang. I'm hoping someone can help me out here as I'm getting really frustrated with this. I am starting a new webapge and would like to use CSS to form the layout of the page. The problem I can not get the page to take the CSS changes.

I'm going to post my two files here as they are not very large and I'm hoping someone can find my stupid mistake.

Here is my index.html:

<html>
<head>
<link rel="stylesheet" href="/httpdocs/cof.css" type="text/css">
<title>Canton, OH - City of Flags Chorus</title>
</head>

<body>


This will be the new City of Flags Chorus webpage. I will be updating this page as soon as I can figure out how to use CSS layouts.


Thanks for stopping by!


</body>
</html>

And here is the CSS that I am trying to call:

<html>
<head>
<title>Two Column CSS Layout with Header</title>
<style type="text/css">

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: 15px;
}
</style>
</head>

<body>

<div id="header">

Your header will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.

</div>

<div id="left">

Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.

</div>


<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>

</body>
</html>

I have properly uploaded the index.html and cof.css to my webserver, and put them in the httpdocs folder as instructed by my web host. The webpage name is www.cityofflagschorus.com

I got the CSS layout from Lissa's webpage here. I have looked around various webpages trying to figure out what I am doing wrong before posting here.

Any help would be greatly appreciated! Thanks in advance!
-Chad
Monkey Bizzle
10-04-2004, 12:58 AM
let's see... if you are linking to an external CSS, then the only thing on that page should be nothing but CSS... you have taken a full page layout, and saved it as CSS and are linking to it... try this instead.. for now, until you get the hang of CSS, don't use an external style sheet. get rid of your .css file and use this as the code on your actual page.

<html>
<head>
<title>Two Column CSS Layout with Header</title>
<style type="text/css">

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: 15px;
}
</style>
</head>

<body>

<div id="header">

Your header will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.

</div>

<div id="left">

Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.

</div>


<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>

</body>
</html>
if you read what it says, then you would know that your content goes in the divs. so, try that for now...
jackichad
10-04-2004, 11:45 PM
Thank you Monkey Bizzle. I tried what you suggested and it worked! I think I was getting a little ahead of myself by trying to learn CSS along with basic HTML right from the start.

Thanks again!
-Chad