I am very much a novice and have been working my way through the title 'Build Your Own Website the Right Way (2nd edition 2009). I worked my way through Chapter 4 with everything appearing as it should be and then I found that the links/navigation text and box stopped appearing on the home page and the contact us page, but appears on the about us page. Everything else appears as it should. I have gone over the html pages which all have the copy required and also checked the css copy which seems fine. Can anyone tell me what I have done?! I would be most grateful as I dont want to continue further until I resolve this problem. I am using Notetab Light and firefox. Thanks.
No problem, make the browser work for you, not you work for the browser there is no point in going crossed-eyed… If a validator can track the syntax errors faster in most cases even though the ‘error messages’ can sometimes be a little misleading as to where the “error” actually occurs.
Tarn, welcome to SitePoint. We ALL wake up with code swirling around our heads sometimes…
You can also validate your code at http://validator.w3.org/ ; that usually helps you find the problems, though sometimes the error messages are tough to decipher.
You have a few errors the first being: <div id=“navigation div”> I suspect you meant to write <div id=“navigation”> and on line 24 a faulty LI you missed the </li> refer to the fault:
<li><a href=“gallery.html”>Image gallery</a></li
Your navigation will then appear once you fix those 2 errors.
I suggest installing the Firefox HTML Validator: http://users.skynet.be/mgueury/mozilla/ it will help you track the errors more easily.
As stated above, really need to see the code or even better if we could view the page(s) to help you further.
Ant
As I don’t own the book I cannot tell what you are supposed to be doing or what you have done.
Do you have an example of the code you have written (that isn’t working) you can copy-and-paste it into the forum and an explanation of what it is supposed to do as opposed to what it is actually doing?
Thank you very much for taking the time to sort this out for me. It will be the first night for 2 nights that I will not wake up in the middle of the night with html etc going around in my head. Really appreciate it. Best wishes.
Here is my css page
/*
CSS for Bubble Under site
*/
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 0;
margin: 0;
}
h1, h2, h3 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
h1 {
font-size: x-large;
background-color: navy;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
}
h2 {
color: navy;
font-size: 130%;
font-weight: normal;
padding-top: 15px;
}
li {
font-size: small;
list-style-type: none;
}
p {
font-size: small;
color: navy;
}
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
}
em {
text-transform: uppercase;
}
a {
font-weight: bold;
color: black;
}
a:link {
color: black;
}
a:visited {
color: navy;
}
a:hover {
text-decoration: none;
color: white;
background-color: navy;
}
a:active {
color: aqua;
background-color: navy;
}
.fun {
color: #339999;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}
blockquote.fun {
font-style: italic;
}
#navigation {
width: 180px;
background-color: #7da5d8;
}
h2, ul {
margin-top: 15px;
}
#header {
border-top: 3px solid #7da5d8;
}
img.feature {
float: right;
margin: 10px
}
/*
This section deals with the position of items on the screen.
It uses absolute positioning - fixed x and y coordinates measured from the top-left corner of the browser's content display.
*/
#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent {
top: 6.54em;
}
#bodycontent {
left: 200px;
}
#header {
width: 100%;
}
and here is one of the missing pages
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bubble Under - The diving club for the south-west uk</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p> Diving Club for the south-west UK - let's make a splash!</p>
</div>
</div> <!-- end of header div -->
<div id="navigation div">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="gallery.html">Image gallery</a></li
</ul>
</div> <!-- end of navigation div -->
<div id="bodycontent">
<h2>Welcome to our super-dooper Scuba site</h2>
<p><img src="divers-circle.jpg" class="feature" width="200" height="162"
alt="A circle of divers practice their skills"/></p>
<p>Glad you could drop in and share some air with us! You've
passed your underwater navigation skills and successfully
found your way to the start point - or in this case, our
home page.</p>
</div> <!-- end of bodycontent div -->
</body>
</html>
I hope I have done this right?!
Thanks again for help.