Re: [css-d] newbie question | css drop down

dg Fri, 28 Dec 2007 15:34:45 -0800

this works on mac, might need some checking for win and a little  
editing to fit in right


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
         "http://www.w3.org/TR/html4/loose.dtd";>
<html>
<head>
        <title>Untitled</title>
        <meta name="generator" content="BBEdit 8.7">
<style>
#menuh-container
{
width: 121px;
}

#menuh
{
font-size: 12px;
font-family: arial, helvetica, sans-serif;
width: 127px;
float:left;
margin:0;
}

#menuh a
{
width: 121px;
height: 23px;
text-align: center;
display:block;
border: 1px solid #ffffff;
white-space:nowrap;
margin:0;
padding: 0.3em;
}

#menuh a, #menuh a:visited /* menu at rest */
{
color: #ea8d14;

background-color: #08315d;
text-decoration:none;
}

#menuh a:hover /* menu at mouse-over */
{
color: #ea8d14;

border: 2px solid #ea8d14;
background-color: #08315d;
}

#menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow
to all top-parents */
{
color: #ea8d14;
background-position: right center;
background-repeat: no-repeat;
}

#menuh a.parent, #menuh a.parent:hover /* attaches side-arrow to all  
parents */
{
color: #ea8d14;
background-position: right center;
background-repeat: no-repeat;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:9em; /* width of all menu boxes */
}

#menuh li
{
position:relative;
min-height: 1px; /* Sophie Dennis contribution for IE7 */
vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
}

#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursor:pointer;
z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}
</style> <script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;
i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr;
for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body>
<p>
        &nbsp;
</p>
<table width="762" border="0" align="left" cellpadding="0"  
cellspacing="0">
        <tr>
                <td width="56">
                        <a href="/index.html"><img 
src="http://www.conman.net/images/cssHelp/button1.jpg 
" alt="home" name="Home" width="56" height="31" border="0" id="Home"  
onmouseover="MM_swapImage('Home','','http://www.conman.net/images/cssHelp/button1Over.jpg',1)
 
" onmouseout="MM_swapImgRestore()" /></a>
                </td>
                <td width="130">
                        <div id="menuh">
                                <ul>
                                        <li>
                                                <a href="#" 
class="top_parent">Conner Huff Guitar</a>
                                                <ul>
                                                        <li>
                                                                <a href="#">Sub 
1:1</a>
                                                        </li>
                                                        <li>
                                                                <a href="#">Sub 
1:2</a>
                                                        </li>
                                                        <li>
                                                                <a href="#">Sub 
1:3</a>
                                                        </li>
                                                </ul>
                                        </li>
                                </ul>
                        </div>
                </td>
                <td width="98">
                        <img 
src="http://www.conman.net/images/cssHelp/button3S.jpg";  
alt="transcription" name="Transcription" width="98" height="31"  
border="0" id="Transcription" />
                </td>
                <td width="120">
                        <a href="/Recording/index.html"><img 
src="http://www.conman.net/images/cssHelp/button4.jpg 
" alt="recording" name="Recording" width="120" height="31" border="0"  
id="Recording" 
onmouseover="MM_swapImage('Recording','','http://www.conman.net/images/cssHelp/button4Over.jpg',1)
 
" onmouseout="MM_swapImgRestore()" /></a>
                </td>
                <td width="71">
                        <a href="/About/index.html"><img 
src="http://www.conman.net/images/cssHelp/button5.jpg 
" alt="about" name="About" width="71" height="31" border="0"  
id="About" /></a>
                </td>
                <td width="85">
                        <a href="/Contact/index.php"><img 
src="http://www.conman.net/images/cssHelp/button6.jpg 
" alt="contact" name="Contact" width="85" height="31" border="0"  
id="Contact" 
onmouseover="MM_swapImage('Contact','','http://www.conman.net/images/cssHelp/button6Over.jpg',1)
 
" onmouseout="MM_swapImgRestore()" /></a>
                </td>
                <td width="54">
                        <img 
src="http://www.conman.net/images/cssHelp/button7.jpg";  
alt="store" name="Store" width="54" height="31" id="Store"  
onmouseover="MM_swapImage('Store','','http://www.conman.net/images/cssHelp/button7Over.jpg',1)
 
" onmouseout="MM_swapImgRestore()" />
                </td>
                <td width="82">
                        <img 
src="http://www.conman.net/images/cssHelp/endButtons.jpg";  
alt="endButtons" width="157" height="31" />
                </td>
        </tr>
</table>
</body>
</html>

On Dec 28, 2007, at 1:29 PM, conner huff wrote:

