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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Followed tutorial & am lost

    Hi, everybody,

    I'm totally new to CSS and right now just as lost.

    I followed this youtube tutorial:
    http://www.youtube.com/watch?v=H3KESBQTD8k

    and as far as I am aware, my style sheet and my html index look just like they look in the video. Still, I don't get the desired output. The header works, and the leftnav is colored, but apart from that, nothing happens.

    my style sheet:

    #container {

    width: 900px;

    }

    #header {

    width: 900px;
    height: 100px;
    background-image: url(Schweiz.png);
    border-bottom: 2px solid #000000;

    }

    #leftnav {

    float: left;
    width: 140px;
    height: 400px;
    background-color: #F8AA3C;
    border-right: 1xp dashed #694717;

    #rightnav {

    float: right;
    width: 140px;
    height: 400px;
    background-color: #F8AA3C;
    border-left: 1xp dashed #694717;

    #body {

    width: 620px;

    }

    #footer {

    clear: both;
    background-color: #D1C0A7;

    }

    my html index:

    <html>
    <head>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>

    <div id="container">

    <div id="header">A</div>

    <div id="leftnav">B</div>

    <div id="rightnav">E</div>

    <div id="body">C</div>

    <div id="footer">D</div>

    </div>

    </body>
    </html>

    I would be overjoyed if somebody could help me out here. I use firefox, btw, if that helps.

    Thanks loads,
    C.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 725 Times in 719 Posts
    You are missing the closing bracket on these two css statements:

    Code:
    #leftnav {
    
    float: left;
    width: 140px;
    height: 400px;
    background-color: #F8AA3C;
    border-right: 1xp dashed #694717;
    
    #rightnav {
    
    float: right;
    width: 140px;
    height: 400px;
    background-color: #F8AA3C;
    border-left: 1xp dashed #694717;
    ..and xp should be px. The w3c css validator will help you find these issues, as will the html validator for your markup.

  • Users who have thanked SB65 for this post:

    noob700 (10-25-2010)

  • #3
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Fairly dumb of me.

    Thanks a lot, also for the helpful link!

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 725 Times in 719 Posts
    You're welcome. I might add that that tutorial is deficient in that there is no doctype specified on the page - without this IE in particular is quite likely to misbehave. You should have a doctype at the very top of your html:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    
    <div id="container">
    
    <div id="header">A</div>
    
    <div id="leftnav">B</div>
    
    <div id="rightnav">E</div>
    
    <div id="body">C</div>
    
    <div id="footer">D</div>
    
    </div>
    
    </body>
    </html>

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Be careful of youtube videos. As SB said about the doctype, some of those videos are either incomplete or just flat out wrong. You should go to some respected coding sites for good tutotials such as w3schools or w3c.org

    There are also some very good books out there relatively inexpensive that has step by step tutorials along with downloadable excercise files to work through. HTML and XHTML New perspectives 5th edition is a very good book.


  •  

    Tags for this Thread

    Posting Permissions

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