need a simple css or java dropdown menu that works with an image link.

**silverglade** · 01-10-2009, 09:45 AM

hi, im trying to add a dropdown menu to the following page on the "services" link. i have tried dynamicdrive.com and suckerfish and they are too complicated for me to follow. any advice or links or examples greatly appreciated. thanks. derek

http://derekvanderven.com/new_geek_help/home.html

**wayfarer07** · 12:36 PM

I would re-study suckerfish, as it is actually quite straightforward, as it is only a <ul> with another <ul> nested inside of one of its <li>s (hidden), that reveals the hidden <ul> on li:hover. The <li> holding the <ul> needs to be {position: relative;} and the nested <ul> {position: absolute;}

Of course it takes a tiny speck of JavaScript to make it work in IE6, but that is provided with every tutorial I've seen. You can also use the .htc whatever:hover script.

**silverglade** · 12:31 PM

ok i will try again thank you. derek

edit: ok i got this easier to understand dropdown. it wont work with my navigation image and is text only but its the best i can do at this point. i have a problem though. the dropdowns stay red when i hover over it. , i want the dropdown background to be gray, . here is the code that i found to put in your object tag for flash embedding so that the dropdown menu appears and is not hidden.

Code:

<param name="wmode" value="transparent" />

. i dont know where to edit the css to make it happen i keep playing around with it. i will keep messing around with it and hopefully understand what each css entry does. but any help appreciated. at least if someone could label the parts of the css for me like "this is the background to your dropdown". here is the css for the dropdown. ( i did comment some of the css to help myself so far- i finally figured out how to resize it.)

Code:

/* 
Title: Vertical CSS menu with a behavior file.
Author: Stefan Vervoort
Blog: http://www.divitodesign.com/blog/ 
Article: http://www.divitodesign.com/blog/200...behavior-file/
*/
body {
 behavior: url(csshover.htc);
 font-size:20px;       /*change size of nav and dropdown text*/
 font-family:Arial, Helvetica, sans-serif;
}
 
p a {
 color: #000;
 text-decoration:underline!important;
}
a{
 color:#fff;
 text-decoration:none;       /* text color */
 }
p a:hover{ text-decoration: none!important;
}
ul#nav {
 list-style: none;
 padding: 0;
 margin: 0;
}
 
ul#nav li a {
 display: block;
 font-weight: bold;        /*background color */
 padding: 2px 10px;
 background-color:  #990000;
 
}
ul#nav li a:hover{
 color:#fff;                  /* text hover */
 background-color: #990000;
 }
 
ul#nav li {
 float: left;
 position: relative;
 width: 200px;   /* change width of boxes */
 text-align: center;
 margin-right:5px;
 border:1px solid #ccc;
 background-color: #990000;
}
ul#nav li.current a{
 background-color:  #990000;
 }
ul#nav li.current a:hover{
 background:#fff;
 }
li ul {
 display: none;
 position: absolute;
 width:200px;         /* width of dropdown menu */
 top: 0;
 left: 0;
 font-weight: normal;
 padding: 1px 0 10px 0;
 margin-left:-1px;
}
ul#nav li ul.sub li{
 border-width:0 1px 1px 1px!important;
}
ul#nav li ul.sub li a{
 font-weight: normal!important; 
}
li>ul {
 top: auto;
 left: auto;
}
li:hover ul, li.over ul {
 display: block;
}

and here is the html for the page.

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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Horizontal Drop-Down CSS MENU</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
<ul id="nav">
    <li class="current"><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Services">Services</a>
      <ul class="sub">
         <li><a href="#" title="Services > Webdesign">Webdesign</a></li>
         <li><a href="#" title="Services > Developement">Development</a></li>
         <li><a href="#" title="Services > Illustration">Illustration</a></li>
         <li><a href="#" title="Services > Search Engine">Search engine</a></li>
         <li><a href="#" title="Services > Wordpress">Wordpress</a></li>
      </ul>
    </li>
    <li><a href="#" title="Blog">Blog</a>
      <ul class="sub" >
         <li><a href="#" title="Services > Themes">Themes</a></li>
         <li><a href="#" title="Services > Plugins">Plugins</a></li>
      </ul>
 </li>
    <li><a href="#" title="Contact">Contact</a></li>
</ul>
<p>&nbsp;</p>
</body>
</html>

**LadynRed** · 01-10-2009, 12:26 PM

Quote:

the "home" button turns white when i hover over it.

The way it's coded, this is because of the .current class that's applied to the Home button. Modify the .current class to fix it.

All you need to do is fix this to get gray dropdowns with a red hover:

Quote:

#nav li a {
display: block;
font-weight: bold; /*background color */
padding: 2px 10px;
background-color: #ababab;

}
#nav li a:hover{
color:#fff; /* text hover */
background-color: #990000;
}

**silverglade** · 01:58 PM

thank you very much! also, i ruined my flash animation by adding the transparent property to it so that my dropdown menu wouldnt be hidden by it. is there any other way to unhide my dropdown menu? the flash animation below it covers it. check out my flash animation here. its transparent now and bad. [edit] i took off the transparent property and tried to make the flash div -1 z index and it didnt work. i also tried z index 1

http://derekvanderven.com/new_geek_help/home.html

im trying to change it with z index for div #flash. but its not working.

here is the new code with negative 1 z index. the menu is still hidden.

Code:

@charset "utf-8";
/* CSS Document */
 
body {
 margin: 0;  /* clear for browsers */
 padding: 0;
 background-color: #333333;
}
#container {
   background-image: url(gradient.gif);
  background-repeat:repeat-x;
 margin:0 auto;
 width: 100%;
 height: 1000px;
 
} 
#centered {
 
  position: relative;
  margin: 0 auto;  /* centers page*/
  width: 795px; 
     height: 1000px;          
  background-color: #000000; 
}
#header {
 
  background-image: url(geek_header.gif);
  background-repeat:no-repeat;
  width: 795px;
  height: 167px;
}  
#geektitle {
     margin-top: 30px;
  margin-left: 220px;
   text-align: center;
  width: 300px;
  height: 50px;
  color: #FF0000;
 font-weight: bold;
 font-size: xx-large;
} 
#navigation {
     width: 795;
  height: 58px;
 
 
} 
#flash {
      width: 795 px;
   height: 248px;  
      z-index:-1;
 
}
#navgroup {
 width: 795px;
 height: 146px;
}   
#homecontent {
    color: #FFFFFF;
 width: auto;        /* used auto so text doesnt pop out of div */  
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1em;
  padding-right: 1em;
 
} 
a:link {
 color: #FFFFFF;
 text-decoration: none;
}
a:visited {
 text-decoration: none;
 color: #996633;
}
a:hover {
 text-decoration: none;
 color: #99FF33;
}
a:active {
 text-decoration: none;
 color: #FF0000;
}
p {
    font-family: Geneva, Arial, Helvetica, sans-serif;
}  
#footer {
 margin:3em auto 0 auto;
 width: 400px;
 height: 50px;
 text-align: center;
  color: #999999;
} 
/*************************************************************************/
/*****************************************DROPDOWN MENU CODE********/
/* 
Title: Vertical CSS menu with a behavior file.
Author: Stefan Vervoort
Blog: http://www.divitodesign.com/blog/ 
Article: http://www.divitodesign.com/blog/200...behavior-file/
*/
body {
 behavior: url(csshover.htc);
} 
 
p a {
 color: #000;
 text-decoration:underline!important;
    font-size:20px;       /*change size of nav and dropdown text*/
 font-family:Arial, Helvetica, sans-serif;
}
}
a{
 color:#fff;
 text-decoration:none;       /* text color */
 }
p a:hover{ text-decoration: none!important;
}
ul#nav {
 list-style: none;
 padding: 0;
 margin: 0;
}
 
ul#nav li a {
 display: block;
 font-weight: bold;        /*background color */
 padding: 2px 10px;
 background-color: #990000;
 
}
ul#nav li a:hover{
color:#fff; /* text hover */
background-color: #990000;
} 
 
ul#nav li {
 float: left;
 position: relative;
 width: 196px;   /* change width of boxes */
 text-align: center;
 margin-right:0px;
 border:1px solid #ccc;
 background-color: #990000;
}
ul#nav li.current a{
 background-color:  #990000;
 }
ul#nav li.current a:hover{
 background:#990000;         /* background hover */
 }
li ul {
 display: none;
 position: absolute;
 width:150px;         /* width of dropdown menu */
 top: 0;
 left: 0;
 font-weight: normal;
 padding: 1px 0 10px 0;
 margin-left:-1px;
}
ul#nav li ul.sub li{
 border-width:0 1px 1px 1px!important;
}
ul#nav li ul.sub li a{
 font-weight: normal!important; 
}
li>ul {
 top: auto;
 left: auto;
}
li:hover ul, li.over ul {
 display: block;
}

