...

View Full Version : How to create drop down menus using an image?



l Squid l
07-14-2007, 03:04 AM
Well, for my website. http://elementalstudios.freehostia.com/
I wanna create a drop down menu say if you move you mouse over Teams, the drop down menu should come. Can I Make an image? so like when you move your mouse over the image comes and also should I put the text on the image in dreamweaver or when making it photoshop put the text in? Also would this be Javascript,Css, or HTML?
Some examples are


www.verzion.com
www.xbox.com
www.bungie.com

Any help is appreciated.:thumbsup:

twodayslate
07-14-2007, 03:21 AM
http://www.alistapart.com/articles/dropdowns/
http://www.htmldog.com/articles/suckerfish/dropdowns/

l Squid l
07-14-2007, 12:48 PM
Thanks, I'll try it out. I'll post me result soon.

l Squid l
07-14-2007, 01:23 PM
I followed this, http://www.alistapart.com/articles/dropdowns/ and I came out with this
http://elementalstudios.freehostia.com/

The images of teams, videos, graphics keep repeating for some reason. I am not sure what I did wrong.

koyama
07-14-2007, 02:56 PM
I followed this, http://www.alistapart.com/articles/dropdowns/ and I came out with this
http://elementalstudios.freehostia.com/

The images of teams, videos, graphics keep repeating for some reason. I am not sure what I did wrong.
You didn't follow the instructions in that article. So you ended up with invalid HTML. You cannot nest anchor elements directly within the ul element. The validator (http://validator.w3.org/) catches such errors. Read instructions carefully. This will probably not solve the problem, but you need to fix that first.


<ul id="nav">
<li class="team"><a href="html/teams.html">Teams</a>
<ul>
<li><a href="#">Team Element Vl</a></li>

</ul>
</li>

<a class="video" href="html/videos.html">Video Link</a>

<a class="graphic" href="html/graphics.html">Graphics Link</a>

<a class="forum" href="http://z7.invisionfree.com/Elemental_Studios/index.php?">Forum Link</a>

<a class="contact" href="html/contactus.html">Contact Link</a>

l Squid l
07-14-2007, 05:11 PM
I tried correct but some things I do not understand what they are trying to tell me.

http://validator.w3.org/check?uri=http%3A%2F%2Felementalstudios.freehostia.com%2F

Please what its trying tell, explain the first then maybe I'll get the others.

twodayslate
07-14-2007, 05:24 PM
Tidy did this for me
<!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">
<head>
<meta name="keywords" content=
"halo 2,halo 3, xbox live, montages, videos, graphics, clan, teams, halo 2 help,">
<meta name="description" content=
"This Halo 2 website, has teams, clans, host montages,and graphics. Join our forum.">
<link rel="stylesheet" type="text/css" href=
"firefox-stylesheet.css"><!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE-stylesheet.css" />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Elemental Studios | Montages, Graphics, Teams and
more!</title>
<link rel="shortcut icon" type="image/ico" href="Element2.ico">
<style type="text/css">
<!--
body {
background-repeat: no-repeat;
}
.style1 {font-size: 10px}
-->
</style>
</head>
<body>
<div id="content">
<div class="gapless" align="center"></div>
<div class="left"></div>

<div class="right"></div>
<div class="leftpipe"></div>
<a class="home" href="index.html">Home Link</a>
<ul id="nav">
<li class="team"><a href="html/teams.html">Teams</a>
<ul>
<li><a href="#">Team Element Vl</a></li>
</ul>
</li>
<li style="list-style: none"><a class="video" href=
"html/videos.html">Video Link</a> <a class="graphic" href=
"html/graphics.html">Graphics Link</a> <a class="forum" href=
"http://z7.invisionfree.com/Elemental_Studios/index.php?">Forum
Link</a> <a class="contact" href="html/contactus.html">Contact
Link</a>

