alabamasooner Posted May 21, 2012 Report Posted May 21, 2012 I bought the Beginner's Web Design Videos. Very good because they give a newbie like me an idea of the lingo and give me some comfort toward developing my own web design using Dreamweaver CS6. I tried the CS6 videos but they are challenging for a newbie. So, thanks, Stefan. I'm following your lessons and doing the design code step by step. Got a simple web design to work on multiple pages. They easily clicked back and forth as long as each html page was on my desktop. However, though I followed the directions closely, creating a cssTutorial folder on my desktop in which I inserted the css.html file, the following code did not work: <li><a href="cssTutorial/css.html">CSS</a></li> I added the codes like the following to enable the browser to go up a level for the other html pages: <li><a href="../index.html">Home</a></li> Every time I clicked on the css.html from the cssTutorial folder, it would properly link to that web page. However, after successfully going to any of the other pages and trying to go back down to the css.html page, the Firefox browser always said it could not find the page. When I looked at the URL address, the cssTutorial was always left out. It consistently tried to see it at Desktop/css.html and never saw it as Desktop/cssTutorial/css.html. I've tried all sorts of things and can't get it to work. I'm about to pull my hair out. HELP! Anyone. I attached my css.html and the home page, index.html. Regards Steve (AlabamaSooner) css.html index.html Quote
Andrea Posted May 21, 2012 Report Posted May 21, 2012 If I understand right, all your files are directly on the desktop but the css.html which is inside a folder called cssTutorial which is on the desktop - so kind of like this (folders are bold): desktop root.css index.html products.html tables.html cssTutorial css.html On your index.html file, the navigation is like this: <li><a href="index.html">Home</a></li> <li><a href="products.html">Products</a></li> <li><a href="css.html">CSS</li> <li><a href="tables.html">Tables tutorial</li> Everything here should work BUT the link to CSS. The way this is written, all files need to be in the same folder, but CSS is not. so in order to get this to work, you need to write: <li><a href="index.html">Home</a></li> <li><a href="products.html">Products</a></li> <li><a href="cssTutorial/css.html">CSS</li> <li><a href="tables.html">Tables tutorial</li> Once you open your css.html page, where you have this code: <li><a href="../index.html">Home</a></li> <li><a href="../products.html">Products</a></li> <li><a href="cssTutorial/css.html">CSS</a></li> <li><a href="../tables.html">Tables tutorial</li> the links to Home, Products, and Tables should work, but the link to css.html would not work. The way it's written right now, that CSS file needs to be inside a folder called cssTutorial --- inside your current folder. But when you look at your css.html page, YOU ALREADY ARE INSIDE cssTutorial and there is no folder also called cssTutorial inside cssTutorial. The code for this should look like this: <li><a href="cssTutorial/css.html">CSS</a></li> (of course that just links to the page you're already on, but that's where it is. Does this help? Quote
alabamasooner Posted May 21, 2012 Author Report Posted May 21, 2012 I modified only the css.html file that is inserted within the folder cssTutorial. That folder is on my desktop. The index.html (or home page html), products.html, and tables.html are stand alone files outside of the cssTutorial folder and are also on my desktop. I changed only the css.html file within the cssTutorial folder per your recommended change. The browser again looked for it as a standalone file like the others. It did not recognize the cssTutorial folder sitting on my desktop beside the other files. The other sister html files use the same code which is: <li><a href="index.html">Home</a></li> <li><a href="products.html">Products</a></li> <li><a href="css.html">CSS</li> <li><a href="tables.html">Tables tutorial</li> The css.html file is now (per your recommendation): <li><a href="../index.html">Home</a></li> <li><a href="../products.html">Products</a></li> <li><a href="css.html">CSS</a></li> <li><a href="../tables.html">Tables tutorial</li> Per the video lesson I added ../ to them so that the browser would be pointed back up since the css.html file was nested within the cssTutorial folder (unlike the other html files). THE FIREFOX BROWSER STILL DOES NOT RECOGNIZE THE cssTutorial FOLDER. Should I continue the lessons with all of the files sitting on my desktop as standalone files? I ask this because after I have finished the lessons, I will be using Dreamweaver CS6 templates to set up my website. Maybe their code will be idiot proof. Regards and thanks for the help, Steve (AlabamaSooner) Quote
alabamasooner Posted May 21, 2012 Author Report Posted May 21, 2012 This has me a bit concerned about the placement of my directories once I start using Dreamweaver CS6, instead of Notepad or Bluefish. Would it be a good move to use Bluefish, instead of Notepad to do the exercise? Maybe Bluefish prepared code would somehow correct something I'm doing wrong (but cannot see) using Notepad for the code. Regards Steve Quote
alabamasooner Posted May 21, 2012 Author Report Posted May 21, 2012 I tried Bluefish with the same results. As long as all of the files, including the css.html file, were standalone but inside the BlueFishTraining folder I created (NOT on desktop this time), I was able to easily switch back and forth on the created web pages. However, as soon as I created a cssTutorial folder within the BlueFishTraining folder and inserted the css.html file inside the new directory, the Firefox Browser was unable to locate the file. In the situation where the browser could NOT locate the css.html file, the address on the error page said "C:/User/Steve/BlueFishTraining/css.html". Instead, it should have read "C:/User/Steve/BlueFishTraining/cssTutorial/css.html". Same problem that recurs over and over again. Funny though, if on the error page, I typed in cssTutorial between the file and the referenced BlueFishTraining folder on "C:/User/Steve/BlueFishTraining/css.html", then the webpage would come up because the correct address was identified on the URL. So, for whatever reason, the code as written, the Firefox browser, or my computer, I don't know which, fails to point the browser to the correct folder and file. I was hoping it was something in the code that was wrong. So since neither the desktop approach and the Bluefish approach work, I'm back to a previous question, should I continue the lessons using each file as a standalone and forget about setting up a trial directory for the tutorial? Quote
falkencreative Posted May 21, 2012 Report Posted May 21, 2012 Based on this comment: The other sister html files use the same code which is: <li><a href="index.html">Home</a></li> <li><a href="products.html">Products</a></li> <li><a href="css.html">CSS</li> <li><a href="tables.html">Tables tutorial</li> The path to your css.html file is incorrect. The CSS link needs to be "cssTutorial/css.html" -- in both your index.html file and any files (products.html, tables.html) that are outside the "cssTutorial" folder. Otherwise, yes, the browser will try to access a file that doesn't exist. Quote
Andrea Posted May 21, 2012 Report Posted May 21, 2012 I have no idea what Bluefish is, but if your file is located at: C:/User/Steve/BlueFishTraining/cssTutorial/css.html" - then that is what the link should say. Just correct the code. Quote
alabamasooner Posted May 21, 2012 Author Report Posted May 21, 2012 I made the change Ben suggested to my Bluefish created file AND IT WORKED!!! Thanks, Ben (and Andrea too for taking time to assist and comment!) I can now finish the tutorial. Quote
alabamasooner Posted May 21, 2012 Author Report Posted May 21, 2012 I'm studying the CSS code now. The tutorial was straightforward. Simply create a root.css file with the style descriptions. Stefan started by simply changing the width to 80%. He did it by creating a root.css file that said "p {width=80%;}". I created a similar root.css file and placed it within my root directory. My root directory folder is entitled "BlueFishTraining". This has my cssTutorial and image folders as well as other html files, including the index.html. My lead code in my index.html files says: <!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Web Design - tutorials: Home</title> <META NAME="description" content="Learn webdesign."> <META NAME="keywords" content="web design, web designers, creating a website"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="root.css" rel="stylesheet" type="text/css"> THEN, MY root.css file says: p {width=80%;} Yet, though the index.html file references the root.css file and the root.css file says width of 80%, the web page still is at 100%. I changed the root.css file to 60% to see if a difference was made, but no change this way either. Still 100%. So like my previous problem, somehow the way I have coded this, the browser is not seeing the css data rule in my root.css file. Anybody help? Quote
Andrea Posted May 21, 2012 Report Posted May 21, 2012 If you are working with the same version of your index.html that you attached to this thread - then it's because your link calls for ROOT.css, but you say your file is called root.css. File names are case sensitive. It's good practice to always lower-case them. It'll save you a lot of grief in the future. Quote
alabamasooner Posted May 21, 2012 Author Report Posted May 21, 2012 I thought of that. Changed the code on the index.html file and the others from ROOT.css to root.css which is the same title of my file. Still having the same problem. Quote
alabamasooner Posted May 21, 2012 Author Report Posted May 21, 2012 I even tried changing the values from % to pixels. Still no change. Page stays at 100%. Here is my current code for index.html: <!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Web Design - tutorials: Home</title> <META NAME="description" content="Learn webdesign."> <META NAME="keywords" content="web design, web designers, creating a website"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="root.css" rel="stylesheet" type="text/css"> </head> <body> <img src="images/Ardent Writer Logo Color.jpg" border="0"> <div id="navigation"> <ul> <li><a href="index.html">Home</a></li> <li><a href="products.html">Products</a></li> <li><a href="cssTutorial/css.html">CSS</li> <li><a href="tables.html">Tables tutorial</li> </ul> </div> <!--Main Document starts here --> <!--Main Document starts here --> <div id="center_doc"> <h3>1st Title</h3> <p> ... </p> <h3>2nd Title</h3> <p> ... </p> <h3>3rd Title</h3> <p> ... </p> <h3>THE PLACE TO LEARN WEB DESIGN!</h3> <p>If you want to learn web design, blah, blah, blah, blah.</p> <h3>WEB DESIGN ARTICLES FOR BEGINNERS AND EXPERTS</h3> <p> The <a href="articles/ArticlesHome.htm"><span class="Larger">articles </span></a>section of killersites.com contains a grab bag of information related to web design ... anything from flash to XML. It is best to snoop around and you will probably find something you are interested in.</p> <h3>FOR TOTAL BEGINNERS</h3> <p> If you are totally new to web design, your first stop to learning web design should be <a href="http://www.how-to-build-websites.com"> <span class="Larger">how-to-build-websites.com</span></a>. When you're done there, come back to killersites.com for more.</p> <p>The killersites.com <a href="mvnforum/index.jsp"> <span class="Larger">message/bulletin board</span></a> has plenty of helpful people - don't be shy to join in on the conversation! BTW, the message board is also a little treasure chest that you can search with the boards' search tool.</p> <h3>WHAT ELSE IS THERE?</h3> <p>Killersites.com has a few other 'goody' sections that you might want to explore: the <a href="photostock/indexPhotoStock.htm"> <span class="Larger"> free stock photography </span> </a> and the <a href="webDesignersHandbook/webdesignersHanbook.htm"><span class="Larger">Web Designers Handbook</span></a> come to mind.</p> <p>Thanks for stopping by.</p> <h3>Stefan Mischook</h3> <div class="footer">© 2004 KillerSites.com all rights reserved</div> </body> </html> Quote
benjaminmorgan Posted May 21, 2012 Report Posted May 21, 2012 (edited) p {width=80%;} is a syntax error. the correct code should be p {width:80%;} Edited May 21, 2012 by benjaminmorgan Quote
alabamasooner Posted May 21, 2012 Author Report Posted May 21, 2012 THANKS benjaminmorgan!!! It is absolutely remarkable how much the eye overlooks when you are editing your own work. Why I did not catch that, I do not know. Hope I don't have to call on you guys again. Appreciate your patience. Regards Steve (AlabamaSooner) 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.