Skip navigation
Currently Being Moderated

Error following tutorial Creating your first website – Part 2: Creating the page layout

Mar 30, 2012 2:46 PM

I am trying to go through the tutorial Creating your first website – Part 2: Creating the page layout  I have gotten to the part where I am sizing the columns with the command:

#left_column, #center_column, #right_column { width: 316px; }

Simply stated ony the center column and the right column are shorted to 316px.  I attempted modifying the code to the following

#left-column {width:316pk}, # center_column, #right column {width:316px:} and it does the same thing.

 

Any help would be appreciated.

 

Earl Kurburski

 
Replies
  • Currently Being Moderated
    Mar 30, 2012 3:34 PM   in reply to Earl Kurburski

    The CSS rules all use id selectors.

     

    Thus, following the tutorial, change

     

    <div class="left_column">Content for class "left_column" Goes Here</div><br />

     

    to

     

    <div id="left_column">Content for class "left_column" Goes Here</div><br />

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 30, 2012 3:25 PM   in reply to Earl Kurburski

    Try this:

     

     

    <!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" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    #container {
    width: 968px;
    background: #FFF;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    }
    
    #main_image {
    background-image: url(../images/main.jpg);
    background-repeat: no-repeat;
    height: 376px;
    width: 968px;
    }
    
    #left_column, 
    #center_column,
    #right_column {
    float:left;
    width: 316px;
    min-height: 250px; 
    border: 1px solid silver;
    }
    
    .clearing {clear:both}
    
    </style>
    </head>
    
    <body>
    <div id="container">
    
    <div id="banner"><img src="images/banner.gif" width="968" height="100" alt="banner" /></div>
    
    <div id="main_image"></div>
    
    <div id="left_column">#left_column</div>
    
    <div id="center_column">#center_column"</div>
    
    <div id="right_column">#right_column"</div>
    
    <!--clear floats with a clearing class -->
    <hr class="clearing" />
    
    <!--end #container --></div>
    </body>
    </html>

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 30, 2012 3:40 PM   in reply to Earl Kurburski

    Earl Kurburski wrote:

     

    Now why in the world did the tutorial have me type in class instead of id?  I don't understand why Adobe would have an incorrect totorial

     

    Where do you see that in the tutorial?

     

    Steps 15, 18  and 21 plus the screenshots create ids.

     

    http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt2.htm l

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points