Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Not Solved Text 'dancing' in menu when mouse hovers
#1
Not Solved
Hello

I made a minor change in my menu (theme MyClean): I replaced the underlined text effect when the mouse hovers on it, by a window with a different tone.

This is the original code:

div#cabecera ul#menu li a:hover,
div#cabecera ul#menu li a:active {
	text-decoration: underline;


and was replaced by this:

div#cabecera ul#menu li a:hover {
     background: #00548d url(images/mycleanorange/tcat_bg_hover.png) repeat-x;
     padding: 7px 5px;
 }

I have the desired effect, but I have a little problem with this. Now when the mouse hovers some menu, that menu and all of them beside the right, are displaced to the right:

[Image: PKCUT.png]

The same effect applies to the far right menu 'Close session', but this menu displaces to the left.

Could someone please help me with this? What do I have to change?

Thanks in advance
Reply
#2
Not Solved
Simply keep the same padding in the default display of the menu item, including also :
padding: 7px 5px;
MyBBCodes.com owner/administrator
Cool " It is not what you know that matters, it is what you do or do not do!"
We have currently 175+ MyBB Exclusive Plugins, 80+ MyBB Compatible MyCodes
Reply
#3
Not Solved
Well, I'm not quite sure what you're talking about, but this is what I have.

Whole menu item code:
div#cabecera ul#menu {
	background: #d46400 url(images/mycleanorange/tcat_bg.png) repeat-x;
              width: 1070px;
	list-style: none;
	margin: 0;
	padding-left: 20px;
}

div#cabecera ul#menu li {
	display: inline-block;
	margin: 6px 20px 6px 0;
}

div#cabecera ul#menu li a:link,
div#cabecera ul#menu li a:visited {
	color: #fff;
	text-decoration: none;
}

div#cabecera ul#menu li a:hover {
     background: #00548d url(images/mycleanorange/tcat_bg_hover.png) repeat-x;
     padding: 7px 5px;
 }


So, I'm trying to make this changes:

Adding padding to the above code.
div#cabecera ul#menu li a:link,
div#cabecera ul#menu li a:visited {
	color: #fff;
	text-decoration: none;
           padding: 7px 5px;
}

div#cabecera ul#menu li a:hover {
     background: #00548d url(images/mycleanorange/tcat_bg_hover.png) repeat-x;
     padding: 7px 5px;
 }


or copying the padding from the upper code.
div#cabecera ul#menu {
	background: #d46400 url(images/mycleanorange/tcat_bg.png) repeat-x;
              width: 1070px;
	list-style: none;
	margin: 0;
	padding-left: 20px;
}

div#cabecera ul#menu li {
	display: inline-block;
	margin: 6px 20px 6px 0;
}

div#cabecera ul#menu li a:link,
div#cabecera ul#menu li a:visited {
	color: #fff;
	text-decoration: none;
}

div#cabecera ul#menu li a:hover {
     background: #00548d url(images/mycleanorange/tcat_bg_hover.png) repeat-x;
     padding-left: 20px;
     padding: 7px 5px;
 }


Any of both attempts did not made any change to the menu
Reply
#4
Not Solved
Try this :
div#cabecera ul#menu {
    background: #d46400 url(images/mycleanorange/tcat_bg.png) repeat-x;
              width: 1070px;
    list-style: none;
    margin: 0;
    padding-left: 20px;
}

div#cabecera ul#menu li {
    display: inline-block;
    margin: 6px 20px 6px 0;
}

div#cabecera ul#menu li a {
     padding: 7px 5px;
}
div#cabecera ul#menu li a:link,
div#cabecera ul#menu li a:visited {
    color: #fff;
    text-decoration: none;
}

div#cabecera ul#menu li a:hover {
     background: #00548d url(images/mycleanorange/tcat_bg_hover.png) repeat-x;
}
MyBBCodes.com owner/administrator
Cool " It is not what you know that matters, it is what you do or do not do!"
We have currently 175+ MyBB Exclusive Plugins, 80+ MyBB Compatible MyCodes
Reply
#5
Not Solved
Thanks a lot Exdiogene, that solved the problem
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)