SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Newbie Question

  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Newbie Question

    I am trying to learn CSS stylesheets.

    I followed instructions in a book, and typed the html things exactly as they suggested. I then took their layout and did the stylesheet, saving it as styles.css. When I finished the stylesheet is not reflected on the main html page. Somehow it not referencing the stylesheet (hope I am explaining this correctly).

    The following is what my hmtl looks like:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
    <html xmlns="http//www.w3.org/1999/xhtml">

    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Test from Book</title>
    <link rel="stylesheet" href="styles.css" type="test/css"/>
    </head>
    <body>
    <div id="container">
    <div id+"header">
    <center><img src="images/BathHills.jpg" width="1000" height="700" alt="header"/></center>
    </div> <!--end #header-->
    <div id="sidebar">
    <ul>
    <li><a href="research.html">Research</a></li>
    <li><a href="coinhunting.html">Coinhunting</a></li>
    <li><a href="Clubs.html">Clubs</a></li>
    <li><a href="Introduction.html">Introduction</a></li>
    <li><a href="equipment.html">Equipment</a></li>
    </ul>
    </div> <!--end #sidebar-->
    <div id="MainContent">
    <h2><p>My pupose in putting this site together is to share whatever information I can with other detectorists. I am often contacted by others
    asking for help with choosing a detector, suggestions for places to search, and to come and talk to their respective clubs. Hopefully a lot of that can be
    answered here. Remember please that I am a hobbyist, just like you, and often ask the same questions. I have no magic in my pouch, no psyhic powers when
    it comes to locating treasure. My one crutch, and one that very often does the trick, is my 30 years of experience.</p></h2>
    </div> <!--end #MainContent-->
    <div id="footer">
    <p>Copyright & Copy; 2010 Dick Stout. All Rights Reserved</p>
    </div> <!--end #footer-->
    </div> <!--end #container-->


    </body>
    </html>
    ...................................................................................................

    The following is my stylesheet.

    #container {
    width: 80%;
    background-color: #EBEBEB;
    margin: 0 auto;
    padding: 0:
    text-align: left;
    }

    #header {
    background-color: #91A43D;
    text-align: center;
    margin: 0;
    padding: 0;
    }

    #sidebar {
    float: left;
    width: 12em;
    }

    #MainContent {
    background-color: #FFFFFF;
    margin-left: 12em;
    padding: 10px 20px 0 1em;
    }

    #footer p {
    margin: 0;
    padding: 10px 0;
    background-color: #DDDDDD;
    text-align: center;
    font-size: .8em;
    }


    What do I need to do to get the stylesheet to work?

  2. #2
    I Love Licorice silver trophybronze trophy Datura's Avatar
    Join Date
    Aug 2006
    Location
    Florida USA
    Posts
    5,774
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This line should be:

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

    Just a typo
    Ulrike
    TUTs: 1 2 3 4 5 6 7 8 9 10

  3. #3
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Also, you have a few typos here that might screw up the entire page:

    Code HTML4Strict:
    <div id+"header">

    Which should be:

    Code HTML4Strict:
    <div id="header">

    There are plenty of other errors here, e.g. using a paragraph inside a heading (p inside of h2 is not permitted).

    Instead of using "<center>", you can center your header image like this:
    Code:
    #header {
        background-color: #91A43D;
        text-align: center;
         margin: 0 auto;
        padding: 0;
    }
    Which translates to:

    Code:
    <div id="header">
                <img src="images/BathHills.jpg" width="1000" height="700" alt="header"/>
            </div> <!--end #header-->
    The HTML entity for the copyright sign is "&copy";

    Code:
    <p>Copyright &copy; 2010 Dick Stout. All Rights Reserved</p>
    Maleika E. A. | Rockatee | Twitter | Dribbble




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
  •