Grow your CSS skills. Land your dream job.

Code trouble with the Awesome Website Tutorial

  • # March 5, 2009 at 10:56 pm

    I can’t seem to figure out what I’m doing wrong. I completed this tutorial correctly until the last 10 minutes where everything started to look really wierd. I’ve attached an image of what I get now. I am just getting started with coding a website, and have limited knowledge on the subject. I’ve also copy and pasted the index and the CSS. Thanks for all of the help!

    Index.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link href="untitled.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

    <div id="page-wrap">

    <ul id= "nav">
    <li><a href="#">Project</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Download</a></li>
    <li><a href="#">History</a></li>
    </ul>

    <div id="main-content">

    <div id="left-col">

    <div id="quick-jumps">
    <h3>Quick Jumps</h3>
    <p><a href="#"><span>&bull;</span> See the latest press release. </a></p>
    <p><a href="#"><span>&bull;</span> What Others are saying about’the Project’. </a></p>
    </div>

    <h1>Expect record spending for political in 2008</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies odio id arcu. Quisque convallis, nisl a egestas dapibus, nulla magna pellentesque neque, eu vehicula nulla mauris eu neque. Nulla hendrerit mattis ante. Vestibulum tristique est sit amet quam. Cras risus ipsum, luctus a, auctor quis, sagittis id, ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris ac ligula vitae risus rutrum varius. Integer fringilla congue quam. Nunc vel quam id risus dapibus lobortis. Aliquam turpis erat, porta non, venenatis et, venenatis sed, arcu. Suspendisse potenti. Proin nec justo. Fusce quis lacus. Curabitur massa. Ut mattis metus nec augue.<p>

    <p>Donec vestibulum fermentum ante. Quisque id purus nec sapien interdum consectetur. Nulla commodo tristique libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam a nulla quis turpis ornare cursus. In sit amet lorem. Integer venenatis. Vestibulum dolor. Pellentesque libero sapien, elementum a, consequat vitae, molestie sed, magna. Nullam id augue. Nulla viverra ligula. Suspendisse lacinia purus eu lacus tempus pulvinar.<p>

    </div> <!– END left-col –>

    <div id="right-col">
    <h2> WISCONSIN ADVERTISING PROJECT TO ANALYZE 2008 POLITICAL ADVERTISING</h2>

    <p> With a proven track record of working with the media, the Wisconsin Advertising Project will again shinelight on what remains the most expensive, high-profile aspect ofmodern political campaigns.</p>

    <p><a href="#"> Learn more </a/</p>

    <img src="Images/tv.jpg" alt="tv" />
    </div>

    <div class="clear"></div>

    </div> <!– END main-content –>

    </div> <!– END page-wrap –>
    <div id="footer">
    <p>&copy;2008 CSS-Tricks.com<p>
    </div>

    </body>
    </html>

    CSS

    * {
    margin: 0;
    padding: 0;
    }

    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 62.5%;
    background: url(images/body-bg.png) repeat-x top #f5ecd4;
    }

    p,li {
    font-size: 1.2em;
    line-height:1.4m;
    margin-bottom: 0.8m;
    }

    a { color: #540000; text-decoration: none; }
    a: hover, a:active { text-decoration: underline; }

    h1 { font-size: 3.0em; margin-bottom: 0.8em;}
    h2 { font-size: 2.0em; text-transform: uppercase; margin-bottom: 0.8em; }
    h3 {
    font-size: 1.6em;
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: 2px;
    background: #540000;
    color: #5e0d04;
    padding: 5px;
    margin-bottom: 0.5em;

    .clear {clear: both; }

    div#page-wrap {
    width: 800px;
    margin: 0 auto;
    }

    ul#nav {
    height: 236px;
    background:url(Images/header-bg.jpg) no-repeat;
    list-style: none;
    padding-left: 125px;
    }
    ul#nav li a {
    display: block;
    width: 130px;
    float: left;
    margin-top: 168px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    }
    ul#nav li a:hover, ul3nav li a:active {
    color: yellow;
    }

    div#main-content {
    padding-bottom: 50px;
    }
    div#main-content div#left-col {
    float: left;
    width: 510px;
    }
    div#main-content div#left-col div#quick-jumps {
    width: 200px;
    float: left;
    margin-right: 15px;
    }
    div#main-content div#left-col div#quick-jumps p {
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    }
    div#main-content div#left-col div#quick-jumps p span {
    color: # e9bc3d;
    }
    div#main-content div#left-col div#quick-jumps a {
    color: black;

    div#main-content div#right-col {
    float: right;
    width: 260px;
    border-top: 8px solid #540000;
    padding-top: 15px;
    }
    div#main-content div#right-col p {
    font-size: 90%;
    }

    div#footer {
    background: #560000;
    color: white;
    padding: 10px 0 10px 0;
    text-transform: uppercase;
    border-top: 2px solid red;
    text-align: center;
    }

    # March 6, 2009 at 3:23 am

    congratulations on making a page………..

    but what is wrong? I think it looks fine! colours match a bit, but that’s what you wanted right? so you achieved what you set out.

    or I really don’t know what is wrong cause you have not explained yourself fully.

    your question is like me asking what number am I thinking?

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".