<div class="rightpipe"></div>
<div class="indexheader">
<h1><img src="images/Welcome.png" alt="Welcome" width="125" height=
"38"></h1>
<p align="center" class="style1">Hello, and Welcome to Elemental
Studios. This section of Elemental Studios is for Halo 2. We are
here to help you with you multimedia needs, anything from video
editing, to Photoshop, and to your Halo 2 skills! We have a clan,
and teams being set-up. So check out our forum, or maybe you would
like to see graphicss gallery, or check out the videos! Enjoy you
stay, here!</p>
<img src="images/LastestNews.png" alt="Lastest News" width="195"
height="38"></div>
<div class="lastestnews">
<p align="center" class="textcontent">&nbsp;</p>
<blockquote>
<p align="left" class="textcontent">Hi guys, todays 7/07/07! Bungie
Day! I recommend everyone to go online on Halo 2 at 7:07 pm Pacific
time. I heard something big is happening. In other good news we now
have a full team, so Team Element: Pro Division is closed for new
recruits, please remember that the clan is is looking for memebers
also, I will announce tourneys and such. Now for a couple of side
notes, if you are on a team please do not constantly change your
Emblem, because I make Team Sigs for the teams which contain the
Emblems, If you change your Emblem please think about what you
really want, Team Element does not require a certain Emblem or any
of that ****. Team Members should have atleast a AIM screen name.
Halo3Forum accounts are optional but it would be nice if you did
get one, because over there is a wealth of information on Halo 2
and strategies. Also if ou are using IE 7 you may have slight
problems viewing the site because ads are now up and I haven't
coded to support IE 7 fully yet. If you have Firefox and you are
using Adblock please disable for this site.</p>
<p align="left" class="textcontent"><em>-posted by Squid on July
7th 2007</em></p>
<p align="left" class="textcontent">Happy July 4th! I hope you guys
had a nice holiday!</p>
<p align="left" class="textcontent"><em>-posted by Squid on July
4th 2007</em></p>

<p align="left" class="textcontent">Hey, wassup. Within these last
two days, you probably have seen many improvements, within the
site. The videos page and forums have been added. We are currently
having problems, with the video streaming but bear with us, I am
talking with support. In other news, soon I will be add more menus
to the navigation. If you want to be added to a team just message
me on Xbox Live and I will try you out, you will placed in the
division where I think fit.</p>
<p align="left" class="textcontent"><em>-posted by Squid on July
3th 2007</em></p>
<p align="left" class="textcontent">Hi guys, we have three new
pages up. The Teams page, Contact Us Page, and the Graphics Page.
The forums, and some more graphical upgrades will be coming to the
Site. If for any reasons, you are having problems im on AIM at I
Squid I, or email me at samyrk@hotmail.com, I check my email
daily.</p>
<p align="left" class="textcontent"><em>-posted by Squid on July
2th 2007</em></p>
<p align="left" class="textcontent">Hi all, this is Squid. Today is
Grand Opening of Elemental Studios. It was launched before but
itwas severely miscoded, in both Firefox and IE. But thanks to a
friend of mine named Jutlander I have sucessfully coded it! Please
use either Firefox 2 or IE. If you are using an older version of IE
please upgrade to IE 7 to view transparent images.</p>
<p align="left" class="textcontent"><em>-posted by Squid on June
30th 2007</em></p>
<p align="left" class="textcontent"><br></p>
<p align="left" class="textcontent">&nbsp;</p>
</blockquote>
</div>
<div class="footer"></div>

</li>
</ul>
</div>
</body>
</html>
W3 is down for me so I can not check it. LMK if it works. ;)

l Squid l
07-14-2007, 05:49 PM
Ok....OK LOL WTF HAPPENED now lol. Its all messed up. I wish there a easy simple way to make a drop down menu.

http://elementalstudios.freehostia.com/

twodayslate
07-15-2007, 01:06 AM
OK, don't use my code. Just copy and paste the suckerfish code.

l Squid l
07-15-2007, 01:50 AM
Ok, Now I have a basic drop down menu. Thanks. But for some reason some of the nav images keep repeating.

Error Line 54, column 40: document type does not allow element "a" here; assuming missing "li" start-tag .

<a class="video" href="html/videos.html">Video Link</a>

What is it trying to tell me?

koyama
07-15-2007, 02:01 AM
Error Line 54, column 40: document type does not allow element "a" here; assuming missing "li" start-tag .

<a class="video" href="html/videos.html">Video Link</a>

What is it trying to tell me?
Example. This is OK


<ul>
<li><a>[...]</a></li>
<li><a>[...]</a></li>
<li><a>[...]</a></li>
</ul>

This is invalid:


<ul>
<a>[...]</a>
<a>[...]</a>
<a>[...]</a>
</ul>

l Squid l
07-15-2007, 02:08 AM
Oh, Thank you,



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum