Followed tutorial & am lost

noob700 · 10-25-2010, 03:29 PM

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.

SB65 · 10-25-2010, 03:34 PM

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.

noob700 · 10-25-2010, 03:38 PM

Fairly dumb of me.

Thanks a lot, also for the helpful link!

SB65 · 10-25-2010, 03:40 PM

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>

teedoff · 10-25-2010, 03:44 PM

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.