**wayfarer07** · 01-10-2009, 02:34 PM

FLASH is not HTML, and can't be z-indexed (as you have discovered). The only way to allow it to layer is to set the transparency.

**silverglade** · 03:02 PM

thank you wayfarer. HAHAHAHAH!!!!!! I FIXED IT!!!!! all i had to do is set the background of the div to white, and the transparent flash looked good again, WITH a new menu dropdown . woot!!!! THANK YOU LADYNRED AND WAYFARER. check it out!!!

http://derekvanderven.com/new_geek_help/home.html

**LadynRed** · 01-10-2009, 04:16 PM

Only one glitch - in Firefox I'm seeing the bullets on your dropdowns. You need to set list-style: none on the #sub list.

**wayfarer07** · 01-10-2009, 04:41 PM

Looks good silverglade

, though I am still seeing the bullet points that LadynRed pointed out...

**silverglade** · 10:40 AM

thank you ladynred. and wayfarer. i had 3 other major problems but i fixed them through sweat and tears. how did you two become such experts exactly in CSS? i want to follow exactly what you did to learn. i like the red hover over my top navigation headers, instead of making them solid red. so thanks. laynred. i wish i could get as good as you at css. i get tired of asking questions and having no clue as a newbie. but im forced to. i have only one more problem. the link at the bottom of the page "contact us" has a class of "page". it has turned black when i wanted it to be red. also, in IE, there is a black space at the top and bottom of my flash animation. grrr. any more help appreciated. i think that will finally be it for that page and probably for the site itself. LOL.

here is the new page
http://derekvanderven.com/new_geek_help/home.html

here is the new CSS

Code:

@charset "utf-8";
/* CSS Document */

 

body {
    margin: 0;  /* clear for browsers */
    padding: 0;
    background-color: #333333;
}

#container {
      background-image: url(gradient.gif);
     background-repeat:repeat-x;
    margin:0 auto;
    width: 100%;
    height: 1000px;
     
}    
#centered {
     
     position: relative;
     margin: 0 auto;  /* centers page*/
     width: 795px; 
     height: 1000px;          
     background-color: #000000;    
}
#header {
      
     background-image: url(geek_header.gif);
     background-repeat:no-repeat;
     width: 795px;
     height: 167px;
}     

#geektitle {
     margin-top: 30px;
     margin-left: 220px;
      text-align: center;
     width: 300px;
     height: 50px;
     color: #FF0000;
    font-weight: bold;
    font-size: xx-large;
}    
#navigation {
     width: 795;
     height: 58px;
     
      
}    

#flash {
      width: 795 px;
      height: 248px;  
      background-color: #ffffff;    
 
}

#navgroup {
    width: 795px;
    height: 146px;
}         

#homecontent {
    color: #FFFFFF;
    width: auto;        /* used auto so text doesnt pop out of div */  
     padding-top: 0;
  padding-bottom: 0;
  padding-left: 1em;
  padding-right: 1em;

          
}    

 
page.a:link {
    color: #FF0000;
    text-decoration: none;
}
page.a:visited {
    text-decoration: none;
    color: #996600;
}
page.a:hover {
    text-decoration: none;
    color: #00FFCC;
}
page.a:active {
    text-decoration: none;
    color: #990000;
}

p {
    font-family: Geneva, Arial, Helvetica, sans-serif;
}     

#footer {
    margin:3em auto 0 auto;
    width: 400px;
    height: 50px;
    text-align: center;
     color: #999999;
}    
/*************************************************************************/
/*****************************************DROPDOWN MENU CODE********/

/* 
Title: Vertical CSS menu with a behavior file.
Author: Stefan Vervoort
Blog: http://www.divitodesign.com/blog/ 
Article: http://www.divitodesign.com/blog/2008/01/vertical-css-menu-with-a-behavior-file/
*/

body {
    behavior: url(csshover.htc);
}    
 
p a {
    color: #000;
    text-decoration:none;!important;
    font-size:20px;                            /*change size of nav and dropdown text*/
    font-family:Arial, Helvetica, sans-serif;
}

a{
    color:#fff;
    text-decoration:none;       /* text color */
    }
p a:hover{    text-decoration: none!important;
}

ul#nav {
    list-style: none;
    padding: 0;
    margin: 0;
}


ul#nav li a {
    display: block;
    font-weight: bold;        /*background color */
    padding: 2px 10px;
    background-color: #666666;
     
}

