Please how to keep div width after hover ?
this is HTML Code
<div>
Refining
Products
Process
Quality Assurance
Safety
</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
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
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.
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.
Related
I'm trying to scroll some single-line labels in a single-line fixed-width container.
What I've tried so far is:
Create a container with fixed dimensions.
Place a scrollable container inside and attach the animation.
Place the labels.
The animation partially works, but the scrolling doesn't go all the way to what is configured (translateX(-100%)).
The overflowing part (green color in codepen) that exceeds the fixed container width is ignored.
I've tried various display and flex field combinations, but noting.
Here is a codepen sample.
https://codepen.io/efthymiosks/pen/QWQGVGg
The issue is that 100% is the size of the element, not the content. What I mean by this is because the content overflows the element, 100% only refers to the visible width of the container.
You need to change 100% to something else such as 150%. Unfortunately, this means that you need to know the width of the contents before. The only other way that I know of is using JavaScript to calculate the width of the contents.
Codepen
I know I can give a {max-height} and {overflow: auto}. But I want the max-height to be dynamic and not fixed.
Lets say that we have 2 divs on a page, if div#1 is hidden the max-height of div#2 should increase so that it occupies the maximum area before scrolling, and scrolls only when it goes out of the viewport.
Sample jsbin: http://jsbin.com/voworuveqe/edit?html,css,js,output
Edit
Please CSS solutions only. No JS. Thank you!
you should use a method like this one:
function('click',{
if(hide==true)
hide =false;
Document.getElementById(/*element*/).style="{max-height:"/*someheight*/"}"
else
hide =true
Document.getElementById(/*element*/).style="{max-height:"/*someotherheight*/"}"});
I've written up a quick example using hover instead of hidden and height instead of max-height but it should work fairly similar if you change it.
https://jsfiddle.net/6pdu6tvz/4/
The only restriction is that the element that you want to change must appear after the element you want to hide.
You cannot change elements before on hover as answered here: How to style the parent element when hovering a child element?. I would recommend using Javascript if you can (although you specified in your question not to).
I have a mentor that told me that instead of editing the height or width of the "li" tag that I should just edit the padding or margin of its content like lets say the "a" tag or "p" tag until i reached the desired size. Is it true? is it really not advisable? Thank you in advance that can clear this one up.
Looking at that picture, I think they meant two things:
You must make sure that the clickable area (the size of the a element) is the same as the area that look clickable. If your li element has a background color but the a element inside doesn't cover it completely, it's really annoying because you have visible areas that aren't clickable.
If you use padding, the items will adjust their size depending on the text size, e.g. if somebody decides to put in more text or the font size changes, the element height will adjust accordingly.
Is there a way to make an element not contribute to parent overflow, but keep it visible? Let me clarify
There is a watermark-like logo to be applied to a page in the manner below. It is supposed to be positioned partly outside the main content (dashed blue line)
I'm not aware of the option to set an element background in such a manner that it would persist as the browser window is resized horizontally, so I've just added a <div> with the logo as its background and position:absolute with the necessary offset relative to main content container.
Previously, the page would not get a horizontal scrollbar as long as the browser was wider than W1. Now, with an additional "watermark" element added outside of the main content box, the scrollbar would appear whenever the browser is narrower than W2
Is there something obvious I'm missing? A background setting, or possibly a neat margin workaround/
Update:
I've added a rough jsfiddle to illustrate the issue
Unfortunately, just because you nested the "watermark" div and positioned it absolutely doesn't make it outside of the document. If you put it outside of the document, the page will scroll (as you see).
To me, the first solution I think of is to move the watermark outside of the "content" div and apply the watermark to its parent container. I'm guessing you haven't done that because you need it to be relative to the "content" div, but it's something to try.
Also, the reason it scrolls is because the document has been overflow. The quick fix, yet not recommended, is to use "overflow-x: hidden;" on the parent container of the "content" div.
It's harder to give you a solution since you've stripped the rest of your HTML, and some "fixes" may not be as applicable if your structure is complicated in certain ways.
Remember that the width of your elements is greater than the actual "width" it includes padding & margins, if you have padding on your div reduce the "width" by the equivalent amount.
does that make sense? if you post the actual css & html it might be easier to give you a more detailed answer
additionally could you not assign the image as the background of the actual body element and set it to centered?
I've had a play with the code and come up with a possible solution for you.
set
body{overflow-x:hidden;}
then add
#media all and (max-width: 400px)
{
body{overflow-x:auto; }
}
as soon as your screen is smaller than 400px (the width of the div) your overflow:hidden will be overridden and you'll be given you scroll bars.
at this point you may also want to reduce the width of your watermark.
Here is my site, first of all.
You'll notice that underneath the divider bar in the middle of the page, there are three columns, one with a form, one with text, one with links.
Now, resize the window to slightly smaller, and the right div will drop down to the next line.
Is there anyway to just not display that? So, the divs will adjust (I have a liquid layout) up to the point where they won't fit, then, instead of wrapping the div down to the next line, it just won't be displayed?
You can also achieve that with CSS only.
Just assign the following CSS attributes to #row4:
#row4 {
min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
overflow:hidden;
}
This differs slightly from your intended solution, since the right box will stay partly visible when sizing down the window and will not immediately disappear completely.
Please be aware that min-width won't work in IE6. However, there are several ways to emulate the min-width property, if you need to support old IEs:
http://www.thecssninja.com/xhtml/ie6-min-width-solutions
You can give them a wrapper div with a min-width set and force it to use a horizontal scrollbar if it gets too small. The nice thing about a wrapper div is you can give it a max-width as well and keep things from getting wonky on super huge monitors.
I'm not a fan of horizontal scrollbars, but it beats completely removing content.
Ok here is what you should do
Wrap all three floated division on a parent div, something like this
<div id="parent">
<div class="form">......</div>
<div class="text">......</div>
<div class="links">.....</div>
</div>
Now to solve your problem give a fixed height to the parent div like
#parent { height:400px;clear:both; }
You would have to use Javascript to get the width of the viewport, then change the display property of the div that is wrapping to display:none so that it doesn't show up when the browser width is too small.