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

    Question How to change menu padding

    Hi,

    The website im working on is: http://whnpf.perdu.servertrust.com

    I am wondering how to change the width/padding on my menu-drop down so that it is automatic in width.

    For example, the width is currently set at '250px', this is fine for a colum with 3 sub-categories in, say, 'Cases', but for the column 'Batteries' there is far too much wasted space.

    Here is the code im working with in my CSS file

    Code:
    /* ######### Shared basic style for mega drop down menu DIV ######### */
    
    .mega{
    width: 250px;
    padding: 10px;
    position:absolute;
    visibility:hidden;
    border:2px solid black;
    border-top-width:1px;
    background:white;
    -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;
    }
    Any feedback would be greatly appreciated,

    Thanks

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    I don't see that class .mega anywhere in your menu, but what happens if you just delete the width declaration?
    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.

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have deleted the width, it now creates another line for the categories and they are not aligned next to each other.

    Regarding the class what do you mean? I have a code on the website HTML file also which is the javascript.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Frankie's solution worked for me, but you only needed to remove the width on the div id=batteries class="mega solidblocktheme" element.
    Teed

  • #5
    New Coder
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi teedoff

    Sorry I dont understand where that element is, as its not on my coding on the html,

    Heres my coding on the site:

    Code:
        <!-- #################### LIST ITEMS OR ROLLOVER COLORS OR ROLLOVER COLORS POPOUT #################### -->
       	<ul id="solidmenu" class="solidblockmenu">
    <li><a href="/SearchResults.asp?Cat=2619" rel="BATTERIES-MENU">Batteries</a></li>
    <li><a href="/SearchResults.asp?Cat=2620" rel="CHARGERS-MENU">Chargers</a></li>
    <li><a href="/SearchResults.asp?Cat=2621" rel="CASES-MENU">Cases</a></li>
    <li><a href="/SearchResults.asp?Cat=2622" rel="COMPUTING-MENU">Computing</a></li>
    <li><a href="/SearchResults.asp?Cat=2623"rel="GAMING-MENU">Gaming</a></li>
    <li><a href="/SearchResults.asp?Cat=2624" rel="HANDSBLUE-MENU">Handsfree & Bluetooth</a></li>
    <li><a href="/SearchResults.asp?Cat=2625" rel="REPLACEMENT-MENU">Replacement Parts</a></li>
    <li><a href="/SearchResults.asp?Cat=2626" rel="SPEAKERS-MENU">Speakers</a></li>
    <li><a href="/SearchResults.asp?Cat=2600" rel="WHOLESALE-MENU">Wholesale</a></li>
    <li><a href="/SearchResults.asp?Cat=2601" rel="SALE-MENU">Sale</a>
    </ul>
    
    <!--First mega menu (1) -->
    
    <div id="BATTERIES-MENU" class="mega solidblocktheme">
    
    	<div class="column">
    	<ul>
    <ul>
    	<li><b>MODEL</b></a></li>
    	<BR><li><a href="/SearchResults.asp?Cat=2628">iPhone</a></li>
    	<li><a href="">Blackberry</a></li>
            <li><a href="">HTC</a></li>
    	<li><a href="">Nokia</a></li>
            <li><a href="">Samsung</a></li>
    	<li><a href="">Sony Ericsson</a></li>
            <li><a href="">Motorola</a></li>
    	<li><a href="">LG</a></li>
    
    	</ul>
    	</div>
    		
    </div>

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Code:
     <!-- #################### LIST ITEMS OR ROLLOVER COLORS OR ROLLOVER COLORS POPOUT #################### -->
       	<ul id="solidmenu" class="solidblockmenu">
    <li><a href="/SearchResults.asp?Cat=2619" rel="BATTERIES-MENU">Batteries</a></li>
    <li><a href="/SearchResults.asp?Cat=2620" rel="CHARGERS-MENU">Chargers</a></li>
    <li><a href="/SearchResults.asp?Cat=2621" rel="CASES-MENU">Cases</a></li>
    <li><a href="/SearchResults.asp?Cat=2622" rel="COMPUTING-MENU">Computing</a></li>
    <li><a href="/SearchResults.asp?Cat=2623"rel="GAMING-MENU">Gaming</a></li>
    <li><a href="/SearchResults.asp?Cat=2624" rel="HANDSBLUE-MENU">Handsfree & Bluetooth</a></li>
    <li><a href="/SearchResults.asp?Cat=2625" rel="REPLACEMENT-MENU">Replacement Parts</a></li>
    <li><a href="/SearchResults.asp?Cat=2626" rel="SPEAKERS-MENU">Speakers</a></li>
    <li><a href="/SearchResults.asp?Cat=2600" rel="WHOLESALE-MENU">Wholesale</a></li>
    <li><a href="/SearchResults.asp?Cat=2601" rel="SALE-MENU">Sale</a>
    </ul>
    
    <!--First mega menu (1) -->
    
    <div id="BATTERIES-MENU" class="mega solidblocktheme">
    
    	<div class="column">
    	<ul>
    <ul>
    	<li><b>MODEL</b></a></li>
    	<BR><li><a href="/SearchResults.asp?Cat=2628">iPhone</a></li>
    	<li><a href="">Blackberry</a></li>
            <li><a href="">HTC</a></li>
    	<li><a href="">Nokia</a></li>
            <li><a href="">Samsung</a></li>
    	<li><a href="">Sony Ericsson</a></li>
            <li><a href="">Motorola</a></li>
    	<li><a href="">LG</a></li>
    
    	</ul>
    	</div>
    		
    </div>
    Right there in red.

    In firebug, when I select that div element in red, and remove the width: 250px; from it, it seems to work fine. Can you go back to your original page before you removed whatever width you did here in this thread. That way I can test it again. In other words, put back what you changed or removed.
    Teed

  • #7
    New Coder
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, its gona back to how it was with the width element back in the CSS file.

    I still dont understand what you mean to remove the element you have mentioned, as there is nothing there to remove with 'width:250px' ??

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Code:
    ddmegamenu.css (line 71)
    .mega {
        -moz-border-bottom-colors: none;
        -moz-border-image: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: none repeat scroll 0 0 white;
        border-color: black;
        border-right: 2px solid black;
        border-style: solid;
        border-width: 1px 2px 2px;
        box-shadow: 5px 5px 5px #C8C8C8;
        padding: 10px;
        position: absolute;
        visibility: hidden;
        width: 250px;
    }
    When I remove the above in red, only the Batteries drop down is affected it seems.
    Teed

  • #9
    New Coder
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry, I really dont know what your seeing.

    I have a CSS file which I can edit (which is what is in my first post),

    And the coding on the website for the menu's which is in a previous post,

    Neither of which look like the code you have given me and/or mentioned?

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    ddmegamenu.css
    You dont have a css file like above? Maybe it came with your menu script you downloaded??

    In your head section is:

    Code:
    <link rel="stylesheet" type="text/css" href="/v/vspfiles/assets/images/ddmegamenu.css" />
    Teed

  • #11
    New Coder
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yes the ddmegamenu.css is the coding in my first post.

    When I remove the 'width:250px; it then creates a problem for the other menus as they go on a new line as mentioned before.

    Anyone got any ideas other than just removing the width:250?

  • #12
    New Coder
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Still no joy guys, anyone got any ideas yet please?

  • #13
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Quote Originally Posted by myameego View Post
    Still no joy guys, anyone got any ideas yet please?
    Given the complexity of your current code, I would then suggest to start anew from scratch. Which is much, much less difficult than most people think. See the last tutorial on my signature page how easy it is to create a CSS drop-down menu.
    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
    •