Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts

    How to create drop down menus using an image?

    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.
    Last edited by l Squid l; 07-14-2007 at 03:09 AM.

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Thanks, I'll try it out. I'll post me result soon.

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by l Squid l View Post
    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 catches such errors. Read instructions carefully. This will probably not solve the problem, but you need to fix that first.
    Code:
    <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>
    

  • #6
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    I tried correct but some things I do not understand what they are trying to tell me.

    http://validator.w3.org/check?uri=ht...ehostia.com%2F

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

  • #7
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Tidy did this for me
    Code:
    <!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.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #8
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    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/

  • #9
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    OK, don't use my code. Just copy and paste the suckerfish code.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #10
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    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?

  • #11
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by l Squid l View Post
    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
    Code:
    <ul>
    	<li><a>[...]</a></li>
    	<li><a>[...]</a></li>
    	<li><a>[...]</a></li>
    </ul>
    This is invalid:
    Code:
    <ul>
    	<a>[...]</a>
    	<a>[...]</a>
    	<a>[...]</a>
    </ul>

  • #12
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Oh, Thank you,


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •