Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using CSS with seperate frame pages...

    Basically I have the following pages:

    index.html
    framea.html
    frameb.html
    framec.html

    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

    Thanks

  • #2
    New Coder
    Join Date
    Jun 2008
    Posts
    93
    Thanks
    12
    Thanked 1 Time in 1 Post
    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.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello mannisandhu420,
    Code:
    <!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">
    <head>
    <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" />
    </head>
    <body>
    your html markup would go inside these <body> tags
    </body>
    </html>
    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.
    Last edited by Excavator; 11-27-2008 at 08:12 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

    Thanks

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Right basically these are the xhtml codes for 2 frame pages:

    frameb.html

    <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">

    </a>

    framec.html

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

    style.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??

  • #7
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Before you go much further you should fix what you've got. A well formed document needs to be formatted in a specific way.

    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...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi mate

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

    http://www.2shared.com/file/4359190/...1e/Design.html

    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!

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    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.



    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Sure, I'll quote it here. You can always File/Save As in your browser to get it too.

    Code:
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    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?

    Do you have a link to the current version?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Can't help you on this specific problem, but there is a wealth of stuff here.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •