View Full Version : Using CSS with seperate frame pages...

Nov 26th, 2008, 10:13 PM
Basically I have the following pages:


And I now have a CSS file called “style.css”

Basically what I want to do is to be able to control the images and text of all my frames from the CSS file. Firstly is this even possible?

I have been given the following code:

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

I was told that if I put that code at the top of my frame pages I should be able to edit them from the CSS file however this doesn’t seem to be working.

What I want to know is, is that the right code I’m supposed to be using? And where exactly do I have to put it?

Also can I control all my frames and other pages from one CSS file or will I have to create different CSS files?

Sorry I’m a bit new to this as you can tell!

If you need the codes for any of the pages let me know and I will put them up


Nov 27th, 2008, 03:45 AM
Make sure you have uploaded your style.css to your public_html directory.

Put the code that you have in the head.

Make sure you put the code in all the pages that you want the css to be applied on.

Nov 27th, 2008, 05:06 AM
Hello mannisandhu420,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>name of your page</title>
<link href="../path/style.css" rel="stylesheet" type="text/css" />
your html markup would go inside these <body> tags

That will give you an idea what your head should look like and where that line should go. You just need to make sure the ../path/ points to where you put style.css.

Also can I control all my frames and other pages from one CSS file or will I have to create different CSS files?
You can do it all from one CSS file if you like.

Nov 27th, 2008, 07:00 PM
Do you know how to break it up individually in one .css file?

Because i have three frames and when i set a background image for one frame in the .css file, it applies the same background image for the other frames?


Nov 27th, 2008, 07:10 PM
That's no problem too. Give it an id or a class... maybe it's time for you to post some code so we can see what we're working on.

Nov 27th, 2008, 07:57 PM
Right basically these are the xhtml codes for 2 frame pages:


<link href="style.css" rel="stylesheet" type="text/css" />
<a href="framec.html" target="MainWindow" <p><img src="home.gif" width="184" height="46"></a></p>
<a href="introduction.html" target="MainWindow" <p><img src="INTRO.gif" width="184" height="46"></a></p>
<p><img src="EFFECTS.gif" width="184" height="46"></p>
<p><img src="future.gif" width="184" height="46"></p>
<p><img src="SOLUTIONS.gif" width="184" height="46"></p>

<a href="effects.html" target="MainWindow">



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


body {background-image:url('background.jpg')}

Right basically, the background image in the style.css goes onto frame b and c, whereas i only want it to go onto framec.html

For frameb.html I want the background image "test2.jpg" to come up however i do not know how to do this

Any ideas?? If its better i can upload a .rar file of the whole lot somewhere??

Nov 27th, 2008, 07:58 PM
I havent got a clue how to set an id or class myself

Im a first year university student doing this, i've emailed my lecturer twice now and ive had no reply

its so hard :(

Nov 27th, 2008, 08:11 PM
Before you go much further you should fix what you've got. A well formed document needs to be formatted in a specific way. (http://www.sitepoint.com/blogs/2008/09/23/a-minimal-html-document/)

Look at the example code I gave you for a start.

Do you have a server you can put up a temorary url? It might be easier than emailing a .rar back and forth...

Nov 27th, 2008, 08:38 PM
Hi mate

I've just uploaded it onto this free server thingy now:


If you go to the bottom and click on "Save file to your PC : click here" that it should work

If you could have a quick look at it, i would appreciate it alot mate

Basically if you could start off using the .css on one sheet on different pages i think i'll get the hang of it from there, i just need to get used to the coding and stuff you know?

Thanks alot for this!

Nov 28th, 2008, 12:48 AM
I put up a little sample to show you.

Their are only 2 pages and one CSS file here. The two pages are Home/index.html and Intro/intro.html.

#content_a and #content_b are two different IDs that show your different backgrounds, all done from the same CSS file linked in the head of each document.

link (http://nopeople.com/mannisandhu420/)


Nov 28th, 2008, 01:10 AM
Thanks mate!

I really appreciate you taking your time out to help me on this one, I think im getting the hang of it

Was wondering if you had the .css file to give me?

Cheers mate!

Nov 28th, 2008, 07:05 AM
Sure, I'll quote it here. You can always File/Save As in your browser to get it too.

html, body {
font: 100% "Comic Sans MS";
color: #333333;
text-decoration: none;
background: #99FFFF;
* {
margin: 0;
padding: 0;
#wrap {
border: 8px double #F00;

#header {
text-align: center;
background: #fff;
padding: 0 0 10px 0;
border-bottom: 8px double #F00;
#menu_left {
width: 184px;
height: 400px;
float: left;
border-left: 8px #F00;
background: #FFF;
#menu_left ul {
list-style: none;
#menu_left ul a {
display: block;
height: 46px;
width: 184px;
#menu_left ul a:hover {
background-position: left;
a.button1 {
background: url(01home.gif) no-repeat -3px;
a.button1:hover {
background: url(01home.gif) no-repeat;
a.button2 {
background: url(02intro.gif) no-repeat -3px;
a.button2:hover {
background: url(02intro.gif) no-repeat;
a.button3 {
background: url(03effects.gif) no-repeat -3px;
a.button3:hover {
background: url(03effects.gif) no-repeat;
a.button4 {
background: url(04future.gif) no-repeat -3px;
a.button4:hover {
background: url(04future.gif) no-repeat;
a.button5 {
background: url(05solutions.gif) no-repeat -3px;
a.button5:hover {
background: url(05solutions.gif) no-repeat;
#content {
height: 400px;
margin: 0 0 0 184px;
background: url(background.jpg) repeat;
border-left: 8px double #F00;
#content_a {
height: 400px;
margin: 0 0 0 184px;
background: url(test2.jpg) repeat;
border-left: 8px double #F00;

Nov 30th, 2008, 03:24 PM
Hey Excavator

Just wanted to say thanks for the help, you seriously explained it much better then my lecturers!

I've been adding a bit more to the website but i seem to be having a little problem with background images. For some reason the background image doesnt seem to go behind the text, it just goes underneath the text.

The coding i done for one image in css was:

#content {
height: 400px;
margin: 0 0 0 0px;
background: url(background.jpg) repeat;

Anything you may know about that?

Nov 30th, 2008, 05:42 PM
I'm not sure what you mean... the difference between behind and under.
That snippet you posted would put background.jpg as the repeated background of #content.
Could it be you have a float in #content that needs cleared? (http://www.quirksmode.org/css/clearing.html)

Do you have a link to the current version?

Nov 30th, 2008, 07:48 PM
Can't help you on this specific problem, but there is a wealth of stuff here. (http://www.exitfegs.co.uk/Sources.html)