SparkleBerries
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Downloads
Gallery
Store
Posts posted by SparkleBerries
-
-
I have the exact same problem. I have checked that the file name matches exactly, and have tried swapping the code between the <head></head> tags and <body></body> tags.
My coding is as follows..
PractiseHTML.html:
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<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">
<title>My Practice HTML Page</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="navigation">
<h2>The Main navigation</h2>;
</div>
<div id="centerDoc">
<h1>The Main Heading</h1>
<p>
Go to the Web Designer's 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:'.
Follow the instructions there and create your basic HTML
page - and do it now!
</p>
</div>
</body>
</html>
And in the myCss.css file:
/* 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 a: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;
z-index: 10;
width: 210px;
height: 600px;
margin: 0;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
#centerDoc {
position: absolute;
z-index: 15;
padding: 0 0 20px 20px; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
Please help!
CSS Tutorial
in Beginners Web Design
Posted
Ksheila - I'm not sure if you've worked out what went wrong yet? I've just shuffled my code around a bit and managed to get very similar to the example posted, although my text seems to be a slight bit smaller, but in the same proportions. I needed to change my .html file only.
If it helps you below is my new coding..
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<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">
<title>My Practice HTML Page</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="navigation">
<h1>The Main Heading</h1>
<p>Go to the Web Designer's 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:'.
Follow the instructions there and create your basic HTML
page - and do it now!
</p>
</div>
<div id="centerDoc">
<h2>The Main navigation</h2>
</div>
</body>
</html>
I have simply swapped <h1> and <h2>, and taken <p> with <h1>.. if that makes sense? Anyway, I hope that helps you
Oh, and as for the border and colours.. I don't think with the code we have been given thus far, that any parameters in regards to these have been set yet. I may be completely wrong (I only started learning ANY of this today, so I'm basically making it up as I go), but you did say "Any help would be much appreciated.." ;D