On this page, there's a menu with an automatically generated submenu under 'life'. There are some problems with the submenu (it flickers and changes size - you'll see if you scroll over it). Somehow I need to override the css that it's currently reading and make it uniform.
Any suggestions?
Thanks - Tara
Starting at line 744 of /wp-content/themes/primus/primus/style.css, you have this CSS:
#catmenu li li a:hover, #catmenu li li a:active {
background:#fff ;
width: 150px;
float: none;
margin: 0px;
padding: 0px 10px 0px 10px;
color:#ff9999;
}
Change the padding to match what it is before hover:
padding: 7px 10px
It because you have set:
padding: 7px 10px 7px 10px;
on the a:link. And then you set padding to 0, on a:hover.
Try set the same padding values for both behaviors.
Related
On this site: https://new.fbhsfoundation.com/give-now/ I have figured out how to add a custom style for a single nav but I want to make the background surround the text (I.e. more padding left and right of the yellow color) but I can't figure it out.
This is the code I tried and then applied the custom CSS to the menu item but it only did the background color not the padding:
.yellow li.menu-item a { padding 5px; }
Find and remove the padding property for .menu li and add a padding style for the .yellow class.
.menu li{
min-width: 36px;
margin: 0 12px;
/*padding: 0*/
}
.yellow{
background-color: #ffe400;
padding: 0 20px;
}
or better still, use the id of the list element(li) to add the padding style.
li#menu-item-46{
padding: 0 10px;
}
Use 12 pixels of padding instead of the 12px margin.
.menu li {
min-width: 36px;
margin: 0px;
padding: 0px 12px;
}
Hello everyone my menu bar can't fit into my <div> area at different browser. I have checked with Opera and Chrome it looks fine but with Explorer and Firefox my menu can't fit.
And my menu is in this <div> tag:
.page {
width: 964px;
margin-left: auto;
margin-right: auto;
background-image:url(../images2/images/orta_alan_bg_GOLGE.png);
background-repeat:repeat-y;
}
Here is my menu:
ul#menu {
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: center;
}
ul#menu li {
display: inline;
list-style: none;
font-family: 'Museo300Regular';
font-size:17px;
font-style:normal;
}
ul#menu li a
{
background-image:url(../../images2/images/menu_bg_normal.jpg);
background-repeat: repeat;
padding: 5px 19px 5px;
font-weight: normal;
text-decoration: none;
line-height: 2.8em;
background-color: #e8eef4;
color: #FEFEFF;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
cursor:pointer;
}
So what is the problem why it can't fit into with Explorer and Firefox?
I attach an image you can understand what I mean
Here is the Chrome and Opera it can fit
Text will always take up different space in different browsers (and even in the same browser on different computers).
So, if you want your menu to fit exactly, you can't base the width of the buttons directly on the text in them. Either make all buttons the same width, or specify an exact width for each button.
Alternatively, resort to using a table, which can divide the space between the cells based on their content.
You can achieve it by resetting your CSS code. Then use ul li to style your list items.
If needed, you can use conditional comments to load your stylesheet for IE with some sort of bug fixes.
But normally i can achieve 100% exact result in all browsers on li element, so it's proved.
I am working with Drupal 7, and I made a custom drop down menu using css. Everything is displaying fine, but the drop down does not change position when the screen moves.
Here are some screenshots:
Here is the css:
**/*---------VISITORS SUBMENU---------*/
#block-menu-menu-visitors .content ul.menu{
position: relative;
margin-left: 0 auto;
margin-right: 0 auto;
}**
#block-menu-menu-visitors .content ul.menu li{
padding: 2px 15px 2px 15px;
list-style-type: none;
display: inline-block;
background-color: #ffff90;
}
#block-menu-menu-visitors .content ul.menu li:hover{
padding: 2px 15px 2px 15px;
display: inline-block;
background-color: #ffffaa;
}
Any ideas on how to get the position to be the same relative to the screen size?
So I figured out the problem. In my php, the div that I had placed my submenu in was floating by itself. My solution was to wrap it in the same div that the main menu was, and it worked out perfectly. There was never a problem with writing of the css or html, just a location issue. Consider this issue solved.
I am lost at how can I fix this problem ... Chrome is the top 1 and FireFox below
CSS looks like
#mainnav ul {
background: #a51c10;
padding: 5px 0;
margin: 0;
-moz-box-shadow: 0 2px 6px rgba(60,60,60,0.8);
-webkit-box-shadow: 0 2px 6px rgba(60,60,60,0.8);
box-shadow: 0 2px 6px rgba(60,60,60,0.8);
position: relative;
z-index: 2;
}
#mainnav li {
display: inline;
padding: 0;
margin: 0 2px;
position: relative;
}
#mainnav a:link, #mainnav a:visited {
padding: 4px 10px 5px;
font-size: 16px;
line-height: 1em;
font-weight: bold;
color: #a29061;
text-decoration: none;
}
UPDATE
it looks alittle different somehow from the working site (I dont think I can post a link tho) but copy & paste CSS
http://jsfiddle.net/aM8rn/4/
it appears I should put line-height: 1em in the #mainnav ul
http://jsfiddle.net/aM8rn/5/
In order to avoid this sort of problems is always a good idea to reset the default style: http://meyerweb.com/eric/tools/css/reset/
putting line-height on the #main nav ul is making the link overlap the outer box for me..
I'd suggest not using line-height at all. You have px padding on your links to try to get them to match the outer ul's line height, there might always be 1px differences if you try to do that.
instead I tried to let the outer container expand as required with the links themselves, in order to do this they had to be display: block; and for your inline li elements to remain side-by-side with blocks inside them, they had to become inline-blocks.
with this fiddle every px can be controlled with the padding on the a's - http://jsfiddle.net/g5AXG/1/
I know you probably don't want a top bottom "border" but I marked where how it can be removed.. the negative wordspacing is because inline-blocks, the li's, will naturally have about 3-4px between them (like words) I didn't think it made a difference to the aesthetics of your menu if it was there or not, but put it in anyway
I have a horizontal menu. I want to have a border around the menu (not the entire-row, only the space menu is covering). When I put border on ul, it covers the entire row, when I put border on li, it has border between menu items as well.
<ul id="menu" style = "text-align:left;">
<li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...</li>
</ul>
Here is the CSS:
ul#menu
{
padding: 0 0 0px;
position: relative;
margin: 0 0 0;
text-align: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul#menu li
{
display: inline;
list-style: none;
}
ul#menu li a
{
padding: 0px 0px;
margin-right:20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
}
Kill display: inline on the list items and float them left instead. Float the container as well, which will ensure that it's only as wiide as its contents. Finally, set overflow: hidden on the ul.
Declare ul with display:inline-block. It'll cause ul to take only space necessary to display its contents, not 100% of it.
An example
Use display: inline-block on the ul and add the border to the ul.
If you need IE6 compatibility:
#menu li {
border-top: 1px solid #000;
border-bottom: 1px solid #00;
}
You might be able to use li:first-child (I can't remember, and don't have a copy of IE6 to test with) to apply:
#menu li:first-child {
border-left: 1px solid #000;
}
But you'll likely have to add either a class-name, or id, to the first and last li elements to give them the appropriate border-left and border-right.