...

View Full Version : How to change menu padding



myameego
01-31-2012, 11:58 AM
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


/* ######### 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 :thumbsup:

Frankie
01-31-2012, 02:38 PM
I don't see that class .mega anywhere in your menu, but what happens if you just delete the width declaration?

myameego
01-31-2012, 02:48 PM
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.

teedoff
01-31-2012, 02:58 PM
Frankie's solution worked for me, but you only needed to remove the width on the div id=batteries class="mega solidblocktheme" element.

myameego
01-31-2012, 03:21 PM
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:



<!-- #################### 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>

teedoff
01-31-2012, 03:31 PM
<!-- #################### 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.

myameego
01-31-2012, 03:36 PM
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' ??

teedoff
01-31-2012, 03:42 PM
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.

myameego
01-31-2012, 04:28 PM
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?

teedoff
01-31-2012, 04:31 PM
ddmegamenu.css

You dont have a css file like above? Maybe it came with your menu script you downloaded??

In your head section is:


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

myameego
02-01-2012, 10:08 AM
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?

myameego
02-03-2012, 12:15 PM
Still no joy guys, anyone got any ideas yet please?

Frankie
02-03-2012, 09:27 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum