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
Related
I am trying to use <span> to address some tabular data which I want to position relative to the container edge, the container being a WordPress Toggle.
I have tried this in CSS
.px_update_number {
position: relative;left: 2em;
}
.px_update_date {
position: relative;left: 4em;
}
.px_update_notes {
position: relative;left: 6em;
}
and this in the HTML
<span class="px_update_number">SP1</span><span class="px_update_date">2015.04.16</span>
and the spacing is relative to the "column" before. If I use Absolute in the CSS then alignment is relative to the page edge, not the Toggle. And I need the toggle because there is going to be a ton of data, and at any one time someone is going to be looking only for a very specific bit.
So, am I just implementing this wrong? Or am I barking up an empty tree and I need to reconsider some aspect of what i am trying to do?
OK, so nesting s helped, but I am still having an issue. I would expect this
<span class="px_update_number">#<span class="px_update_date">DATE<span class="px_revitupdate_build">BUILD</span></span></span>
<span class="px_update_number">FCS<span class="px_update_date">2016.04.18<span class="px_revitupdate_build">20160225_1515</span></span></span>
to produce a header row with good alignment. But instead the alignments are off. Despite now getting multiple rows of the actual data to seemingly work right.
And, not sure I have it right yet, as this
<span class="px_update_number">R2<span class="px_update_date">2015.10.22<span class="px_revitupdate_build">20151007_0715</span><span class="px_revitupdate_notes">All Updates after R2 are subscription only</span></span></span>
<span class="px_update_number"><s>1</s><span class="px_update_date">2015.12.17<span class="px_revitupdate_build">20151209_0715<span class="px_revitupdate_notes">Expired</span></span></span></span>
still shows a misalignment in the second column, as if it's being aligned to the right side of the first column, not the left, so when the number of characters in the first column changes it throws everything off.
link to MCVE
span tags are inline by default. But left settings (as well as top, bottom and right) only affect block elements (which also need to have a defined position other than static). So in your CSS those left settings do nothing.
As a quick fix you can add display: inline-block to the CSS classes you posted above.
ADDED AFTER COMMENT:
Here's a codepen:
http://codepen.io/anon/pen/YWEEbg
position: relative; plus a left setting will move the element by the given value. But the space kept free for the element is not moved. So if you give your first element left: 2em; and the second element also left: 2em;, it will look as if there is no space between them.
So if you want the second element to be 4em right of the first one, you actually have to give it left: 6em; (as in my codepen)
2nd ADDITION:
Here http://codepen.io/anon/pen/rLYYXz I used margin-leftinstead of left, which does what you probably want: It creates space between the elements, without the complication of the left setting as described above.
3rd ADDITION:
Cange the position: relative to absolute and again use left (not margin-left). Now the distances are measured in relation to the parent elements upper left corner, so the second element will stay at the same position regardless of the contents of the first one:
http://codepen.io/anon/pen/grXopb
If all that is in a parent container, it will have to have `position: relative:
http://codepen.io/anon/pen/zBPpqa
You should use table tag, or grid layout to solve your problem.
So your layout would relate to column width, but not to left element.
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.
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.