SillyBilly Posted December 27, 2005 Share Posted December 27, 2005 I created my first CSS, but the index.html page will not show the backgroung gif nor the alt: black. Tidy will not validate my .css Any help would be appreciated. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3org/TR/html4/loose.dtd"><html><head><!My Stylesheet><style type="text/css">body {background-image: pictures/blackmarble3.giffont-family: verdana, helvetica, arial, sans-serif;color: #FFFFCClink: #33CCFF VLINK: #FF6666;margin: 0em 2em 0em 2em;}h1,h2,h3, h4,{text-align: center;font-family: Georgia, "Times New Roman", Times, serif;}</style></head></html> Link to comment Share on other sites More sharing options...
SmokingMan Posted December 27, 2005 Share Posted December 27, 2005 <!My Stylesheet>I'm assuming this is a comment, if so it should be written as <!-- My Stylesheet -->{background-image: pictures/blackmarble3.giffont-family: verdana, helvetica, arial, sans-serif;color: #FFFFCClink: #33CCFF VLINK: #FF6666;margin: 0em 2em 0em 2em;}You also need to add the semicolons at the end of the background-image & color properties.Try that first and see what happens. Link to comment Share on other sites More sharing options...
SillyBilly Posted December 27, 2005 Author Share Posted December 27, 2005 (edited) I'm assuming this is a comment, if so it should be written as <!-- My Stylesheet -->You also need to add the semicolons at the end of the background-image & color properties.Try that first and see what happens.<{POST_SNAPBACK}> Thank you for the quick reply. I made the three corrections in the CSS but the index.html does not reflect the code. In fact it seems to ignore it completely, because the text is black and the background is white. I am including both the CSS and the index.html for your comments. TIA.<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3org/TR/html4/loose.dtd"--><html><head><--!My Stylesheet--><style type="text/css">body {background-image: pictures/blackmarble3.gif;font-family: verdana,helvetica,arial,sans-serif;color: #FFFFCC;link: #33CCFF VLINK: #FF6666;margin: 0em 2em 0em 2em;}h1,h2,h3, h4,{text-align: center;font-family: Georgia,"Times New Roman",Times,serif;}</style></head></html>*****************************************************************<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3org/TR/html4/loose.dtd"--><html><head><link href="mystyle.css" rel="stylesheet" type="text/css"><title>Welcome to The Coalminers' Site</title></head><h1>Welcome to the The Coalminers' Site</h1><hr><p>On this site you will find information about the Collier family, their roots, history, coat of arms, family trees, photos, and more.</p><p>The site is divided into topics which can be accessed directly from the links at the bottom of each page.</p><p>The pages containing the <b><i>Coat of Arms</i></b> and <b><i>Enlarged Photos</i></b> do not have a footer with the menu links.<br><br>You return to the previous page by clicking the <img src="pictures/backbutton.gif" alt=black> button in the top left corner of the browser window.</p><p align=center>The pages of the site are:<br><a href="index.html">Welcome</a><br><a href="history.html">History</a><br><a href="goodenoughs.html">Goodenoughs</a><br><a href="colliers.html">Colliers</a><br><a href="photos.html">Photos</a><br><a href="familytrees.html">Family Trees</a><br><a href="recipes.html">Recipes</a><br><a href="ceilidh.html">Ceilidh</a><br><a href="fathersday.html">Fathers' Day</a><br><a href="christmas.html">Christmas</a><br><a href="jokes.html">Jokes</a><br><a href="inmemory.html">In Memory</a></p></body></html> edit: fixed omitted closing code tag and made it codebox due to length of post - skemcin Edited December 27, 2005 by Skemcin Link to comment Share on other sites More sharing options...
SmokingMan Posted December 27, 2005 Share Posted December 27, 2005 Is your CSS saved as a .css file? With the link you have, you need to have your stylesheet saved as a .css file. It looks as if it's saved as a web page. Try using a plain text editor such as Notepad and save this as "mystyle.css" file in the same directory as "index.htm". Try this: /* My Stylesheet /*body {background-image: pictures/blackmarble3.gif;font-family: verdana,helvetica,arial,sans-serif;color: #FFFFCC;link: #33CCFF VLINK: #FF6666;margin: 0em 2em 0em 2em;}h1,h2,h3, h4,{text-align: center;font-family: Georgia,"Times New Roman",Times,serif;} All of the HTML tags don't belong in a style sheet, just the styles you are defining. Then you save it as a .css file for the page to be able to access it if you are accessing it as an external style sheet. Link to comment Share on other sites More sharing options...
SillyBilly Posted December 27, 2005 Author Share Posted December 27, 2005 Is your CSS saved as a .css file? With the link you have, you need to have your stylesheet saved as a .css file. It looks as if it's saved as a web page. Try using a plain text editor such as Notepad and save this as "mystyle.css" file in the same directory as "index.htm". Try this:/* My Stylesheet /*body {background-image: pictures/blackmarble3.gif;font-family: verdana,helvetica,arial,sans-serif;color: #FFFFCC;link: #33CCFF VLINK: #FF6666;margin: 0em 2em 0em 2em;}h1,h2,h3, h4,{text-align: center;font-family: Georgia,"Times New Roman",Times,serif;} All of the HTML tags don't belong in a style sheet, just the styles you are defining. Then you save it as a .css file for the page to be able to access it if you are accessing it as an external style sheet. <{POST_SNAPBACK}> Thanks for your answer and suggestions.I have the file saved as mystyle.css You will notice that I have referenced it by<link href="mystyle.css" ...>Yes, it is in the same directory as the index.html fileI'll try the code that you have posted.Have I called the stylesheet correctly from the index.html file? Link to comment Share on other sites More sharing options...
F-Man Posted December 27, 2005 Share Posted December 27, 2005 background-image: pictures/blackmarble3.gif;should bebackground-image: url(pictures/blackmarble3.gif);Also, there is no properties called "link" and "vlink". I think you meant "a:link" and "a:visited". Link to comment Share on other sites More sharing options...
SillyBilly Posted December 28, 2005 Author Share Posted December 28, 2005 Is your CSS saved as a .css file? With the link you have, you need to have your stylesheet saved as a .css file. It looks as if it's saved as a web page. Try using a plain text editor such as Notepad and save this as "mystyle.css" file in the same directory as "index.htm". Try this:/* My Stylesheet /*body {background-image: pictures/blackmarble3.gif;font-family: verdana,helvetica,arial,sans-serif;color: #FFFFCC;link: #33CCFF VLINK: #FF6666;margin: 0em 2em 0em 2em;}h1,h2,h3, h4,{text-align: center;font-family: Georgia,"Times New Roman",Times,serif;} All of the HTML tags don't belong in a style sheet, just the styles you are defining. Then you save it as a .css file for the page to be able to access it if you are accessing it as an external style sheet. <{POST_SNAPBACK}> background-image: url("pictures/blackmarble3.gif"); I played around and found that the code for the background gif was incorrect. I show the corrected code above, which now works. I also took out all the HTML elements in the CSS that were not necessary, as you suggested.I noticed that the end tag for the comment is reversed in your suggestion. I changed it to */I just noticed the post from F-Man. I'll correct the link properties. I'll also try the gif without the quotes.Thanks to both of you for the suggestions, and for giving me a fresh look at the code. If I have any other problems, I'll start a new thread. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now