Jump to content

Trouble with basic web design tutorial


Al

Recommended Posts

I'm following the tutorial on basic web design http://www.how-to-build-websites.com/css_Tutorial/index.php and have run into a problem. I correctly made an HTML page and a CSS page by cut and paste with the examples, but when I view my HTML page with Explorer I don't get the two column appearance...just the "navigation" div directly above the "centerdoc" div, also lacking any lined border. I've tripple checked the code in the CSS document and it correctly shows the margin spacing from top and from left and the code for the border is also correct. I checked the link from my HTML page to the CSS page and it looks just like the example, but I'm thinking this link isn't connecting the two pages correctly. Here is the link - and I named my CSS document "myCSS.css in a folder on my desktop. Should I better define the link to include the folder name, also? Please let me know what I can do to remedy this situation.

Thanks - Al

Link to comment
Share on other sites

Yes, if you placed your myCSS.css file in a folder, you'll have to list the folder name in the link as well. Like this: "folder/myCSS.css".

 

To make things easier while you're learning, I think I would create a general folder for your project and then place both the HTML and CSS inside that folder. That way you don't need to worry about this. You can just link straight to the file. Does that make sense?

Link to comment
Share on other sites

Thanks for the reply, Susie. I do have a folder with both documents in it. I even tried to place the name of the folder in the link as you suggested, but that didn't seem to work. I'm still at a loss. Might there be something amiss with how my browser views things...some kind of setting I'm unfamiliar with? I'll keep trying.

Al

Link to comment
Share on other sites

It's unlikely to be a browser setting; it could be a path problem or a mixture of lower and upper case between the link and the filename.

 

You could also try changing the order in the link:-

not

 

 

Although you probably don't need to do this now, it's better to use lower case for everything

 

also use lower case for all filenames without spaces, just - or _ between characters if you have to.

 

also make sure it hasn't been saved as mycss.css.txt as sometimes when saving from Notepad the .txt gets added and needs deleting.

Edited by Wickham
Link to comment
Share on other sites

Thanks for the info, Wickham. I tried all that you suggested, but it still hasn't worked. I think I'll start the whole process over. Maybe something has gotten into the mix that I just can't spot. Does the HTML page automatically look into its own folder to find the CSS page unless a larger link is referenced?

Al

Link to comment
Share on other sites

You know, you don't even need a folder. Your desktop is the folder. Just put both files on your desktop, link to the css, and load the HTML page. If that still doesn't work, just put the css in the head of your HTML page (google css in head section). That way you atleast can rule out the css not working variable.

 

That's how you do this whole thing see - baby steps! That's still how I build pages! There are about 200 steps to "completely" build a website. You or I cannot do it all in one step. First get it working (in this case a simple HTML page!) anyway you can - now save it! Now there's no going backwards from this point, only forward. Now work on linking to the css, get it working, now save it! Add colors - now save it!

 

Then you'll get to a point where you've invested so much time on this page your afraid to touch it for fear you'll break it. In that case copy the whole page and create another page (test2.html) and save it - now there's no going backwards from that working page - only forward. Also, in this way, it makes you more brave to experiment and try new and harder things. You no longer have to worry about breaking anything because you have your older file sitting there all nice and safe which you can simply return to if need be. I just finished a hard photo gallery I was working on - I think I made it up to like test10.html by the time I got it completely finished. Any way, that's how I do it...

Edited by Eric
Link to comment
Share on other sites

Thanks Eric, and everyone! I finally got it working. I tried to check my CSS by putting it in the head of my HTML page and it worked. Then I learned how to check for a file extension for my CSS page in "Save As" and found that by using the pull-down menu for "file name" there actually was a "txt" extension on my CSS, eventhough it didn't show up that way in the other usual places. So I deleted the extension and the link is good.

 

I'm having great fun learning about this code writing stuff, and thanks to you all I'm moving forward...with baby steps!!!

 

Al

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...