...

View Full Version : Help with menu padding please



myameego
02-06-2012, 03:01 PM
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:


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

Frankie
02-07-2012, 10:24 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum