HTML web page help

[Edward01]

Well I have updated various things, thank for the div help.

Any help on how to get the button which pops up and shows the specs to look the right size?

No problem!! Is this part of a Uni Course? Did they tell you to use tables for layout or are you self taught?


edit//

And how do you get an imagemap to validate as xhtml strict?

post up your code and i'm sure one of us can help you

 

[RobH]

And how do you get an imagemap to validate as xhtml strict?

Nothing special, it should validate if your code is correct. Do you have an example of the errors you are getting?

 

[thepeganator]

This is the page that wont validate.

Error is:

1. 
   Line 33, Column 25: document type does not allow element "map" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag <map name="mat" id="mat"> ✉
   The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
   One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>")

 

[RobH]

Your map is in the wrong place, move it from the start of the body to just before the image:

<td rowspan="2">
	<map name="mat" id="mat">
		<area shape="rect" coords="0, 0, 147, 300" href="mat/mat.html" alt="mat" />
		<area shape="rect" coords="147, 0, 300, 225" href="notingroup.html" alt="chris" />
	</map>
	<img src="mat.jpg" alt="A picture of Mat should appear here" width="300" height="225" usemap="#mat" />
</td>

 

[Mattus]

Doesn't really work in Firefox at all, because there are too many borders and heights specified as percentages, so all the boxes end up overlapping each other when the text overflows. The fact that a site validates doesn't always mean that it looks OK to a human viewer.

Lose the image at the top and write the title as text. It looks a bit nasty because of the JPEG compression, and it won't be indexable by search engines.

Get some headings and paragraphs into that code instead of putting everything into <div>s.

Use more than one font and make the spacing a little better by getting rid of the <br>s and organising it into paragraphs.

Lose the animated GIF llamas, they're very 1997. Image maps scream 1997 to me as well.

And are you really going to submit a piece of Uni coursework that comprises lots of pictures of you drunk and links to threads in GD?

 

[thepeganator]

Part of the specification is to have an animated gif in there at some point :/
Any other suggestions to get one in there is much appreciated.

And yes I am, the lecturer is pretty cool and I'm following the specifications, it's a page about me.

Sorted the divs out.

 

[thepeganator]

Updated a lot, any help welcomed.

 

[unwashed potato!]

Part of the specification is to have an animated gif in there at some point :/
.

gosh what on earth are they getting you to do that for? seems so basic and you're at uni?

the answer unfortunately: this

 

[Mattus]

It's not just that it's basic, it's that it has practically nothing to do with modern web design...! I'd be asking the lecturer why you're learning techniques that aren't relevant any more.

 

[thepeganator]

I know how to make an animated gif

No idea why, I've done more outside the course, but want to follow what they said to the letter (adding more of course).

 

[Edward01]

add this:


cursor: pointer;


to your 'click me for specs' css, makes it look more like a link