SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    cannot advance to CSS stages in Lloyd book (Build Your Own Web Site. . . )

    First off, I must confess that I am taking a different approach to
    using your very good book--I am skipping the suggestion that I work
    on the Diving site, and substituting my own pages. Everything was
    going along pretty well, until the CSS part. I could open my pages,
    and they were shaping up fairly well; but I cannot get CSS to take
    effect. First I tried to link it to my "Puzzles" page; but when that
    didn't seem to work, I used another page (thinking that my puzzle
    formats might be in the way.) But the more regular page, contacts,
    would not become blue or red or show any change.

    First of all, I've been using Mac's TextEdit, but now Text Wrangler
    keeps grabbing the CSS file. (I've written Text Wrangler about why I
    cannot get preferences to "stick.")

    Then, I noticed something in the book about refreshing the pages in
    the browser. When I open my pages from the desktop, the Finder is
    still active, so I don't see how I can refresh the pages in the
    browser. WHICH leads me to another explanation: I am not using the
    Mac's Sites folder to hold my "My Documents" folder--I have this
    folder on my desktop. I probably stopped using the sites folder
    after I discovered that my .Mac's own web page conflicted with my new
    pages, probably because of the index.html of Macintosh's will
    "overwrite" any other so named folders in the Sites folder. I
    ultimately had to re-install my .Mac photos, although I cannot really
    attribute it to my efforts at my newer web page. (Apple did not tell
    me what may have caused the problem I had with .Mac, but did say I
    should start over.)

    As you can see, I have many "threads" of possible problems in here.
    I would greatly appreciate any direction. I couldn't find anything
    helpful in the SitePoint forums. These are probably too advanced for
    me at this point.

    mayachaya

  2. #2
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    maya,

    Let me try to break down the problems you're having and respond to each in turn:

    CSS not taking effect

    This is difficult for me to diagnose without seeing the files in question. If you could ZIP up one of your HTML files that you are attempting to link CSS to along with the relevant CSS file, and email the ZIP file to me at kevin@sitepoint.com, I should be able to determine where you've gone wrong.

    TextWrangler keeps grabbing the CSS file

    This sounds like more of a Mac OS X problem than a problem with CSS. Normally I'd suggest opening the Get Info window for the CSS file, changing the program associated with it, and then clicking the "Change All..." button to apply that change to all CSS files.

    Hopefully the TextWrangler support folks can point you in the right direction.

    Refreshing pages in the browser

    Simply clicking the Refresh button in your browser window should be all that is required to refresh the display of a page that you have modified. I'm not sure I'm understanding your question here, though.
    Kevin Yank
    CTO, sitepoint.com
    I wrote: Simply JavaScript | BYO PHP/MySQL | Tech Times | Editize
    Baby’s got back—a hard back, that is: The Ultimate CSS Reference

  3. #3
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi maya,

    I've had time to review the files you sent. Basically, all the problems you're having come down to malformed HTML code. Some examples from your 'contact' page example:

    Code:
        <link href="style1.css" rel="stylesheet" type="text/css" /><!but      this not exactly like the book, page78m where the  head seems to be closed differently-->
    Comments must begin with <!--, not just <!.

    Code:
      <head>
        <title>Contact Us at Bilingual-XWord</title>
        ...
      <head>
    You must end a <head> tag with a </head> tag, not another <head> tag.

    Code:
    <div id="bodycontent">
    
      <body>
    You cannot place a <div> outside the <body> of your document. All of your page content must be contained between <body> and </body>.

    Code:
    <div id="header">
        <h1>Crossword Puzzles for English-speakers learning Spanish
        <h1> (AND vice versa)
    </div> <!--end of header div -->
    Each <h1> tag should end with a matching </h1> tag. In this case, you have two opening <h1> tags, and no </h1> tags at all. Did you mean to create two level-one headings here, or just one? Did you mean the text "(AND vice versa)" to be a part of the same heading as the preceding text?

    Code:
      <div ID="more information">
    In XHTML, all tags and attributes should be in lowercase, so ID should be id. Additionally, ID values cannot contain spaces.

    Code:
     <p> <h3> To find out more, contact <a
         href="mailto: alinde@mac.com">email
         alinde@mac.com</a>.<p>
    Again, it looks like you've got a second opening <p> tag where I believe you meant to have a closing </p> tag. In this case, however, you've also started a level-three heading (<h3>) inside the paragraph (<p>). Not only can you not have headings inside paragraphs, but you've neglected to mark where the heading should end with a </h3> tag.

    Now, getting back to your question of why your CSS styles are not applying to this page, in this case your CSS sets the color of text inside of paragraphs. In the last snippet of code above, you've tried to start a level 3 heading inside a paragraph. Because this is illegal, the browser is forced to assume that the paragraph ends immediately before the <h3> tag, and consequently there is no actual paragraph text for your CSS to apply a color to.

    My advice to you at this point is to take a step back from CSS and focus on getting your HTML code right first. Make use of the W3C's HTML validator to correct all the errors in your HTML code, and then try applying CSS styles to it. You should find things work much better that way.
    Kevin Yank
    CTO, sitepoint.com
    I wrote: Simply JavaScript | BYO PHP/MySQL | Tech Times | Editize
    Baby’s got back—a hard back, that is: The Ultimate CSS Reference


Bookmarks

Posting Permissions

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