0

Please how to keep div width after hover ?

this is HTML Code

<div>
<a href="/kcms1/The-Plant/Refining.aspx" style="white-space:nowrap; position:relative;"> Refining</a>
<a href="/kcms1/The-Plant/Products.aspx" style="white-space:nowrap; position:relative;"> Products</a>
<a href="/kcms1/The-Plant/Process.aspx" style="white-space:nowrap; position:relative;"> Process</a>
<a href="/kcms1/The-Plant/Quality-Assurance.aspx" style="white-space:nowrap; position:relative;"> Quality Assurance</a>
<a href="/kcms1/The-Plant/Safety.aspx" style="white-space:nowrap; position:relative;"> Safety</a>
</div>

========

please this is my main menu and the width is not fixed, when mouse hover on (Quality Assurance) main div is increased width approximately 2 pixels.

and i want the hover is Bold.

i am used letter-spacing but not good :(

you can see my problem here enter image description here

Vinay
  • 6,891
  • 4
  • 32
  • 50
Bakir Odeh
  • 23
  • 4

3 Answers3

1

Currently, the menu's width is decided by the widest element.

"Saudization and Training" is currently the widest element, and as such, when it is in bold type the extra width is accommodated by extending the menu's width. This is because bold text is wider than standard text.

Is there a reason why you can't fix the width of your menu?

If you can't fix the width of the menu - you might choose a different way of highlighting the selected element on hover (underline, being a common choice).

See related discussion here:

Inline elements shifting when made bold on hover

Community
  • 1
  • 1
DaveR
  • 2,355
  • 1
  • 19
  • 36
  • yes I want the menu decided by the widest element, and i cant use (Fixed width) becuase in the menu some elements from only word :( – Bakir Odeh Aug 20 '12 at 10:24
  • "some elements from only word" - I don't understand this I'm afraid. What do you mean? – DaveR Aug 20 '12 at 10:27
  • but when i want to fixed the width fox example 200px the space will differ in left after dotes and right space – Bakir Odeh Aug 20 '12 at 10:54
0

Try setting div style overflow with:

overflow: hidden;

So:

<div style="overflow:hidden;width:250px;height:200px;">
    content here

</div>

You will need to set a width if you use this i believe so also add the width (you can set your own width to what you require) same for height.

Sir
  • 8,135
  • 17
  • 83
  • 146
  • thanks Dave but i can't use (width:250px;) because in the menu some elements from 1 word Like this (About) (Contact) and i want the left space like right space, you can see that in the image thank you for reply :) – Bakir Odeh Aug 20 '12 at 22:25
  • Not sure i follow you there? The reason its expanding though is because the font becomes bold which adds width by a small pixel amount. One solution is remove the bold or reduce font size by 1 or 2 px. Given the menu seems fixed width im not sure why you cannot add a fixed width ? – Sir Aug 22 '12 at 20:32
0

Another idea would be to use some JavaScript to catch the mouseenter event on the menu div, get the outerWidth() of the div, then set the max-width of the menu div. The hover will not expand the box with this. 

var width = $this.outerWidth();
$(this).css({"max-width": width+"px"});

Just make sure overflow on the menu items is set to visible: 

$("menu items").css({overflow: "visible"});

Also best to clear max-width on mouseleave.

This worked great for me.

jomille
  • 405
  • 12
  • 24