JavaScript + CSS: Information on link hover

[skip0110]

I have spent an hour and a half struggling to get this entrance page the way it looks.
http://www.geocities.com/skip0110/ (geocities host is temporary only)

Now I have 2 questions.

1) Is my CSS OK looking? I am doing this for the first time, and I think I am doing it OK, but if something is messed, let me know (or if the general design is flawed...but I am pretty set on this design).

2) I want to have a description for each link that pops up below the nav bar as you hover over the link. This will require JavaScript, I think. (The host I will use will not have PHP, so no PHP solutions please.) Could someone point me in the right direction--is JavaScript the best, most standards-compliant way to do this?

EDIT: Well, as you can see, I figured number (2) out. Still dont know if I did it the best way, though.

 

[Sage]

Is there supposed to be anything in the middle? That little black box looks lonely.

As for code…

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

UTF-8 is infinitely more flexible (ISO-8859 is the Latin subset of UTF-8). This is how you'd insert a UTF-8 character set into a document:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

And here's how I'd simplify your CSS:

<style type="text/css">
	html {
		height: 100%;
		background: #ccc;
	}
	body	{
		height: 100%;
		background: #ccc url(blocks.gif) center no-repeat;
		overflow: hidden;
		margin: 0;
		font: bold 200%/2em sans-serif;
		color: #666;
	}
	#content {
		position: absolute;
		top: 33%;
		left: 50%;
		height: 2em;
		margin-top: -1em;
		width: 100%;
		margin-left: -50%;
		text-align: center;
	}
	#left, #right {
		position:absolute
		bottom: 1em;
		margin: 1em;
		font-size: 80%;
	}
	#right	{
		right: 1em;
	}
	#works {
		left: 1em;
	}
	#tooltip {
		position:absolute;
		top: 75%;
		left: 50%;
		height: 2em;
		margin-top: -1em;
		width: 100%;
		margin-left: -50%;
		line-height: 1em;
		text-align: center;
		font-size: 80%;
	}
	#nav {
		position:absolute;
		top: 67%;
		left: 50%;
		padding: 0;
		list-style-type: none;
		height: 2em;
		margin-top: -1em;
		width: 100%;
		margin-left: -50%;
		text-align: center
	}
	#nav li {
		display: inline;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	#nav li a {
		text-decoration: none;
		padding-left: 2em;
		padding-right: 2em;
		border: 1px solid white;
		color: #06c;
	}
	#nav li a:hover {
		background: #ccf;
		border: 1px solid #06c;
		font-style: italic
	}
</style>

I probably missed a few things, but it's a tad cleaner.

The one thing that concerns me is that you're using a span for the tooltip thingie, but you're treating it as a block-level element… you meant to use a div, no?

Also, can you put the script within the head section instead, or must it be embedded in the body?

Lastly, that Javascript effect can be created using CSS, believe it or not. Just look at Eric Meyer's popup demo.

 

[skip0110]

Thank you, Sage. Now my CSS is nice and sqeaky clean, thanks to you! For some reason I needed the font: information in every group, but thats no biggie.

And I was able to adapt that tooltip effect in the page you linked to my page, and it works beautifully! (It'll degrade better on older browsers, too!) I still need to work on the graphics, you are right.

 

[Sage]

You're welcome. Always glad to lend a hand (if I'm not furiously working on homework, of course).

 

[Matrixhasu77]

And I was able to adapt that tooltip effect in the page you linked to my page, and it works beautifully! (It'll degrade better on older browsers, too!) I still need to work on the graphics, you are right.

Off-Topic but... Your overstate offsets the whole menu a few pixels. As for fixing it, I haven't a clue.

It looks very nice though.