> Hello all,
>
> I am in search of someone who knows more about this stuff than me.
>
> I have one CSS button that I want to just simply copy and paste inside
> this table with image buttons.
>
> But I am not having much luck.  Here's the code:
>
> <html>
> <title>conner huff</title>
> <style>
> #menuh-container
>       {
>       width: 127px;
>       }
>
> #menuh
>       {
>       font-size: 12px;
>       font-family: arial, helvetica, sans-serif;
>       width: 127px;
>       float:left;
>       margin:2em;
>       margin-top: 1em;
>       }
>
> #menuh a
>       {
>       width: 127px;
>       height: 20px;
>       text-align: center;
>       display:block;
>       border: 1px solid #ffffff;
>       white-space:nowrap;
>       margin:0;
>       padding: 0.3em;
>       }
>
> #menuh a, #menuh a:visited      /* menu at rest */
>       {
>       color: #ea8d14;
>
>       background-color: #08315d;
>       text-decoration:none;
>       }
>
> #menuh a:hover  /* menu at mouse-over  */
>       {
>       color: #ea8d14;
>
>       border: 2px solid #ea8d14;
>       background-color: #08315d;
>       }
>
> #menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow
> to all top-parents */
>       {
>       color: #ea8d14;
>       background-position: right center;
>       background-repeat: no-repeat;
>       }
>
> #menuh a.parent, #menuh a.parent:hover  /* attaches side-arrow to  
> all parents */
>       {
>       color: #ea8d14;
>       background-position: right center;
>       background-repeat: no-repeat;
>       }
>
> #menuh ul
>       {
>       list-style:none;
>       margin:0;
>       padding:0;
>       float:left;
>       width:9em;      /* width of all menu boxes */
>       }
>
> #menuh li
>       {
>       position:relative;
>   min-height: 1px;    /* Sophie Dennis contribution for IE7 */
>   vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
>       }
>
> #menuh ul ul
>       {
>       position:absolute;
>       z-index:500;
>       top:auto;
>       display:none;
>       padding: 1em;
>       margin:-1em 0 0 -1em;
>       }
>
> #menuh ul ul ul
>       {
>       top:0;
>       left:100%;
>       }
>
> div#menuh li:hover
>       {
>       cursor:pointer;
>       z-index:100;
>       }
>
> div#menuh li:hover ul ul,
> div#menuh li li:hover ul ul,
> div#menuh li li li:hover ul ul,
> div#menuh li li li li:hover ul ul
> {display:none;}
>
> div#menuh li:hover ul,
> div#menuh li li:hover ul,
> div#menuh li li li:hover ul,
> div#menuh li li li li:hover ul
> {display:block;}
> </style>
> <script type="text/javascript">
> <!--
> function MM_preloadImages() { //v3.0
> var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
>   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;
> i<a.length; i++)
>   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j+ 
> +].src=a[i];}}
> }
> function MM_swapImgRestore() { //v3.0
> var i,x,a=document.MM_sr;
> for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
> }
>
> function MM_findObj(n, d) { //v4.01
> var p,i,x;  if(!d) d=document;
> if((p=n.indexOf("?"))>0&&parent.frames.length) {
>   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
> if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
> x=d.forms[i][n];
> for(i=0;!x&&d.layers&&i<d.layers.length;i++)
> x=MM_findObj(n,d.layers[i].document);
> if(!x && d.getElementById) x=d.getElementById(n); return x;
> }
>
> function MM_swapImage() { //v3.0
> var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
> for(i=0;i<(a.length-2);i+=3)
>  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
> x.oSrc=x.src; x.src=a[i+2];}
> }
> //-->
> </script>
> </head>
>
> <body 
> onload="MM_preloadImages('http://www.conman.net/images/cssHelp/button1Over.jpg','http://www.conman.net/images/cssHelp/button4Over.jpg','http://www.conman.net/images/cssHelp/button6Over.jpg','http://www.conman.net/images/cssHelp/button7Over.jpg')
>  
> ">
>
> <div id="menuh">
>       <ul>
>               <li><a href="#" class="top_parent">Conner Huff Guitar</ 
> a>
>                 <ul>
>                       <li><a href="#">Sub 1:1</a></li>
>                       <li><a href="#">Sub 1:2</a></li>
>                 <li><a href="#">Sub 1:3</a></li>
>               </ul>
>               </li>
>       </ul>
> </div>
> </div>
>
>
> <p>&nbsp;</p>
> <table width="762" border="0" align="left" cellpadding="0"  
> cellspacing="0">
> <tr>
>   <td width="56"><a href="/index.html"><img
> src="http://www.conman.net/images/cssHelp/button1.jpg"; alt="home"
> name="Home" width="56" height="31" border="0" id="Home"
> onmouseover="MM_swapImage('Home','','http://www.conman.net/images/cssHelp/button1Over.jpg',1)
>  
> "
> onmouseout="MM_swapImgRestore()" /></a></td>
>   <td width="130">&nbsp;</td>
>   <td width="98"><img
> src="http://www.conman.net/images/cssHelp/button3S.jpg";
> alt="transcription" name="Transcription" width="98" height="31"
> border="0" id="Transcription" /></td>
>   <td width="120"><a href="/Recording/index.html"><img
> src="http://www.conman.net/images/cssHelp/button4.jpg"; alt="recording"
> name="Recording" width="120" height="31" border="0" id="Recording"
> onmouseover="MM_swapImage('Recording','','http://www.conman.net/images/cssHelp/button4Over.jpg',1)
>  
> "
> onmouseout="MM_swapImgRestore()" /></a></td>
>   <td width="71"><a href="/About/index.html"><img
> src="http://www.conman.net/images/cssHelp/button5.jpg"; alt="about"
> name="About" width="71" height="31" border="0" id="About" /></a></td>
>   <td width="85"><a href="/Contact/index.php"><img
> src="http://www.conman.net/images/cssHelp/button6.jpg"; alt="contact"
> name="Contact" width="85" height="31" border="0" id="Contact"
> onmouseover="MM_swapImage('Contact','','http://www.conman.net/images/cssHelp/button6Over.jpg',1)
>  
> "
> onmouseout="MM_swapImgRestore()" /></a></td>
>   <td width="54"><img
> src="http://www.conman.net/images/cssHelp/button7.jpg"; alt="store"
> name="Store" width="54" height="31" id="Store"
> onmouseover="MM_swapImage('Store','','http://www.conman.net/images/cssHelp/button7Over.jpg',1)
>  
> "
> onmouseout="MM_swapImgRestore()" /></td>
>   <td width="82"><img
> src="http://www.conman.net/images/cssHelp/endButtons.jpg";
> alt="endButtons" width="157" height="31" /></td>
> </tr>
> </table>
>
>
> </html>
>
>
> -- 
> Conner Huff
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] newbie question | css drop down

Reply via email to