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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple CSS issue... Text position on Java menu from javascriptkit.com

    Hello,

    I recently downloaded JAva menu from http://www.javascriptkit.com/script/...stopmenu.shtml

    I altered it around a bit and adjusted the CSS as needed... I am trying to get the txt to be at the bottom of the 70 height background image I have...

    HEre is the CSS as I changed it but the issue is I tried verticle align bottom and line height but did not work for the main top-level items...

    Also as of right now the whole menu is positioned to the left... I would like it to be centered to the page and/or table it is inside of... I am a newbie and appreciate any help...

    Thanks for any help guys...

    HTML CODE:
    Code:
    <div class="horizontalcssmenu">
    <ul id="cssmenu1">
    <li style="border-left: 1px solid #202020;"><a href="#">Home</a></li>
    
    <li><a href="#" >Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a>
        <ul>
        <li><a href="#">JS Reference</a></li>
        <li><a href="#">DOM Reference</a></li>
        <li><a href="#">CSS Reference</a></li>
        </ul>
    </li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a>
      <ul>
        <li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
        <li><a href="http://www.codingforums.com">Coding Forums</a></li>
        <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
        <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
        <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
        <li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
      </ul>
    </li>
    </ul>
    <br style="clear: left;" />
    </div>
    CSS CODE:

    Code:
    /***********************************************
    
    * CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
    * Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/ 
    * This notice must stay intact for usage
    * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
    
    ***********************************************/
    
    .horizontalcssmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    
    
    }
    
    /*Top level list items*/
    .horizontalcssmenu ul li{
    	
    	text-align: center;
    position: relative;
    
    display: inline;
    float: left;
    
    
    }
    
    /*Top level menu link items style*/
    .horizontalcssmenu ul li a{
    
    display: block;
    width: 120px; /*Width of top level menu link items*/
    height: 70px;
    padding: 2px 8px;
    border: 1px solid #202020;
    border-left-width: 0;
    text-decoration: none;
    background: url(../../images/menu/top-nav-bg.gif) center center repeat-x;
    color: black;
    font: bold 13px Tahoma;
    }
    	
    /*Sub level menu*/
    .horizontalcssmenu ul li ul{
    	height: 25px;
    left: 0;
    top: 0;
    border-top: 1px solid #202020;
    position: absolute;
    display: block;
    visibility: hidden;
    z-index: 100;
    }
    
    /*Sub level menu list items*/
    .horizontalcssmenu ul li ul li{
    display: inline;
    float: none;
    height: 25px;
    }
    
    
    /* Sub level menu links style */
    .horizontalcssmenu ul li ul li a{
    width: 160px; /*width of sub menu levels*/
    font-weight: normal;
    padding: 2px 5px;
    background: #e3f1bd;
    border-width: 0 1px 1px 1px;
    height: 25px;
    }
    
    .horizontalcssmenu ul li a:hover{
    	background: url(menubgover.gif) center center repeat-x;
    	text-align: center;
    	vertical-align: bottom;
    }
    
    .horizontalcssmenu ul li ul li a:hover{
    background: #cde686;
    }
    
    .horizontalcssmenu .arrowdiv{
    position: absolute;
    right: 0;
    background: transparent url(menuarrow.gif) no-repeat center left;
    }
    
    * html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
    padding-top: 1em;
    }
    	
    /* Holly Hack for IE \*/
    * html .horizontalcssmenu ul li { float: left; height: 1%; }
    * html .horizontalcssmenu ul li a { height: 1%; }
    /* End */
    Last edited by JohnnyBoy928; 07-24-2012 at 01:15 AM.

  • #2
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK guys... I got the line-height to work for the top menu items but now it also lowers the sub menu items as well... and no matter what I do it wont align the sub menu items to its proper position...

    Still have not checked out the centering of the menu... So I will tackle that as well once this is straightened out... and thanks again to anyone who helps me out

    Johnny


    CSS Code:
    Code:
    .horizontalcssmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    
    
    }
    
    /*Top level list items*/
    .horizontalcssmenu ul li{
    	
    	text-align: center;
    position: relative;
    
    display: inline;
    float: left;
    
    
    }
    
    /*Top level menu link items style*/
    .horizontalcssmenu ul li a{
    display: block;
    width: 120px; /*Width of top level menu link items*/
    height: 70px;
    padding: 2px 8px;
    border: 1px solid #202020;
    border-left-width: 0;
    text-decoration: none;
    background: url(../../images/menu/top-nav-bg.gif) center center repeat-x;
    color: black;
    font: bold 13px Tahoma;
    line-height: 130px;
    }
    	
    /*Sub level menu*/
    .horizontalcssmenu ul li ul{
    	height: 25px;
    left: 0;
    top: 0;
    border-top: 1px solid #202020;
    position: absolute;
    display: block;
    visibility: hidden;
    z-index: 100;
    }
    
    /*Sub level menu list items*/
    .horizontalcssmenu ul li ul li{
    
    display: inline;
    float: none;
    height: 25px;
    }
    
    
    /* Sub level menu links style */
    .horizontalcssmenu ul li ul li a{
    width: 160px; /*width of sub menu levels*/
    font-weight: normal;
    padding: 2px 5px;
    background: #e3f1bd;
    border-width: 0 1px 1px 1px;
    height: 25px;
    }
    
    .horizontalcssmenu ul li a:hover{
    	background: url(menubgover.gif) center center repeat-x;
    	text-align: center;
    	vertical-align: bottom;
    }
    
    .horizontalcssmenu ul li ul li a:hover{
    background: #cde686;
    }
    
    .horizontalcssmenu .arrowdiv{
    position: absolute;
    right: 0;
    background: transparent url(menuarrow.gif) no-repeat center left;
    }
    
    * html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
    padding-top: 1em;
    }
    	
    /* Holly Hack for IE \*/
    * html .horizontalcssmenu ul li { float: left; height: 1%; }
    * html .horizontalcssmenu ul li a { height: 1%; }
    /* End */
    HTML Code:
    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=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="csshorizontalmenu.css" />
    
    <script type="text/javascript" src="csshorizontalmenu.js">
    /***********************************************
    
    * CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
    * Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/ 
    * This notice must stay intact for usage
    * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
    
    ***********************************************/
    </script>
    </head>
    
    <body>
    <div class="horizontalcssmenu">
    <ul id="cssmenu1">
    <li style="border-left: 1px solid #202020;"><a href="#">Home</a></li>
    
    <li><a href="#" >Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a>
        <ul>
        <li><a href="#">JS Reference</a></li>
        <li><a href="#">DOM Reference</a></li>
        <li><a href="#">CSS Reference</a></li>
        </ul>
    </li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a>
      <ul>
        <li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
        <li><a href="http://www.codingforums.com">Coding Forums</a></li>
        <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
        <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
        <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
        <li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
      </ul>
    </li>
    </ul>
    <br style="clear: left;" />
    </div>
    
    <p id="iepara">Rest of content here</p>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Sep 2010
    Posts
    63
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by JohnnyBoy928 View Post
    Hello,

    I recently downloaded JAva menu from http://www.javascriptkit.com/script/...stopmenu.shtml

    I altered it around a bit and adjusted the CSS as needed... I am trying to get the txt to be at the bottom of the 70 height background image I have...

    HEre is the CSS as I changed it but the issue is I tried verticle align bottom and line height but did not work for the main top-level items...

    Also as of right now the whole menu is positioned to the left... I would like it to be centered to the page and/or table it is inside of... I am a newbie and appreciate any help...

    Thanks for any help guys...

    HTML CODE:
    Code:
    <div class="horizontalcssmenu">
    <ul id="cssmenu1">
    <li style="border-left: 1px solid #202020;"><a href="#">Home</a></li>
    
    <li><a href="#" >Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a>
        <ul>
        <li><a href="#">JS Reference</a></li>
        <li><a href="#">DOM Reference</a></li>
        <li><a href="#">CSS Reference</a></li>
        </ul>
    </li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a>
      <ul>
        <li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
        <li><a href="http://www.codingforums.com">Coding Forums</a></li>
        <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
        <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
        <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
        <li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
      </ul>
    </li>
    </ul>
    <br style="clear: left;" />
    </div>
    CSS CODE:

    Code:
    /***********************************************
    
    * CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
    * Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/ 
    * This notice must stay intact for usage
    * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
    
    ***********************************************/
    
    .horizontalcssmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    
    
    }
    
    /*Top level list items*/
    .horizontalcssmenu ul li{
    	
    	text-align: center;
    position: relative;
    
    display: inline;
    float: left;
    
    
    }
    
    /*Top level menu link items style*/
    .horizontalcssmenu ul li a{
    
    display: block;
    width: 120px; /*Width of top level menu link items*/
    height: 70px;
    padding: 2px 8px;
    border: 1px solid #202020;
    border-left-width: 0;
    text-decoration: none;
    background: url(../../images/menu/top-nav-bg.gif) center center repeat-x;
    color: black;
    font: bold 13px Tahoma;
    }
    	
    /*Sub level menu*/
    .horizontalcssmenu ul li ul{
    	height: 25px;
    left: 0;
    top: 0;
    border-top: 1px solid #202020;
    position: absolute;
    display: block;
    visibility: hidden;
    z-index: 100;
    }
    
    /*Sub level menu list items*/
    .horizontalcssmenu ul li ul li{
    display: inline;
    float: none;
    height: 25px;
    }
    
    
    /* Sub level menu links style */
    .horizontalcssmenu ul li ul li a{
    width: 160px; /*width of sub menu levels*/
    font-weight: normal;
    padding: 2px 5px;
    background: #e3f1bd;
    border-width: 0 1px 1px 1px;
    height: 25px;
    }
    
    .horizontalcssmenu ul li a:hover{
    	background: url(menubgover.gif) center center repeat-x;
    	text-align: center;
    	vertical-align: bottom;
    }
    
    .horizontalcssmenu ul li ul li a:hover{
    background: #cde686;
    }
    
    .horizontalcssmenu .arrowdiv{
    position: absolute;
    right: 0;
    background: transparent url(menuarrow.gif) no-repeat center left;
    }
    
    * html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
    padding-top: 1em;
    }
    	
    /* Holly Hack for IE \*/
    * html .horizontalcssmenu ul li { float: left; height: 1%; }
    * html .horizontalcssmenu ul li a { height: 1%; }
    /* End */
    First and foremost... javascript is not java and java is not javascript. I know that probably doesn't matter here, but you are using the two interchangeably.

    Now, I don't see any image in your code there, but if the image is separate from the menu, but both contained in the same container (maybe they are both in the footer, or header) try to set the position:relative; for the parent (footer or header.. or whatever it is for you) and then set the position:absolute; bottom:0px; left:0px; for your list(.horizontalcssmenu)

  • #4
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks JohnB21... I tried that but had no luck... When I alter the CSS for the Top Level Items it seems to distort the sub menu items as well...

    and yes... This is a Java script and I just typed Java probably because I was just trying to get this up here quickly... My bad... Didn't mean to offend anyone... lol but still this issue is mainly just a CSS issue alone and has nothing to do with the 'JavaScript' coding... At least I think that is right but I am new to this to be honest... I appreciate any help you or anyone has given or gives me...

    Much rEspect!!!

    Johnny
    Last edited by JohnnyBoy928; 07-25-2012 at 03:40 AM.


  •  

    Posting Permissions

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