ksheila Posted May 28, 2012 Report Posted May 28, 2012 So I have done "exactly" what this page... http://how-to-build-websites.com/css-tutorial/part1.php#basicPage ..says to do several times. I still end up with a page that looks like this... (The Main navigation ; The Main Heading Go to the Web Designer's Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'. Follow the instructions there and create your basic HTML page - and do it now!) (it is supposed to look like this) (The Main Heading Go to the Web Designers Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'. Follow the instructions there and create your basic HTML page. And do it now! The Main navigation) I cannot get the page to read the css doc. I can't get the border, colors, nothing. Both are in the folder. Any help would be much appreciated.. Quote
Andrea Posted May 28, 2012 Report Posted May 28, 2012 Copy and paste all of your code so we can see everything you have. Check the exact spelling of the file name of your .css - it has to match the path exactly and is case sensitive. Quote
BuildMyWeb Posted May 30, 2012 Report Posted May 30, 2012 yes, really cannot help you without seeing your code. that being said, check path to css file. make sure you are referencing the css file from your head section: <link rel="stylesheet" type="text/css" href="MY_CSS_FILE.css" /> Quote
SparkleBerries Posted June 6, 2012 Report Posted June 6, 2012 I have the exact same problem. I have checked that the file name matches exactly, and have tried swapping the code between the <head></head> tags and <body></body> tags. My coding is as follows.. PractiseHTML.html: <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>First CSS Tutorial</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="myCss.css" rel="stylesheet" type="text/css"> <title>My Practice HTML Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div id="navigation"> <h2>The Main navigation</h2>; </div> <div id="centerDoc"> <h1>The Main Heading</h1> <p> Go to the Web Designer's Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'. Follow the instructions there and create your basic HTML page - and do it now! </p> </div> </body> </html> And in the myCss.css file: /* Generic Selectors */ body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #333333; background-color: #F9F9F9; } p { width: 80%; } li { list-style-type: none; line-height: 150%; list-style-image: url(../images/arrowSmall.gif); } h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; font-weight: bold; color: #000000; } h2 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; font-weight: bold; color: #000000; border-bottom: 1px solid #C6EC8C; } /**************** Pseudo classes ****************/ a:link { color: #00CC00; text-decoration: underline; font-weight: bold; } li a:link { color: #00CC00; text-decoration: none; font-weight: bold; } a:visited { color: #00CC00; text-decoration: underline; font-weight: bold; } li a:visited { color: #00CC00; text-decoration: none; font-weight: bold; } a:hover { color: rgb(0, 96, 255); padding-bottom: 5px; font-weight: bold; text-decoration: underline; } li a:hover { display: block; color: rgb(0, 96, 255); padding-bottom: 5px; font-weight: bold; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #C6EC8C; } a:active { color: rgb(255, 0, 102); font-weight: bold; } /************************* ID's *************************/ #navigation { position: absolute; z-index: 10; width: 210px; height: 600px; margin: 0; border-right: 1px solid #C6EC8C; font-weight: normal; } #centerDoc { position: absolute; z-index: 15; padding: 0 0 20px 20px; /*top right bottom left*/ margin-top: 50px; margin-left: 235px; } Please help! Quote
SparkleBerries Posted June 6, 2012 Report Posted June 6, 2012 Ksheila - I'm not sure if you've worked out what went wrong yet? I've just shuffled my code around a bit and managed to get very similar to the example posted, although my text seems to be a slight bit smaller, but in the same proportions. I needed to change my .html file only. If it helps you below is my new coding.. <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>First CSS Tutorial</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="myCss.css" rel="stylesheet" type="text/css"> <title>My Practice HTML Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div id="navigation"> <h1>The Main Heading</h1> <p>Go to the Web Designer's Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'. Follow the instructions there and create your basic HTML page - and do it now! </p> </div> <div id="centerDoc"> <h2>The Main navigation</h2> </div> </body> </html> I have simply swapped <h1> and <h2>, and taken <p> with <h1>.. if that makes sense? Anyway, I hope that helps you Oh, and as for the border and colours.. I don't think with the code we have been given thus far, that any parameters in regards to these have been set yet. I may be completely wrong (I only started learning ANY of this today, so I'm basically making it up as I go), but you did say "Any help would be much appreciated.." ;D Quote
Andrea Posted June 6, 2012 Report Posted June 6, 2012 Changing the order of the code has nothing to do with it.What does so, is this: <link href="myCss.css" rel="stylesheet" type="text/css"> That should be actual quotes,not the code for them - like this: <link href="myCss.css" rel="stylesheet" type="text/css"> Also, looking at the code you posted in Posts #4 and # 5, I note the following: You're missing the '!' in <!DOCTYPE You have 2 charsets and two title tags in your head section - only one needed (each) In your CSS, the quotes around 'Times New Roman' must be actual quotes, not the code for quotes. (Note - there are several incidences of this) In Post #4, there is a semi-colon following the closing h2 tag that does not belong. Make the above changes, and your code will work: http://aandbwebdesig...rum/berry1.html Changing the order like you did in #5 (after my corrections above) just gets you this: http://aandbwebdesig...um/berry2.html. Let me know if you have any questions. Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.