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).
Related
I want to create a button/link that is centered in the content area of a webpage. Because it's a button, and not just a link, I'm adding some padding and background colour to it.
The link is centered horizontally, but the padding seems to expand outside the line-height of the parent element, causing it to overlap with previous/next elements. See: http://fths.convoke.info/what-can-i-do/
I tried creating a fiddle, but wasn't seeing the same issue: http://jsfiddle.net/convoke/g9wu6ws9/
So what am I missing? Conversely, is there a better way to center a link like this? I don't like using margin: auto because it requires you specify the width. Ideally the width would be dynamic, so if the text on the button was longer or shorter, it would remain centered.
In this case, the answer I needed came from user #CBroe in the comments of my original question. He suggested using display:inline-block and that worked like a charm.
Still unsure as to why I was getting different results on the fiddle vs the actual website...
I got the following issue:
I'm trying to display a few <div.content> with content in it. Limited in size to a <div.holder> as parent with overflow set, so that you can scroll down to see all <div.content>. The <div.content> are overlapping the <div.holder> for styling purpose. And everything is wrapped in a <div.container>.
But the <div.content> won't display over the <div.holder> element with z-index or anything. It's rendered inside the <div.holder> element, without scrollbar it's rendered outside, like i want.
How can i get the Scrollbar and that the <div.content> will overlap its parent <div.holder>?
Here's the Fiddle for the issue. Thank you.
EDIT:
Trying to accomplish this:
For this styling purpose:
Is this even possible? I'm not bound to just use HTML&CSS, just need that thing start working.
Z-index will only work on elements with position. So its not doing anything to .foo
http://www.w3schools.com/cssref/pr_pos_z-index.asp
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.
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.
What I want to do is have a way to horizontally scroll through the icons on the top bar. No matter how I try to implement overflow I cannot get it to work. Here is a link to the page. Link no longer exists.
Note: that the scrollbar shall not cover the background image at all. It should be immediately below.
You need to set the width of that header div to be wider (width:2000px;). If you want a dynamic width (you dont know how many boxes will be in there) then you'll have to calculate the width with javascript (or serverside code like PHP).
Giving the .browser div a width of 2000px does the trick... then adjust the height of your divs to be tall enough to show the whole icon and name.
Let me know if that makes sense...