Dear Forum,

This is my first post to site design/review. I am not a professional web designer/master but I have had some training in web design (HTML & CSS). Up to about 2 to 3 years ago, I knew nothing about computers and then I acquired Scottish Vocational Qualifications (Level 2 - Basic) in Word, Excel and Access, along with the European Computer Driving Licence. The web design course was a follow up. On the web course, each student had to have a personal project and I decided to use the web to express my feelings and experiences as a carer for my elderly mother. My site sits at www.geocities.com/excarex/index.html. It is plain and simple, and to many people it will no doubt appear bland, but its reason for existing is clearly stated on the home page. A lot of sites are far more colourful but the creators use web creation programmes. Excarex is hand coded and at the outset I did not have any experience in graphics creation.

There are seven main pages with one page having twelve sub-pages. I hope that someone can advise me on the necessary coding required to make the following changes to the navigation, which would facilitate easier access to current sub-pages and aid the addition of sub-pages to other main pages.

At present the CNA page (carnat.html) has twelve sub-pages. I want to be able to mouseover the CNA page name button and three rows of four buttons each ie the sub-pages carnat 1-12 will slide into view. Each of those will then be mouseovers, which will activate the sub-pages as new windows with the main letter jumping to the corresponding point. The sub-pages will be as at present but opposite the present “main letter” button there will have to be a “CNA Top” button which would close the new window but return the main letter to the top.

I would also like to have on either side of each window a group of four buttons sitting about halfway down, consisting of Top; Page Up; Page Down; End which would always return to that position, when vertical scrolling. These new buttons would have added to them onClick events, as the present buttons also need to make the buttons act like buttons when pressed. This would necessitate that all pages content between the top and bottom navigation bars will have to go into a table with the first row’s first and last cells rowspan=”100%”. The width of the first and last cells would be set to the width of the buttons in pixels, but I have my doubts as to whether W3C will find fault with that as they are at present finding fault with some attributes of my elements. I am undecided as to whether there should be a graphic which would be under a repeat-y in those cells, and the sliding four-button bar as a separate item from the table contents, or that just the sliding bar should be the cells’ contents. I am also thinking in terms of increased white space on each page. I don’t really want to change the basic design. I created the site with the specific intent of saying something. I feel a more flashy site design would, detract from it.

I feel sure that the above will require JavaScript, and I would appreciate any advice with regard to where I would find the necessary code. There are so many script sites, and I could spend ages looking on the web. I cannot afford my own computer and consequently have to use my local library, where the maximum booking time is three hours. I believe that one should be able to open an empty notepad and create the JavaScript from scratch, but I don’t know enough, and I accept the words of the author David Flanagan in his book “JavaScript: The Definitive Guide, 4th Edition” that JavaScript is not the simple scripting language that it is sometimes made out to be, and can be equal to and greater in complexity than the accepted languages.

I would also appreciate answers to the following questions:
s
1. In submitting my index page to W3C HTML validation, I find that their explanations seem a bit difficult to understand. My understanding is that where a file is linked to a stylesheet, then the DTD has to be strict. Where is my error?
2. Why will W3C not allow the anchor name for return to the page top to be immediately after the opening body element?
3. Why will they not allow the br before and after the hr above and below the navigational buttons? I don’t want the loss of vertical space here. I have a 1x1 pixel transparent gif saved and I suppose that I could put that in with width 100% and adjust the height accordingly, but I have read that that is said to be bad practice.

My stylesheet passes CSS validation, but again they have me puzzled when they tell me that I have no colour to my background-colour in the declaration for the body selector. What do they mean?

I recently posted my first two letters into the September archives in the topic “How Much Text Is Too Much Text?

I would have put this post into site design, but it is closed to new posts.

I trust that someone among you can help.

My regards,

Iain R Stewart.


<Mod edit to comply with Site Review Rule #1 - Syren>