ul#nav li a:hover{
color:#fff; /* text hover */
background-color: #990000;
} 
    
ul#nav li {
    float: left;
    position: relative;
    width: 196px;            /* change width of boxes */
    text-align: center;
    margin-right:0px;
    border:1px solid #ccc;
    background-color: #990000;

}

ul#nav li.current a{
    background-color:  #666666;    /* fixed the home red button to gray */
    }

ul#nav li.current a:hover{
    background:#990000;         /* background hover */
    }

li ul {
    display: none;
    position: absolute;
    width:150px;         /* width of dropdown menu */
    top: 0;
    left: 0;
    font-weight: normal;
    padding: 1px 0 10px 0;
    margin-left:-1px;
}

ul#nav li ul.sub li{
    border-width:0 1px 1px 1px!important;
}

ul#nav li ul.sub li a{
    font-weight: normal!important;    
}
li>ul {
    top: auto;
    left: auto;
}

li:hover ul, li.over ul {
    display: block;
}

 ul.sub {
 
     list-style: none ;
}

and here is the new html

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>
<link href="geek.css" rel="stylesheet" type="text/css">
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Geek-help home</title>


 
</head>

<body>
    <div id="container">
    <div  id= "centered"> 
         <div id= "header"> <div id="geektitle"> GEEK HELP</div>
         <!-- end geektitle --></div> <!-- end geek header -->
      <div id="navigation"><ul id="nav">
       <li class="current"><a href="home.html" title="Home">Home</a></li>
<li><a href="#" title="Services">Services</a>
      <ul class="sub">
         <li><a href="desktop_support.html" title="Services > Desktop Suppport">Desktop Support</a></li>
         <li><a href="laptop_support.html" title="Services > Laptop Suppport">Laptop Support</a></li>
         <li><a href="mobile_device.html" title="Services > Mobile Device Support ">Mobile Device Support</a></li>
         <li><a href="network_support.html" title="Services > Network Support">Network Support</a></li>
         <li><a href="defragmentation.html" title="Services > Defragmentation">Defragmentation</a></li>
         <li><a href="data_backup.html" title="Services > Data Backup and Recovery">Data Backup and Recovery</a></li>
         <li><a href="virus_protection.html" title="Services > Virus Protection">Virus Protection</a></li>
         <li><a href="malware.html" title="Services > Malware/Spyware Protection">Malware/Spyware Protection</a></li>
         <li><a href="service_agreements.html" title="Services > Service Agreements">Service Agreements</a></li>
      </ul>
           </li>
          <li><a href="staff.html" title="meet our staff">Meet Our Staff</a>
      <!--<ul class="sub" >
         <li><a href="#" title="Services > Themes">Themes</a></li>    
         <li><a href="#" title="Services > Plugins">Plugins</a></li>
      </ul>
    </li>   --><!-- unneeded dropdown for this button -->
  <li><a href="contact.html" title="Contact">Contact</a></li>
</ul> --></div>
    
             <div id="flash" > <object type="application/x-shockwave-flash" data="geek.swf" width="795px" height="248px">
                    <param name="movie" value="geek.swf"><param name="wmode" value="transparent" />

            </object></div>
      <!-- end flash div -->
             
      <div id="navgroup"> <a href="desktop_support.html"><img src="desktop_support.gif" border="0" /></a><a href="laptop_support.html"><img src=              "laptop_support.gif" border="0" /></a><a href="network_support.html"><img src="network_support.gif" border="0" /></a></div>
            <div id="homecontent"> 
              <p>Plagued by viruses, spyware or worse?</p>
              <p> -Need to get your PDA talking to your PC and both of them on the LAN ASAP?                </p>
              <p>-Want to keep your data safe, secure and backed-up?                </p>
              <p>-Worried about getting it all done on time and under budget?</p>
              <p> Call Geek-Help™ today and worry no more!                </p>
              <p>Geek-Help™ prides itself on providing a wide variety of computer support services and backing them up with world-class maintenance.
               Our geeks are knowledgeable, professional and enthusiastic about computers and getting them to work for you. 
                
                We offer a variety of maintenance and upkeep plans with 24-hour emergency support so that everything we set up runs as well down the line as                 it does the first day
                
                
              Since this is New York, we know you’ve got lots of companies to choose from. That’s why we’re the company that gets it right the first time.                  To discover the Geek-Help™ difference,</p>
              <p> <span class="page"><a href="mailto:derekpainter1@hotmail.com">contact us today</a>.</span> </p>
      </div>  <!-- end homecontent -->
           
              <div id="footer"> Web Page Design by Derekvanderven.com  &copy; 2009</div>
    </div> 
