Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Bri
    Bri is offline
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Super newb question: body color not working in external style sheet

    I am so annoyed and confused right now. I've looked for why this isn't working but can't figure out a reason from searching the web/these foruns.

    I'm taking an intro to html/css class and doing an assignment for it (I am looking into getting into the web design field after college, this isn't just homework help ;D)

    I can not get the body colors to apply or the footer colors to apply. I don't know why. Please look at my code and let me know why it's not working. I'm sure I did something stupid. Also, if you see any other potential problems with my code let me know, looking for tips and tricks with anything!

    I did run it through the WC3 validator and it says no errors

    This is the CSS code.
    "pacific.css"
    Code:
    <style>
    body { background-color: #111111;
    		color: #666666; }
    h1 { background-color: #000033;
    		color: #FFFFFF;}
    h2 { color: #3399CC;}
    #nav { background-color: #90C7E3; }
    #footer { color: #666666; }
    .companyname { color: #000033;}
    </style>
    This is the html web page code it applying to
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css"
         href="pacific.css" title="Default Styles" media="screen">
    
    <title>Pacific Trails Resort</title>
    </head>
    
    <body>
    	<div>
    	<h1>Pacific Trails Resort</h1>
    	</div>
    	<div id="nav"; >
    	<strong>
    	<a href="index.html">Home</a>
    	<a href="yurts.html">&nbsp;Yurts</a>
    	<a href="activites.html">&nbsp;Activites</a>
    	<a href="reservations.html">&nbsp;Reservations</a>
    	</strong>
    	</div>
    	<br>
    	<h2>Enjoy Nature and Luxury</h2>
    	<p>Pacific Trails Resort offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.
    	<ul>
    		<li>Private yurts with decks overlooking the ocean</li>
    		<li>Activities lodge with fireplace and gift shop</li>
    		<li>Nightly fine dining in the Overlook Cafe</li>
    		<li>Heated outdoor pool and whirlpool</li>
    		<li>Guided hiking tours of the redwoods</li>
    	</ul>
    <div>
    <br>
    	Pacific Trails Resort<br>
    	12010 Pacific Trails Resort<br>
    	Zephyr, CA 95555<br>
    	888-555-5555<br>
    </div>
    <div id=footer"; align="center";>
    <br>
    <p><small><i>
    Copyright &copy; 2012 Pacific Trails Resort. All Rights Reserved.<br>
    <a href="mailto:AbriannaPeto@AbriannaPeto.com">AbriannaPeto@AbriannaPeto.com</a>
    </small></p></i>
    </div>
    	
    </div>
    </body>
    </html>

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    I jus tran your code through the validator and got 19 errors...... anyhow. your .css file does not need <style> elements in it

    and on the footer should be like this:

    Code:
    <div id="footer">
    align="center" is deprecated in xhtml, use css to center things

    id must be in qoutation marks ( or not at all will technically work too but thats a bad ide) , you were missing one

    html elements generally only use semicolons in inline javascript and inline css style

    Code:
    < a href="/" onclick="javascript:dosomething();" style="text-align:center;">test</a>

  • #3
    New Coder
    Join Date
    Nov 2012
    Posts
    11
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Remove the ; from the div id's and classes(ie.<div id="nav"; >). I'm not sure why those are there nor do I think they are valid. I may be wrong and you may be working out a code I've never heard of, but if this is simple html and css remove them.

  • #4
    Bri
    Bri is offline
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DanInMa View Post
    I jus tran your code through the validator and got 19 errors...... anyhow. your .css file does not need <style> elements in it

    and on the footer should be like this:

    Code:
    <div id="footer">
    align="center" is deprecated in xhtml, use css to center things

    id must be in qoutation marks ( or not at all will technically work too but thats a bad ide) , you were missing one

    html elements generally only use semicolons in inline javascript and inline css style

    Code:
    < a href="/" onclick="javascript:dosomething();" style="text-align:center;">test</a>
    Aha the missing quotation mark in the footer has fixed it along with the other tips... not sure exactly what it was but now it's working. How did you run it through the validator? I input it directly (copy&paste) and it says no errors

    Also I know that the align in html is outdated, my book says so, it just hasn't gone into the new way of doing it yet thanks for the help!

    Quote Originally Posted by hirelogo View Post
    Remove the ; from the div id's and classes(ie.<div id="nav"; >). I'm not sure why those are there nor do I think they are valid. I may be wrong and you may be working out a code I've never heard of, but if this is simple html and css remove them.
    You don't use semi-colons in the actual website html or the external style sheet? My book says you need them in the style sheet (I think) and when I removed them and only them from the style sheet it stopped working properly. I removed them from the actual html and I think that helped fix the problem I was having.

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    semicolons are used in style sheets yes, but you were using them in your html.

    I copy and pasted your code directly into the w3cvalidator. I can look at your code visibly and tell it's not compliant, jsut the semicolons alone would make the validator squawk, maybe you used an outdated site?

  • #6
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    Quote Originally Posted by Bri View Post
    You don't use semi-colons in the actual website html or the external style sheet?
    Semi-colons are used in CSS to separate properties, but aren't part of HTML.

    HTML syntax:
    Code:
    <element attribute="value" attribute="value"> </element>
    CSS syntax:
    Code:
    selector { property: value; property: value; }
    Inline syntax:
    Code:
    <element style="property: value; property: value;" attribute="value"> </element>
    Note: Those are fake names, for example purposes.
    Note: You can always omit the last semi-colon in a CSS section.

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 648 Times in 638 Posts
    You also don't need the javascript: label at the start of the JavaScript - onclick already identifies the content as being JavaScript and there is nothing in your script that attempts to reference the label.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •