problem with csstutorial.net

benbob · June 8, 2012

When I started on the tutorial as offered by www.csstutorial.net, I get loads of background code displayed in the browser after I set up and copy/pasted the info in

practice.htm and mycss.css.

Is there a known bug/error in csstutorial dot net ?

Wickham · June 8, 2012

You have probably copied only the code shown on that page, without adding code in other pages of the tutorial. Your html file should look like this:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>First CSS Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="myCSS.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="navigation"> 
<h2>The Main navigation</h2>
</div> 

<div id="centerDoc">

<h1>The Main Heading</h1>

<p>Go to the Web Designers Killer Handbook home page and grab the
  practice HTML page that we will used as the starting template for this
  tutorial. You can find it under the heading: 'To create the practice HTML
  page do the following:'.</p>

<p>Follow the instructions there and create your basic HTML page
  ... and do it now!</p>
</div>
</body>
</html>

and the css file myCSS.css should be:-

/* Generic Selectors */

body {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  color: #333333;
  background-color: #F9F9F9;
}

p {
  width: 80%;
}

li {
  list-style-type: none;
  line-height: 150%;
  list-style-image: url(../images/arrowSmall.gif);
}

h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  font-weight: bold;
  color: #000000;
}

h2 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  border-bottom: 1px solid #C6EC8C;
}

/**************** Pseudo classes ****************/

a:link {
  color: #00CC00;
  text-decoration: underline;
  font-weight: bold;
}

li :link {
  color: #00CC00;
  text-decoration: none;
  font-weight: bold;
}

a:visited {
  color: #00CC00;
  text-decoration: underline;
  font-weight: bold;
}

li a:visited {
  color: #00CC00;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: rgb(0, 96, 255);
  padding-bottom: 5px;
  font-weight: bold;
  text-decoration: underline;
}

li a:hover {
  display: block;
  color: rgb(0, 96, 255);
  padding-bottom: 5px;
  font-weight: bold;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #C6EC8C;
}

a:active {
  color: rgb(255, 0, 102);
  font-weight: bold;
}

/************************* ID's *************************/

#navigation {
  position: absolute; background: #eee;
  width: 210px;
  height: 600px;
  margin: 0;
  margin-top: 50px;
  border-right: 1px solid #C6EC8C;
  font-weight: normal;
}

#centerDoc {
  position: absolute; background: #ddd;
  padding: 0 0 20px 0; /*top right bottom left*/
  margin-top: 50px;
  margin-left: 235px;
}

Note: I added temporary background colors so you can see the extent of the divs, it helps when checking page layout.

Note that browsers online are case sensitive so myCSS.css should be identical for the file name and the link in the html file; myCss.CSS is not the same as myCSS.css

Edited June 8, 2012 by Wickham

Sign In

problem with csstutorial.net

Recommended Posts

benbob

Link to comment

Share on other sites

Wickham

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Store

Support