Hi and Welcome Iain,
You are asking for way too much in one post.
Some of the things I noticed was The "Name" of the image for return to the top is img name="top". This should be renamed because it is in conflict with the function it’s called to do, which is find <a name=”top”>.
If you need to place an anchor in your page, it should be placed in something that has placement. I would probably place the “top anchor” in the same line as <h1><a name=”top”></a>A Carer's Experience of Medical Neglect</h1>.
I would also get rid of the scripts above and below your HTML tags. When I test this in my editor I get TONS of errors with these.
Have you tried to put your <hr> inside a <div class=””> tags? I think their postion should be defined rather than floating between “DIVs”. You then could add your “trans.gif” to control exact spacing.
I would suggest replacing the mouseover button setup you have because it’s very slow. The one your using works good for colors but not so well with pictures. You might try putting three button pictures (normal, hover, active) on ONE picture (with a small space between each) and using this display offset CSS. This is fast, because all buttons are loaded at the same time on ONE picture. NOTE: this works well with plain colors, button pictures need finer placement, but it can be done, in fact, I found a slight offset gives the illusion of movement. I used this on my site.
}
#menu a {
display : block;
border : 1px solid;
border-color : black;
width : 107px;
margin : 0 0;
padding : 8px 0 6px 0;
font : normal 12px/1 Times New Roman;
text-align : center;
color : #000000;
background : url("image.jpg") no-repeat 0% 0%;
text-decoration : none;
}
#menu a:hover {
background-position : 0 -72px;
font : normal 12px/1 Times New Roman;
color : #FFFFFF;
}
#menu a:active {
background : url("image.jpg") no-repeat 0 -150px;
color : #0033FF;
}
Play with the background-position : 0 -72px and 0 -150px until you get things to line up.

Maybe,
<body>
<a name="top"></a>
<h1>A Carer's Experience of Medical Neglect</h1>
Should be,
<body bgcolor="#45A8E4">
<h1><a name="top"></a>A Carer's Experience of Medical Neglect</h1>

Since your already using “div class” and CSS, you can add buttons or anything to any location you wish to on your page. If your using absolute then “absolutely do it”.
position : absolute;
left : 16px;
top : 47px;
z-index : 15;
If your using % then place them the same way you’ve defined your other parts.
position : relative;
left : 10%;
top : 20%;
z-index : 15;
I also noticed, most of your heights and widths were not defined.
WIDTH="468" HEIGHT="60" title="link to www.nhs-exposed.com"
This value must be in pixels.
I can’t suggest a menu tree that will work for you. If you really want one I’m sure you’ll find it.
Well, I’ve spent enough time on this.
I wish you the best on your revamp.
Drummin

__________________
Hello everyone! Newbie. Self-taught. Loves writing web-code.

Hi Drummin,

Thanks for your reply. I would have thought that the image name/id exists only to indicate to the browser the image that is to be altered/referred to. The link to the top has never shown any tendency to not work. Your suggestion that the anchor should be in a placement such as within the <hi> would have done the trick as far as w3c no longer considering it an error of some kind. I used their first example of the stated missing tag and have placed the anchor within “p” tags, and it is no longer marked as an error.
It is now immediately after the opening body tag as

<a name=”top”></a></p>.
It seems strange that w3c should only consider it to have validity in that positioning when the anchor tag is a totally valid html element in its own right, and does not get that validity by having to be nested.

The scripts above and below my html are those of geocities and I cannot remove them. Both w3c and www.netmechanic.com find code errors in them. I wonder if they are a contributory cause of the slow mouse over action. I know that my “pre-load images” JavaScript in the head is correct, and that the embedded JavaScript in the nav bar html is also correct. I intend checking with the 24hourHTMLcafe.com site to see if there are any clues. It was from a sams book that I got the code.

I will have to put the
tags nested within

tags for w3c not to find an error.

I guess I will have to do a lot of experimenting with the navigation set-up. Your reply reminded me that I was using “div” and CSS and I actually have CSS2 in one file (carnat5.html). I had forgotten that it allows me to place anything anywhere I like using the span tag and absolutely positioned within the hidden box.

Back to the drawing board

Iain R Stewart.