<!-- end centered-->
    </div> 
    <!-- end container -->
</body>
</html>

**wayfarer07** · 03:39 PM

Quote:

Originally Posted by silverglade

how did you two become such experts exactly in CSS?

I learned CSS out of necessity, and with time, practice, etc. I was basically given the choice last fall of having no work or else learning some new skills, so took everything I knew about HTML, CSS and PHP, and crammed as much information as I could so that I could get a job. I got a job, but was pretty green, so managed to only keep it for a couple of months

. However, by that time, I was pretty much set on doing this for a living, and with previous experience running a business, started on my own. A year later, I'm still doing it.

As far as the black space: Try making the height of #navigation 27px instead of 58px. Also, when I did that, I noticed that there is a leftover --> comment tag ending that you forgot to delete after the closing </ul> of the navigation.

Do yourself a favor (if you haven't already) and install both the Web Developer's Toolbar and Firebug (both Firefox extensions). If you learn how to use both of these, they will help the debugging process greatly. I was able to focus on the navigation in Firebug and simply adjust the CSS live to see where it should be.

**silverglade** · 12:48 PM

thank you for fixing my black space!!! awesome!

i want to do this for a living too. but if you couldnt hold that job, because of being green. im scared that i wont be able to either. i dont know php, i had trouble learning php and javascript on my own. i was hoping to get a job just know html css photoshop and flash because i did see online job offers requiring just those skills. i was unable to learn php on my own. once i get a job web designing from home, i wanted to pay someone to teach me java. that is my end goal.
anyway, what did you do exactly to learn your skills? books or asking questions in the forum? i want to do the same thing you did. thank you so much for taking the time to help me. otherwise id never be able to be a professional web designer. everything i know came from this forum. i dont know what i would have done without you, ladynred, and chrishirst. also , one last thing about my page. the "contact us" link at the bottom has turned black instead of red. it has the class span of "page". and i dont know how to fix it. that is the last question i think i have about my website, because the rest is just adding images and text on other pages. if you could help just one more time that would be great. thank you. derek

wow i just looked at your website. its pretty intimidating. you know a LOT more than i do. very nice website.

**wayfarer07** · 01-11-2009, 01:01 PM

Quote:

Originally Posted by silverglade

i was hoping to get a job just know html css photoshop and flash

You'll be fine with that skillset to start. I didn't know anything about Photoshop when I started out, and Flash is still something I don't deal with much.

Quote:

Originally Posted by silverglade

wow i just looked at your website. its pretty intimidating. you know a LOT more than i do. very nice website.

Thanks. I didn't do much of the graphic design, however: a guy I've worked with did it on trade.

**silverglade** · 01:34 PM

you are awesome abel. you really gave me a lot of hope there, because that skillset is all i am able to learn on my own really. i tried javascript and php and failed. but in the future maybe.... but i really want a job doing this from home . it would be my perfect job/life. im really trying hard to learn it on this forum and the net. also, i swear this is the last time i will ask you anything about that page. but. do you know why my "contact us" link which has the span class of "page" is black instead of red? i couldnt figure it out. my css looks right but there must be something wrong. i added to your talkupation and my buddies list. . thank you . derek

**wayfarer07** · 01:52 PM

Because of this:

Code:

p a {  /*geek.css (line 119)*/
color:#000000; /*<-black*/

font-family:Arial,Helvetica,sans-serif;
font-size:20px;
text-decoration:none;
}

to override the specificity you'll have to do something like:

Code:

span.page p a {
color: red;
}

Don't forget to style the :visited pseudoclass for the <a> also.

**silverglade** · 08:42 AM

Great thank you. i have to go out so i will try to fix it when i get back. thank you again for all the time and help. derek

edit: ok cool i fixed it. i messed around with it for a bit, and changed the following.

p a {
color: #990000; /* made the link text red again */
text-decoration:none;!important;
font-size:20px; /*change size of nav and dropdown text*/
font-family:Arial, Helvetica, sans-serif;
}

somehow that worked. i dont like the feeling of not completely understanding my code, but at least it works now.
now i just have to change the other pages to have my new dropdown menu and add some text and images so im pretty much set i think for this second website. thank you for all the help . derek

**silverglade** · 03:35 PM

im making a new post about my last problem. see if anyone can help. derek