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 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Arrow Help with menu padding please

    Site: www.ameego.co.uk

    I am having problems with the padding on my drop-down java menu.

    I want the width to automatically vary on the different categories such as 'Batteries' and 'Replacement Parts' for example.

    At the moment, I have a set width, and thats fine for some categories, but others, such as 'Batteries' there is not enough information to fill it and it looks like a ugly blank space.

    I was wondering how I can change the HTML/CSS so that it will vary in size for each individual category.

    Here is my current CSS coding:

    Code:
    /* ######### Shared basic style for mega drop down menu DIV ######### */
    
    .mega{
    width: 450px;
    padding: 10px;
    position:absolute;
    visibility:hidden;
    border:2px solid black;
    border-top-width:1px;
    background:GREY;
    -webkit-box-shadow: 5px 5px 5px #c8c8c8; /*css 3 shadows*/
    -moz-box-shadow: 5px 5px 5px #c8c8c8;
    box-shadow: 5px 5px 5px #c8c8c8;
    }
    
    .mega .column{ /*each link column within a mega menu*/
    float:left;
    width:49%;
    }
    
    .mega a{
    text-decoration:none;
    }
    
    .mega a[rel]:after{ /*add "down.png" to anchor links, or those with a rel attribute */
    content:" " url(down.png);
    }
    
    .mega .column ul{
    margin:0;
    margin-left:5px;
    padding:0;
    list-style:none;
    }
    
    .mega .column ul li{
    margin-bottom:3px;
    }
    
    .mega .ulmenu{ /*style any UL within mega menu with class="ulmenu"*/
    margin:0;
    padding:0;
    border:1px solid gray;
    border-bottom-width:0;
    list-style:none;
    }
    
    .mega .ulmenu a{
    display:block;
    border-bottom:1px solid gray;
    padding:5px;
    }
    
    .mega .ulmenu a:hover{
    background:lightyellow;
    }
    
    }
    li#scroll-tablets a.scroll1:hover, li#scroll-tablets a.scroll2:hover {
    	-moz-border-radius:5px;
    	-webkit-border-radius:5px;
    	border-radius:5px;
    	-moz-box-shadow:0 0 10px #ef5f27;
    	-webkit-box-shadow:0 0 10px #ef5f27;
    	box-shadow:0 0 10px #ef5f27;
    	border: 1px dotted #ef5f27;
    }
    
    /* ######### Style for Solid Block Mega Menu ######### */
    
    .solidblocktheme{ /*additional mega drop down menu style for this theme*/
    border:2px solid #000000;
    padding:0; /*remove default padding inside mega menu*/
    }
    
    .solidblocktheme p, .solidblocktheme .column{
    padding:5px; /*add padding inside p and .column elements within mega menu*/
    width:auto;
    }
    
    .solidblockmenu{
    margin: 0;
    padding: 0;
    float: left;
    font: bold 13px Tahoma;
    width: 100%;
    overflow: hidden;
    margin-bottom: 1em;
    border: 1px solid #625e00;
    border-width: 1px 0;
    background: black url(blockdefault.gif) center center repeat-x;
    }
    
    .solidblockmenu li{
    display: inline;
    }
    
    .solidblockmenu li a{
    float: left;
    color: white;
    padding: 9px 11px;
    text-decoration: none;
    border-right: 1px solid white;
    }
    
    .solidblockmenu li a:visited{
    color: white;
    }
    
    .solidblockmenu li a:hover, .solidblockmenu li a.selected{ /*Selected Tab style*/
    color: white;
    background: transparent url(blockactive.gif) center center repeat-x;
    }

    Thanks in advance

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    I can't dive into your code, but see the last tutorial on my signature page for how to create CSS drop-down menus in no time. The option of having variable widths is explained, too.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.


  •  

    Posting Permissions

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