I need to fix behavior of the layout when changing height of the previous block also changes the position of the next.
In my example, red block (.jumper) is jumping up when the 1st element in the 2nd row is "hovered". But I need red block to stand still on its position. Like in this case where there was added one element to the second row.
How to do that?
Why in the second case height of the container (main) haven't been changed?
It's because on hover you add a margin of -20%. If you want to have the same thing then either add another of those pictures, add a margin of 20% on the text div or the best solution:
Change the margin: 0 0 20% 0 in the hover to padding with the same values
Ah, found it! :)
Just make the following changes to your code:
.zaglushka table {
position: absolute;
top: 100%;
display: none;
}
.zaglushka:hover {
z-index: 10;
transform: scale(1.2);
}
I knew there was something weird with the scale transformation causing content displacement, it was because of the table that was getting shown/hidden.
I think this solution should do it.
Related
So I am trying to experiment with my CSS code and want to know how to push a box out of view. Let me go into more detail...
I have lined up two boxes side by side using the grid element and would like box one to push box two out of the left margin so it is not visible. (I will be bringing it back into view later with animation). So at the starting point only box one is visible.
Does anyone know how to make this possible without adjusting the widths?
(I could do it by simply adjusting the width of box one but I am looking for different methods.)
Without code of the question, it is hard to answer, but let me try.
To hide element you could use display: none; or visibility: hidden; or opacity: 0;
You could also say to the parent element that it has position: relative;
and to the element that you want to hide, position: absolute; left: 150%; or right: -50%;, depending on which element you would like to hide, left or right respectively. and with javascript or css animation change later its left or right property in order to show it.
There are a lot of ways for you to achieve what you want.
I am not completely sure if I am understanding your question but in css you can use display: none; to hide a block. You can then use display: block; to bring it back into view.
I am also not sure if I understand your question correctly, but you could try it with:
margin-left: -23px
and on the outer element
overflow:hidden
Recently I have been trying to get used to floating divs and aligning them to fit all on one line. However, I have a small problem. In one of the codes I was creating, I noticed I could not get this text to go down at all.
Here is my code:
https://jsfiddle.net/9sjyj0hy/
As you can see, the vs code is here:
<div class="fluidbox">vs.
and the end of the div is after all the other divs. The first way I tried to fix this was adding a line-height, well that only made things worse:
https://jsfiddle.net/9sjyj0hy/3/
As you can see, I edited the fluidbox to have a line-height of 100px, and the result made all divs drop down when I only need the VS text to do that. Any way to fix this?
Wrap your text "vs" inside an element and position that element.
<span class="vs">vs.</span>
.vs {
position : absolute;
margin-top : 40px;
}
I have made it work as you are saying. Have a look at the jsfiddle. The only thing you need to do is to wrap the vs in a span and add these css properties:
.fluidbox span {
position: absolute;
margin-top: 20px;
}
http://jsfiddle.net/inzamamtahir/dcgmtnua/
I have have some dynamically created divs in a fixed width parent div and I would like to have them distributed horizontally. As they are dynamically created so I wont know how many are in the container unless I count them with JS, which I am trying to avoid.
I was originally trying out the "Using inline-block and justified text" technique on this page; however it seems to behave a bit erracticly when there are more children than will fit ( ie when there are two rows ), ( see the second row here ) so I don't think that will work.
*Edit: Actually I just realise now that it's not actually erratic, it IS spacing the second line correctly, but what I want instead (in this particular instance anyway ... ) is for the three red boxes on the second line to take up positions under the first three of the first line, leaving two positions free at the end, rather than spacing them out too ) .... so I think in general this technique is not likely to ever work for me.
Are there any suggestions of other ways to achieve the above. I would rather not have to use JS but if there is no other way then I am open to suggestions.
It's not failing, that's the native behaviour of floats.
If you want more to fit per line, made the container bigger or the boxes narrower.
If you don't want them wrapping at all, add overflow:auto to your container's CSS and you'll get a scroll bar.
You need to make remove the width of your container and add display: inline-block; to allow the dic container to have a width of whatever the content inside has. Also add overflow: auto; in order for the div to size to the amount of generated divs in it
#container {
display: inline-block;
background:olive;
overflow: auto;
height: 180px;
}
Perhaps use relative widths rather than fixed widths for the interal divs....
#testcontainer div {
width: 19%;
height: 30px;
display: inline-block;
background: red;
float: left;
margin: 2px;
}
DEMO
I ended up conceding that I need to use JS. I added id's to the fourth child and then in CSS I was able to remove the margin from the fourth child ( all of this I presume could have been done in CSS using nth child if I hadn't needed IE8 support ).
Edit: Finally ended up getting what I want - http://jsfiddle.net/byronyasgur/kUgBA/14/
I want an HTML element (let say a span or div) to be present on the page, but not take up any space, so I can switch on and off the visibility property, and nothing moves but the span disappears.
for example take a table. I want an 'edit' label to show at each row, when I move the mouse over. But I don't want it to take up space from the table width. I just want it to 'float' beside the table.
Any ideas how to achieve this?
I can not to use javascript. So I'll be very glad if this is possible with CSS only.
I have tried to use float, its not good because no element overlaps with it. (And i do want overlapping.)
I think you're after a CSS Tooltip. Here's an example of one:
http://psacake.com/web/jl.asp
div {
position: absolute;
left: 100px;
top: 100px;
}
This will take the div and position it relative to the first containing element with position other than static. If you have an item with a position of static (the default) or relative, it will affect the document flow and hence the position of other elements. If you set the position to absolute, it takes it out of the document flow and lets you 'drop' it onto the page at whatever pixel position you like. :D
Css position property
Without using javascript i suppose you could use CSS :hover. Like this:
<style type="text/css">
#world { display: none; }
#hello:hover #world { display: block; }
</style>
<div id="hello">
hello
<div id="world">world</div>
</div>
Demo: jsFiddle
The "float" property does not "float" an object over the other elements. It "float"s the element to one side or another.
To put an object over another object, use the z-index property combined with the position property.
z-index: 500;
position: absolute;
left: 50px;
top: 50px;
You can achieve this effect by making an additional column on the edge of your table that is invisible until its row is hovered over. You want to use visibility, not display, to hide and show because visibility maintains the allocated space of the cell.
Demo: http://jsfiddle.net/sCrS6/
You should be able to easily duplicate the code to make it work for your particular page.
This method also has the advantage of working more consistently across web browsers than using positioning, which often starts to have weird in IE behavior after a couple of elements are nested.
Every time I try to use z-index in a webpage to change the order of stacking overlapping divs, I seem to run into a problem where the div that is being forced lower becomes unresponsive to mouse events.
In my current situation I have:
<div class="leftcolumn">
<div class="leftbar"></div> <!-- a 95px wide bar on the left -->
...
<h3>header</h3> <!-- a little header sitting inside the leftbar
...
</div>
By default the h3 isn't showing - it's hidden behind the leftbar. If I add z-index: 5; to the h3, it still doesn't show.
So I add z-index: -1 to the leftbar. Now it's hidden behind the leftcolumn - but at least h3 shows.
So I add z-index: -2 to the leftcolumn. Now everything looks right - but you can't click on anything inside leftcolumn. The mouse cursor doesn't change from an arrow.
I get this exact behaviour in both Chrome and Firefox. IE7 doesn't show the leftbar at all, but at least stuff is clickable.
So, am I misunderstanding z-index, or is there a bug in both FF and Chrome here? Can z-index be effectively used for this kind of stuff, or do I have to find another way?
(I can change the HTML, but the less, the better.)
Ok, 10 seconds later I discover that using only positive z-index'es makes the problem go away. Perhaps negative z-index means the object is below the level that the mouse cursor notionally lives?
Do you know that in order for z-index to work right, you need to position your elements, even if they're simply position: relative (which doesn't change their position any but allows you to use z-index). That way, you should be able to give leftbar a position of, say, 2 and your h3 a position of, say, 3. And your h3 should be on top.
You can use any position type as long as you have one.
For recap:
#leftcolumn { position: absolute; z-index: 1; }
#leftbar { position: relative; z-index: 2; }
h3 { position: relative; z-index: 3; }
Even though the leftcolumn content is visible, the leftbar div is now sitting on top of it, likely with a transparent background. Ideally you would want to modify the HTML so that the H3 resides within the leftbar, but if that is not an option, you may need to apply z-index to specific elements within the leftcolumn in order to pull them above elements in the leftbar.