7 Replies Latest reply on Apr 6, 2010 9:09 PM by Sketchsta

    some CSS help please!

    Sketchsta Level 1

      Hi guys, Im currently trying to make a navigation menu with CSS... im not much good with CSS but im a quick learner. Searching on the net I came accross some good help, and I got the whole menu to work almost corectly.

       

      The problem im having is controlling WHERE the sub menu appears.

       

      it was all going good while i was making it, but when i put it into the html page, thats when the problems start, I cant get it to ALWAYS appear in the same spot.

      My best guess would be to have the sub menu appear inside a table???

      How can that be done? I havent had any luck finding help on this from googling....so here I am. =)

       

      Let me know if you want to see the code.

      And thanx in advance to anyone willing to help.  Happy Easter!!

        • 1. Re: some CSS help please!
          dan hop Level 1

          Requests like yours have (almost) always been followed by statements like:


          "I can't help you if I don't know what your code looks like."

          or "Why don't you post a link to your problem page/code".

           

          You'll get a quicker answer if you provide the information that can be used to diagnose your problem.

           

          Dan H.

          • 2. Re: some CSS help please!
            Sketchsta Level 1
            ul#cssMenu ul{display:none}
            ul#cssMenu li:hover>*{display:block}
            ul#cssMenu li:hover{position:static}
            ul#cssMenu ul{
                 position:fixed;left:23.85%;top:234px;opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
            ul#cssMenu ul ul{
                 position:fixed;left:20px;top:200px;opacity:1;}
            ul#cssMenu,ul#cssMenu ul{
                 margin:0px;list-style:none;padding:0px 0 0px 0px;background-color:#000000;border-width:0px;border-style:solid;border-color:#C0AF62;}
            ul#cssMenu table {border-collapse:collapse}
            ul#cssMenu {
                 display:block;font-size:;zoom:1;float:left;}
            ul#cssMenu ul{
                 width:860px;float:middle;padding:0px 0 0px 0px;}
            ul#cssMenu li{
                 display:block;zoom:1;margin:3 3px 3 3;font-size:0;float:inherit;}
            ul#cssMenu a:active, ul#cssMenu a:focus {outline-style:none}
            ul#cssMenu a{
                 display:block;vertical-align:left;_display:inline-block;_vertical-align:top;background-color:#000000;border-width:0px;border-style:solid;border-color:#FCEEB0;text-align:left;text-decoration:none;padding:0px;_padding-left:0;font:bold 11px Arial;color: #FFFFFF;text-decoration:none;cursor:pointer;}
            ul#cssMenu ul li {float:left}
            ul#cssMenu ul a{
                 text-align:left;white-space:nowrap; padding:5px;}
            ul#cssMenu li:hover>a{
                 background-color:#555555;border-color:#4C99AB;border-style:solid;font:bold 11px Arial;color: #FFFF00;text-decoration:none;}
            ul#cssMenu li a:hover{
                 _position:relative;background-color:#555555;border-color:#4C99AB;border-style:solid;font:bold 11px Arial;color: #FFFF00;text-decoration:none;}
            ul#cssMenu img{
                 border: none;vertical-align: middle;margin-right:0px;}
            ul#cssMenu img.over{display:none}
            ul#cssMenu li:hover > a img.def  {display:none}
            ul#cssMenu li:hover > a img.over {display:inline}
            ul#cssMenu a:hover img.over,ul#cssMenu a:hover ul img.def,ul#cssMenu a:hover a:hover img.over{display:inline}
            ul#cssMenu a:hover img.def,ul#cssMenu a:hover ul img.over,ul#cssMenu a:hover a:hover img.def{display:none}
            ul#cssMenu a:hover ul{display:block}
            

            Thats it there.

            • 3. Re: some CSS help please!
              Sketchsta Level 1

              gnore this one. =)

              • 4. Re: some CSS help please!
                Sketchsta Level 1
                <!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>Ray White . Jurien Bay | Template</title>
                <link type="text/css" href="CSS/style.css" rel="stylesheet">
                <script type="text/javascript">
                
                <!--
                
                <!-- Dummy comment to hide code from non-JavaScript browsers.
                
                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 bgcolor="#666666" style="margin:0; padding:0">
                <center>
                
                <!-- TOP BAR -->
                
                <table bgcolor="#FFFFFF" width="900px" border="0" cellpadding="0" cellspacing="0">
                <tr>
                <td bgcolor="#000000" height="20" width="900px"></td>
                </tr>
                <tr>
                <td style="background-image:url(images/top_rpt.gif); background-repeat:repeat-x; padding:0; margin:0">
                <a href="home.asp"><img src="images/logo.png" border="0" width="317" height="112" align="left" /></a></td>
                </tr>
                <tr>
                <td height="10px"></td>
                </tr>
                </table>
                
                
                
                <!-- NAVIGATION -->
                
                <table bgcolor="#FFFFFF" width="900px" border="0" cellpadding="0" cellspacing="0">
                <tr>
                <td width="60"> </td>
                <td>
                <ul id="cssMenu">
                     <li><a href="http://deluxe-menu.com/css-menu/"><img class="def" src="images/nav/home_out.jpg"/><img class="over" src="images/nav/home_over.jpg"></a></li>
                    <li><img src="images/nav/nav_spacer.jpg"></li>
                     <li><a href="http://deluxe-menu.com/css-menu/"><img class="def" src="images/nav/about_out.jpg"/><img class="over" src="images/nav/about_over.jpg"><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                    
                     <ul>
                          <li><a href="#">Company Profile </a></li>
                          <li><a href="#">Contact Us </a></li>
                          <li><a href="#">Sales Team </a></li>
                          <li><a href="#">Property Management + </a></li>
                          <li><a href="#">News </a></li>
                          <li><a href="#">Ray White National </a></li>
                          <li><a href="#">Map </a></li>
                     </ul>
                     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
                    <li><img src="images/nav/nav_spacer.jpg"></li>
                     <li><a href="#"><img class="def" src="images/nav/sales_out.jpg"/><img class="over" src="images/nav/sales_over.jpg"><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                     <ul>
                          <li><a href="#">Residential Sales </a></li>
                          <li><a href="#">Properties For Auction </a></li>
                          <li><a href="#">Land For Sale </a></li>
                          <li><a href="#">Rural Properties </a></li>
                          <li><a href="#">Acreage </a></li>
                     </ul>
                     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
                    <li><img src="images/nav/nav_spacer.jpg"></li>
                     <li><a href="#"><img class="def" src="images/nav/development_out.jpg"/><img class="over" src="images/nav/development_over.jpg"><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                     <ul >
                          <li><a href="#">Beachridge </a></li>
                          <li><a href="#">Marine Fields </a></li>
                          <li><a href="#">Seagate </a></li>
                          <li><a href="#">Cervantes Edge Resort </a></li>
                     </ul>
                     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
                    <li><img src="images/nav/nav_spacer.jpg"></li>
                     <li><a href="#"><img class="def" src="images/nav/rent_out.jpg"/><img class="over" src="images/nav/rent_over.jpg"><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                     <ul>
                          <li><a href="#">Residential Rentals </a></li>
                     </ul>
                     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
                    <li><img src="images/nav/nav_spacer.jpg"></li>
                     <li><a href="#"><img class="def" src="images/nav/commercial_out.jpg"/><img class="over" src="images/nav/commercial_over.jpg"><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                     <ul>
                          <li><a href="#">Commercial Sales </a></li>
                          <li><a href="#">Businesses For Sale </a></li>
                          <li><a href="#">Commercial Leasing </a></li>
                     </ul>
                     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
                    <li><img src="images/nav/nav_spacer.jpg"></li>
                     <li><a href="#"><img class="def" src="images/nav/links_out.jpg"/><img class="over" src="images/nav/links_over.jpg"><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                     <ul>
                          <li><a href="#">Shire of Dandaragan </a></li>
                          <li><a href="#">Shire of Coorow </a></li>
                          <li><a href="#">Shire of Three Springs </a></li>
                          <li><a href="#">Shire of Carnamah </a></li>
                          <li><a href="#">Financial Services </a></li>
                          <li><a href="#">Loan Calculator </a></li>
                          <li><a href="#">Rate Comparisons </a></li>
                          <li><a href="#">Insurance </a></li>
                     </ul>
                     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
                </ul>
                </td>
                
                <td width="60"> </td>
                </tr>
                </table>
                
                
                <!-- PAGE TITLE -->
                
                <table width="900px" border="0" cellspacing="0" cellpadding="0">
                <tr>
                <td bgcolor="#FFFFFF" colspan="4" height="10px"></td>
                </tr>
                <td bgcolor="#FFFFFF" width="20px"></td>
                <td bgcolor="#FFFFFF" width="375px" style="background-image:url(images/title_line.gif); background-repeat:repeat-x; background-position:top"></td>
                <td bgcolor="#000000" width="485px">PAGE TITLE</td>
                <td bgcolor="#FFFFFF" width="20px"></td>
                </tr>
                <tr>
                <td bgcolor="#FFFFFF" height="2px" colspan="4"></td>
                </tr>
                </table>
                
                <!-- BANNER AREA -->
                
                <table width="900px" border="0" cellpadding="0" cellspacing="0">
                <tr>
                <td bgcolor="#FFFFFF" width="20px"></td>
                <td bgcolor="#FFFFFF"><img src="images/banner.jpg" border="0" width="860" /></td>
                <td bgcolor="#FFFFFF" width="20px"></td>
                </tr>
                </table>
                
                
                <!-- MAIN PAGE CONTENT -->
                
                <!-- SECTION TITLE -->
                <table width="900px" cellpadding="0" cellspacing="0" border="0">
                <tr>
                <td bgcolor="#FFFFFF" height="5px" colspan="7"></td>
                </tr>
                <tr>
                <td bgcolor="#FFFFFF" width="20px"></td>
                <td bgcolor="#FFFFFF" width="220px">
                left title here
                </td>
                <td bgcolor="#FFFFFF" width="10px"></td>
                <td bgcolor="#FFFFFF" width="400px">
                center title here
                </td>
                <td bgcolor="#FFFFFF" width="10px"></td>
                <td bgcolor="#666666" width="220px" style="padding-left:5px">
                right title here
                </td>
                <td bgcolor="#FFFFFF" width="20px"></td>
                </tr>
                </table>
                
                
                
                <!-- SECTION CONTENT -->
                
                <table width="900px" cellpadding="0" cellspacing="0" border="0">
                <tr>
                <td bgcolor="#FFFFFF" height="5px" colspan="5"></td>
                <td bgcolor="#666666" height="5px" style="padding-left:5px"></td>
                <td bgcolor="#FFFFFF" height="5px"></td>
                </tr>
                <tr>
                <td bgcolor="#FFFFFF" width="20px"></td>
                <td bgcolor="#FFFFFF" width="220px">
                left content here
                </td>
                <td bgcolor="#FFFFFF" width="10px"></td>
                <td bgcolor="#FFFFFF" width="400px">
                center content here
                </td>
                <td bgcolor="#FFFFFF" width="10px"></td>
                <td bgcolor="#666666" width="220px" style="padding-left:5px">
                right content here
                </td>
                <td bgcolor="#FFFFFF" width="20px"></td>
                </tr>
                </table>
                
                
                <!-- FOOTER -->
                <table width="900px" cellpadding="0" cellspacing="0" border="0">
                <tr>
                <td bgcolor="#FFFFFF" height="10px" colspan="9"></td>
                </tr>
                <tr>
                <td bgcolor="#AAAAAA" height="10px" colspan="9"></td>
                </tr>
                <tr>
                <td bgcolor="#AAAAAA" width="20px"></td>
                <td bgcolor="#AAAAAA" valign="top" align="left">
                Ray White Real Estate
                </td>
                <td bgcolor="#AAAAAA" width="10px"></td>
                <td bgcolor="#AAAAAA" valign="top" align="left">
                ADDRESS:<br />
                Suite 6, Jurien Bay Shopping Center<br />
                Lot 1 Bashford Street<br />
                Jurien Bay WA 6516<br /><br />
                </td>
                <td bgcolor="#AAAAAA" width="10px"></td>
                <td bgcolor="#AAAAAA" valign="top" align="left">
                Principal: Greg Johnson
                </td>
                <td bgcolor="#AAAAAA" width="10px"></td>
                <td bgcolor="#AAAAAA" valign="top" align="left">
                Phone:  +61 8 9652 2077<br />
                Fax:  +61 8 9652 2088<br />
                Email:  jurien.wa@raywhite.com<br />
                www.raywhitejurienbay.com<br />
                </td>
                <td bgcolor="#AAAAAA" width="20px"></td>
                </tr>
                <tr>
                <td bgcolor="#AAAAAA" height="30px" colspan="9" align="right" valign="middle">Ray White&copy; Jurien Bay. All Rights Reserved 2010</td>
                </tr>
                </table>
                
                </center>
                </body>
                </html>
                
                

                Thats  the HTML page. I would prefer to open the sub menu inside the PAGE  TITLE cell.

                PAGE TITLE
                • 5. Re: some CSS help please!
                  Nancy OShea Adobe Community Professional & MVP

                  Below is valid XHTML and CSS code for a page with a Horizontal Drop-Menu.

                  Tested and works in FF, Chrome/Safari, IE6, 7, 8.

                   

                  <!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>CSS Horizontal Drop-Menu</title>
                  
                  <style type="text/css">
                  
                  /**GENERAL**/
                  body{
                  font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 100%;
                  background:#666;
                  margin:0px;
                  padding:0px;
                  }
                  /**for IE only**/
                  *body {font-size:76%;}
                  
                  #container{
                  padding:12px;
                  width:770px;
                  margin: 0 auto; /**centered**/
                  border: 4px solid silver;
                  background: #FFF;
                  font-size: 0.9em;
                  line-height: 1.5;
                  }
                  
                  #header {
                  width: 760px;
                  margin: 0 auto;
                  text-align:center;
                  height: 6em;
                  border: 1px solid green;
                  }
                  
                  #mainContent {
                  color: #333333;
                  padding: 12px;
                  }
                  
                  /* Horizontal Drop-Menu */
                  #navbar {
                  margin: 0 ;
                  padding: 0;
                  height: 1em;}
                  
                  #navbar li {
                  list-style: none;
                  float: left; }
                  
                  #navbar li a {
                  display: block;
                  text-decoration: none;
                  color: #444;
                  width: auto;
                  margin: 0;
                  padding: 2px 10px;
                  border-left: 1px solid #fff;
                  border-top: 1px solid #fff;
                  border-right: 1px solid #aaa;
                  background-color: #DDD;
                  }
                  #navbar li a:hover {
                  background: #666;
                  color: #FFF;
                  }
                  
                  #navbar li ul {
                  display: none; 
                  width: 8em; /* Width to help Opera out */
                  background-color: #999;}
                  
                  /**help for IE6 JavaScript**/
                  #navbar li:hover ul, #navbar li.hover ul {
                  display: block;
                  position: absolute;
                  margin: 0;
                  padding: 0;
                  }
                  
                  #navbar li:hover li, #navbar li.hover li {
                  float: none;}
                  
                  #navbar li:hover li a, #navbar li.hover li a {
                  background-color: #999;
                  border-bottom: 1px solid #FFF;
                  color: #FFF;}
                  
                  #navbar li li a:hover {background-color: #666;}
                  /**end Drop-menus**/
                  </style>
                  
                  <script type="text/javascript">
                  //Script to make drop-menus work in IE6/
                  //<!--[CDATA[ 
                  sfHover = function() {
                  var sfEls = document.getElementById("navbar").getElementsByTagName("li");
                  for (var i=0; i<sfEls.length; i++) {
                  sfEls[i].onmouseover=function() {
                  this.className+=" hover";
                  }
                  sfEls[i].onmouseout=function() {
                  this.className=this.className.replace(new RegExp(" hover\\b"), "");
                  }
                  }
                  }
                  if (window.attachEvent) window.attachEvent("onload", sfHover);
                  //]]--> 
                  </script>
                  
                  </head>
                  <body>
                  <div id="container">
                  <div id="header">
                  <h3>CSS Horizontal Drop-Menu</h3>
                  <!--Begin Horizontal navbar. Odd spacing req'd for IE whitespace bug-->
                  <ul id="navbar">
                  <li><a href="#">Item One</a></li>
                  <li><a href="#">Item Two</a></li>
                  <li><a href="#">Item Three &gt; </a><ul><li>
                  <a href="#">Subitem 1</a></li><li>
                  <a href="#">Subitem 2</a></li><li>
                  <a href="#">Subitem 3</a></li></ul>
                  </li>
                  <li><a href="#">Item Four</a></li>
                  <li><a href="#">Item Five &gt; </a><ul><li>
                  <a href="#">Subitem 1</a></li><li>
                  <a href="#">Subitem 2</a></li></ul>
                  </li>
                  <li><a href="#">Item Six &gt; </a><ul><li>
                  <a href="#">Subitem 1</a></li><li>
                  <a href="#">Subitem 2</a></li></ul>
                  </li>
                  </ul>  <!--end navbar --> 
                  </div> <!--end header -->
                  <div id="mainContent">
                  <h3>Main Content</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus tristique tortor, id consectetur dui molestie et. Phasellus nec diam sit amet augue cursus interdum. Phasellus tempus turpis sed nibh molestie lobortis et laoreet nulla. Donec vehicula pretium sem ac interdum. Mauris porttitor suscipit pulvinar? Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus pharetra, lacus in dapibus pellentesque, dui arcu malesuada mauris, id rutrum nulla tortor sit amet nulla. Quisque felis mi, imperdiet quis dictum non, volutpat sit amet sem. Proin auctor, metus id sollicitudin malesuada, ligula ligula facilisis mauris, vel tincidunt dolor dolor quis erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                  </div>  <!--end mainContent -->
                  </div>  <!--end container -->
                  </body>
                  </html>
                  

                   

                  Nancy O.
                  Alt-Web Design & Publishing
                  Web | Graphics | Print | Media  Specialists
                  http://alt-web.com/
                  http://twitter.com/altweb
                  http://alt-web.blogspot.com

                  • 6. Re: some CSS help please!
                    Sketchsta Level 1

                    Thanx for the code Nancy. I'll keep it for future use.

                    But I still want to use my own code since it took me a long time to write it and learn from it.

                     

                    Do you know how I would get the sub menu to appear inside a table cell by any chance?

                    • 7. Re: some CSS help please!
                      Sketchsta Level 1

                      I realise its not the cleanest of coding...so I've uploaded the files HERE

                       

                      I want the sub menu to always appear in the center of the page content...I havent had any luck in getting that to happen.

                      Then I thought that it might be better if I can somehow make the submenu appear inside the PAGE TITLE cell ??? I have no idea how to get this done...or if its even possible??

                       

                      P.S.. if anyone has other suggestions as to how I can get the submenu to be centered, please let me know.