DHTML Menus

[Matrixhasu77]

Ok, I have been playing around with DHTML to create a menu for my website(Actually, I found a program that does it for me). My problem is, I cannot figure out how to position the menu so that it appears under my Welcome graphic(placeholder until I can create a logo). If I attach my source code, can someone look at it and try to figure out how to get it located under my welcome graphic?

Also, will someone tell me if the menu colors are ok or should be changed to another color? Eventually I plan to change the overall look of the website. This is just the first step.

I haven't decided whether I want to use a vertical or horizontal menu yet. Most likely it will be horizontal as that will make the page look better.

Please bear in mind that the menu code is extremely large. I'm sorry about that. I've never used DHTML in a website before.

 

[ALPHA]

I'll have a look but I am useless at code, send a PM to Sage or GG and get them over here.

Anyway for a start get a design, and the blue rollover is a bit too harsh on me eyes!

 

[ALPHA]

Wait I think I found it -

In lines 63 and 64 of the code you can insert pixel distances for x and y offsets.

 

[Solid Fro]

You menu has to be on a lower Z-Index than your welcome graphic. Kind of like layers in Photoshop.

Menu = Z-Index 0

Welcome graphic = Z-Index 1

 

[ALPHA]

Oh I thought he meant positions not depths, I am fool I misread.

 

[Matrixhasu77]

Originally posted by ALPHA
Wait I think I found it -

In lines 63 and 64 of the code you can insert pixel distances for x and y offsets.

Well, I tried your suggestion and that seems to move it. I have no clue what Viper Zero means though. The menu design is just a basic idea right now. I'm probably going to change the colors of it.

 

[Sage]

To be honest, I really don't want to look through all that code... it looks scary. Of course, my personal recommendation is to dump it and go for semantically correct list items, though judging from your source code, it doesn't look like you particularly care about XHTML validity.

As far as design goes... to be brutally honest, I don't really care for the tiling background image (I think a simple black would do), and maybe remove the white background around the logo. The logo itself is beautiful though. 👍 Check your PMs in a few minutes.

Also, there seems to be a problem with your line spacing... (apologies for the wide image)

 

[Matrixhasu77]

Originally posted by Sage
To be honest, I really don't want to look through all that code... it looks scary. Of course, my personal recommendation is to dump it and go for semantically correct list items, though judging from your source code, it doesn't look like you particularly care about XHTML validity.

As far as design goes... to be brutally honest, I don't really care for the tiling background image (I think a simple black would do), and maybe remove the white background around the logo. The logo itself is beautiful though. 👍 Check your PMs in a few minutes.

Also, there seems to be a problem with your line spacing... (apologies for the wide image)

Actually, I do care about XHTML validity. The page just looks like a mess because I am trying to reorganize it so the source code is more streamlined, not so full of tables like the current version, AND follows XHTML rules. As to why the line spacing is off, I have no idea other than the fact that I don't know how to make websites that are compatible with browsers other than IE.

As for the logo, I designed it almost two years ago or more and cannot remember how I did it very well. I also want something that stands out more than a generic "Welcome" logo. I have made something but it isn't exactly what I would call beautiful.

The menu I had before was a list(seen here on the left of my site, but did not use the list command of HTML. I am unsure as to whether or not I want to even incorporate a DHTML menu into my site.

 

[Shannon]

Originally posted by Matrixhasu77
I have no clue what Viper Zero means though.

Z-Index's are like, as VZ said, layers in Photoshop. Example: You might have a car on one layer, and then on the layer above that you have a woman. As the woman layer is above the car layer, it would appear as though the woman is infront of the car.

Z-Index's are the same as layers in an image, only for websites. If you give the welcome graphic a higher Z-Index than the navigation menu, it would appear that the graphic is ontop of the nav menu.

Understand?

Actually, I do care about XHTML validity.

I don't see a XHTML DOCTYPE though... Delete the first <html> tag and insert the following.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 

[Sage]

XHTML 1.0 transitional? Psssh... go all out with XHTML 1.1 strict!

(It's actually not that hard though... 1.1 isn't much different from 1.0, and getting a page to validate to 1.0 strict isn't difficult.)

 

[Shannon]

Originally posted by Sage
XHTML 1.0 transitional? Psssh... go all out with XHTML 1.1 strict!

(It's actually not that hard though... 1.1 isn't much different from 1.0, and getting a page to validate to 1.0 strict isn't difficult.)

Meh. I just copied that from a new XHTML document in Dreamweaver.

 

[Sage]

XHTML 1.1 strict documents need the following junk (you wouldn't believe how many hours it took me to find the DOCTYPE for 1.1):

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

In addition, the following should be in the head:

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

That'll actually make code look funky in DW's code view (it'll use Monaco instead of the system font), but oh well. DW has too many quirks to get mad at.

 

[Shannon]

Originally posted by Sage
XHTML 1.1 strict documents need the following junk (you wouldn't believe how many hours it took me to find the DOCTYPE for 1.1):

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

In addition, the following should be in the head:

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

That'll actually make code look funky in DW's code view (it'll use Monaco instead of the system font), but oh well. DW has too many quirks to get mad at.

I might consider moving from Transition 1.0 to Strict 1.1 now.

 

[Sage]

One side-benefit of moving to strict is that it'll insure that IE is not in quirks mode, so you don't have to apply any box model hacks. Makes life so much easier.

 

[Shannon]

Originally posted by Sage
One side-benefit of moving to strict is that it'll insure that IE is not in quirks mode, so you don't have to apply any box model hacks. Makes life so much easier.

👍!

 

[Matrixhasu77]

Originally posted by Shannon

I don't see a XHTML DOCTYPE though... Delete the first <html> tag and insert the following.

That's probably because that uploaded version isn't the most recent version of the page. This is the most current.

The new version

All the links work at this point, but all navigation links still point to the old version. I am working on changing the other pages though now that I have finally gotten the menu to look the way I want it. None of this would even be possible if Sage had not helped me with the CSS, showed me what XHTML can do, and provided me with a link to this page that explains how to use CSS to format lists.

 

[Sage]

Aw, shucks! You'd have to make the change someday (when browsers finally go to full-on valid support in whatever number of years), so I figured it'd be nice to give ya a boost.