Quantcast Having trouble getting CSS to link to Zengarden XHTML page - digitalFAQ Forum
Go Back    Forum > Digital Publishing / Web Sites > Website and Server Troubleshooting

Reply
 
LinkBack Thread Tools
  #1  
11-05-2011, 12:45 AM
Sossity Sossity is offline
Premium Member
 
Join Date: Nov 2007
Posts: 434
Thanked 5 Times in 5 Posts
For my mat 125 class we are to take this html code; http://www.csszengarden.com/zengarden-sample.html

& create our own css page to make it our own design.

the zen garden project; http://www.csszengarden.com/

is where designers all use the same html code, with the text & everything, but they make their own css files,to make their page unique.

We are to do this in our class, I am to take this same html code, make my own theme, & customize it with my own css, like the designers in the zen garden project. We are not to change the code at all, I guess except for linking to our own css file.

I am having trouble getting my own css page to link up with the html code, so when I try to add my own background color or font, I cannot see the changes when I preview the html code to see what I have done.

so unless I can get past this part, I cant progress with my project/assignent.

i tried having my css called project1.css

I then went into the xtmhl code/page I got from this sight, & according to one of the digital downloads of books I got from here, I inserted this line of code into the html from the css zen garden site to link to my own css;

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

but when I tried to preview my html file in my html editor, I cant see any of my changes.

I added this line just below the title in between the head section of the html.

I have tried to attach my files, so it could be seen what I am doing , but this did not work, it said invalid code.

one can see the html we are working with from the css zen garden site, since I cannot upload my own files.

I feel a bit lost already, it seems I hit hurdle after hurdle with this web coding. i have to have this project done by nov 14 2011.
Reply With Quote
Someday, 12:01 PM
admin's Avatar
Ads / Sponsors
 
Join Date: ∞
Posts: 42
Thanks: ∞
Thanked 42 Times in 42 Posts
  #2  
11-05-2011, 06:05 AM
admin's Avatar
admin admin is offline
Site Staff | Web Development
 
Join Date: Jul 2003
Posts: 4,368
Thanked 586 Times in 438 Posts
Code:
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
Don't forget the ".css" in the filename.
And then with a non-absolute href, you'll need the CSS to be in the same folder as the HTML.

Quote:
I have tried to attach my files, so it could be seen what I am doing , but this did not work, it said invalid code.
You must zip the files before you can attach. The ability to upload HTML would be a security risk.

- Did this site help you? Then upgrade to Premium Member and show your support!
- Also: Like Us on Facebook for special DVD/Blu-ray news and deals!
Reply With Quote
  #3  
11-05-2011, 04:27 PM
Sossity Sossity is offline
Premium Member
 
Join Date: Nov 2007
Posts: 434
Thanked 5 Times in 5 Posts
what is non absolute href? apologies if I sound a little slow, I am still struggling a bit with this class & trying to learn the best I can, I hope there will be plenty of patience as I will probably be asking more questions about html & CSS.
Reply With Quote
  #4  
11-05-2011, 04:51 PM
lordsmurf's Avatar
lordsmurf lordsmurf is offline
Site Staff | Video
 
Join Date: Dec 2002
Posts: 8,516
Thanked 1,397 Times in 1,227 Posts
Absolute = protocol + FQDN (fully qualified domain name) + directories (optional) + file name.

Protocol = http:// (hxxp:// has been used in examples below, to prevent auto-linking URLs)
FQDN = www.digitalFAQ.com (for example)
directories = /images/ (for example)
file name = butterflies.jpg

"Non-absolute" = relative, as in relative to your current location.
At my home, the "next door neighbor" is John (left) and Bob (right). If I went to Bob's house, "next door neighbor" is different.

hxxp://www.digitalFAQ.com/images/butterflies.jpg = absolute. It always pulls the image from that location.

Now consider this scenario...

hxxp://www.digitalFAQ.com/reviews/page1.html
hxxp://www.digitalFAQ.com/images/page2.html
hxxp://www.digitalFAQ.com/guides/page3.html

Three pages that are in different folders. Note that one is in "images".

If I href'd "butterflies.jpg" instead of "http://www.digitalFAQ.com/images/butterflies.jpg" then only page2.html would show the image, as it's in the same folder. In order for the image to show in the other pages, I'd have to either (1) make copies of butterflies.jpg in the other folders, which is not a good idea, or (2) fix the path to absolute, so that any page can load it, or (3) create relative paths.

The only drawback of absolute is that it requires DNS calls, even when developing a site offline. (Although it should be noted that you can setup a local DNS to the computer.) A "DNS call" means that digitalFAQ.com must be a website that the computer can connect to, using a nameserver (local or remote, it doesn't matter). If the computer cannot reach digitalFAQ.com, then it cannot load that absolute path image.

A proper relative path would look like this: <a href="../images/butterflies.jpg">
The ".." (two periods, side by side) means "go back one folder".

If hxxp://www.digitalFAQ.com/guides/folder1/page3.html was the page, then it would be <a href="../../images/butterflies.jpg">
If hxxp://www.digitalFAQ.com/guides/folder1/folder2/page3.html was the page, then it would be <a href="../../../images/butterflies.jpg">

But that makes the code somewhat "spaghetti", too. So absolutes are a favorite of developers, with only minor use of relative coding. Most developers use a mix of absolute and relative, and base decisions with forward thinking on what may or may not change in the future.

Does that clear it up?

While I have mentioned the path for a .jpg image, the same applies to .css files.

Also, the stylesheet file must be named ".css" in order for the server to acknowledge the MIME type and load a file. It must be "stylesheet-filename.css" and not just "stylesheet-filename". That's not valid a MIME (technically having no MIME) for loading a CSS document in a browser. "MIME" is a technical way to say the computer understands what the file is supposed to be, what kind of data it contains.

- Did my advice help you? Then become a Premium Member and support this site.
- Find television shows, cartoons, DVDs and Blu-ray releases at the TVPast forums.
Reply With Quote
  #5  
11-07-2011, 04:28 PM
kpmedia's Avatar
kpmedia kpmedia is offline
Site Staff | Web Hosting, Photo
 
Join Date: Feb 2004
Posts: 4,247
Thanked 354 Times in 332 Posts
So ..... did this solve your issue?

- Did my advice help you? Then become a Premium Member and support this site.
- Please Like Us on Facebook | Follow Us on Twitter

- Need a good web host? Ask me for help! Get the shared, VPS, semi-dedicated, cloud, or reseller you need.
Reply With Quote
  #6  
11-07-2011, 08:38 PM
Sossity Sossity is offline
Premium Member
 
Join Date: Nov 2007
Posts: 434
Thanked 5 Times in 5 Posts
Yes, it did, just after I wrote my question, I figured out what happened, I had left the .css extension off.

thanks for the breakdown of absolute & relative.
Reply With Quote
Reply




Similar Threads
Thread Thread Starter Forum Replies Last Post
Trouble with v1900 AIW, ATI shut itself down? Tom_n_Jonna Capture, Record, Transfer 2 06-21-2007 08:51 PM
Question concerning tv problem trouble shooting stoogedog Videography: Cameras, TVs and Players 2 08-03-2006 03:20 PM
Trouble with TBC...HELP! Tom_n_Jonna Restore, Filter, Improve Quality 3 01-21-2006 12:39 AM
Having some trouble... Daniel Capture, Record, Transfer 9 06-06-2005 10:25 AM
Having login trouble? (IE5,IE6) Here’s the fix... admin General Discussion 0 04-19-2004 03:32 PM

Thread Tools



 
All times are GMT -5. The time now is 06:52 PM