Help using JS with CSS and HTML - Drop down Menu for website

Hi, I changed it and lost half the information on the page and the menu still didn’t work :frowning: I’ve changed it back and removed the additional <html> tag. Anything else I can try? I so appreciate all your input. Thanks.

Shona

Yeah, the code I gave above is what you should be using, so there is still work to do here. At the moment you have this:

<!DOCTYPE <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

which is throwing IE into the pits of hell. At least get rid of the duplication at the front.

Ideally, re-instate that code I gave above and let us see what happens on the page, so we can sort out what’s wrong with it. No point sweeping problems under the carpet. :slight_smile:

Hi the menu works but the page has gone bananas again. Please check it out and I’ll hover here! Thanks.

Shona :slight_smile:

I know it looks terrible now, but this is progress. You are now seeing what your code is really like, which is a good opportunity to fix it up. The first thing to do is remove the height settings on your tables, such as here:

<table border="0" width="100%" [COLOR="#FF0000"]height="20%"[/COLOR] cellspacing="0">

That won’t necessarily make anything loo better at this stage, but it’s a step in the right direction. A handy service that helps to iron out coding errors is the HTML Validator. Have a look at the results here:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.scottishgreatdaneclub.co.uk%2F&charset=(detect+automatically)&doctype=Inline&group=0

See if you can fix the errors there. If you don’t understand what’s being said, just ask.

There is also an equivalent CSS Validator, but let’s concentrate on the HTML first. :slight_smile:

All I can say is “aw gawd” I’d no idea it was so bad. Anyway I’ve narrowed it down to 6 errors but not sure on how to fix them ?(index.html page only - once I get that correct I’ll go through the entire site). The good news is the menu works LOL. I might have to lie down in a dark room after today! Can you have a wee look please? Thank you :slight_smile:

Yep, sure.

The first one is asking you to add this here:

<style [COLOR="#FF0000"]type="text/css"[/COLOR] media="all">

The second is telling you to remove the semicolon here (on line 125 in your code):

<img src="http://homepages.plus.net/cgi-bin/count_dyno? bridgethyme_ss"[COLOR="#FF0000"];[/COLOR]>

The third is telling you that you aren’t allowed to have a heading inside a <ul>. So instead of this:

<ul class="linksbox">
    <h4>Quick Links & Forms</h4>

try this:

<h4>Quick Links & Forms</h4>
<ul class="linksbox">

The fourth is saying remove the height attribute on the table, as it’s not recognized in that position in HTML:

<table border="0" width="100%" [COLOR="#FF0000"]height="30px"[/COLOR] div class="footer" cellspacing="0">

Generally, it’s better not to use height setting in HTML/CSS, but if you really need it, you can put it on the table cells instead.

The last error is pointing out that the word “div” doesn’t belong here, so just remove it:

<table border="0" width="100%" height="30px" [COLOR="#FF0000"]div[/COLOR] class="footer" cellspacing="0">

Hope that all makes sense. :slight_smile:

Hi did originally removed “height”, but the page went bananas. The reason it was there is that I read if I specified width and height in % then it would it the site would look the consistent regardless of the size of screen it was viewed from? I tried putting the height into the row, as it used to be in the data cell.

I did try adding type=“text/css” to the style attribute but it still threw back an error.

I removed the ; from: <img src=“http://homepages.plus.net/cgi-bin/count_dyno? bridgethyme_ss”;> and it still reported an error there. I checked with it ISP as they provided the CGI for the hit counter and I’ve copied that line correctly. So I may have to live with that one.

The validator also specified it didn’t like the <head> tag in its currently position, any suggestion or is it ok as it is? Thanks for looking at this. I’m just about to start work on it again. Then I’ll progress through the rest of the pages and sort those. Well that has certainly been a lesson learned for me.

Grateful thanks to you.
Puzzle1 (Shona)

Hi,
New plan - start from scratch I think. I got information from www.w3schools.com which is full of brilliant tutorials and I just put things together until it all worked. I restored the website to what it was, full of errors! I’m guessing it’s not prudent to use tables in a website? I was put off using frames due to different browsers compatibility. The website I did for the club was and is voluntary. Due to cost it wasn’t and isn’t feasible to get a company in a we are just a small dog club. I also host the site free of charge which means the club has absolutely no outlay for the site.

So the big question - where should I start? JS pickled my brain completely, so I tried to keep it pure HTML and CSS. I will work offline leaving the current site in tact till I get it right. Should I use frames or is there a better way. I really appreciate all your input and now I know why programmers are worth their weight in gold :slight_smile:

Puzzle1

Nah, forget you ever heard of frames. They are even more outdated than using tables. It’s hard to describe in a few words what up-to-date web design involves, but yes, tables for layout are way out of date (and horrible to work with, anyhow, so just as well). It would be worth investing in a book or online course to get the foundations of all this. HTML and CSS are the best thing to learn first, and you rarely if ever need JS. (It’s just nice to have as an extra.) There are some good books and online courses for learning HTML and CSS. SitePoint itself has some good books, and their sister site Learnable has some video courses too.

Another thing you can do is install a content management system like WordPress, which comes with read-made themes. I don’t like these, but they are pretty popular. Or you can get a free site through services like Weebly, which allow you do do a bit of styling withot having to learn web design. ll the same, though, you have already gotten into this area, so it would be better to learn how to do it all yourself.