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.
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
I currently have an animated image as the background of a website with HTML elements in front of it. Is it possible to replace that image with JSON geometry and still have my html elements in front of the geometry?
I've (unsuccessfully) looked into DOM Elements in ThreeJS. Tried putting my JSON in a div and controlling it with CSS..... That being said - is it possible to "style" or add JSON/js to a css?
Thanks to anyone that can help!!!
Yes, you can position the element you introduce that will contain your scene absolutely, stretch it across the screen and then add the rest of your elements in the DOM:
.scene {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
}
If you place it as the first child in the body, it will ensure that the rest of the content has a higher z-index, otherwise you will manually have to assign the value to the elements to ensure the scene isn't obfuscating the content.
Since the scene element will adjust to the screen size, you'll have to keep track when window resizes and ensure you update the scene dimensions with it, as one of the commenters pointed out.
I'm having trouble with the order of layered DIV elements. I have a DIV .lens-flare that's at the bottom of the hierarchy in HTML. Yet when I transform: translate the position so it encompasses the entire parent DIV, it shows above elements that are above it in the hierarchy.
So I tried setting z-indexes, and then turned my translate into translate3d. Still I'm not able to get .lens-flare underneath .top-nav-bar, .nav-bar, or .cta.
Currently I have a pointer-events: none applied so I can at least click on the things underneath. But how can i actually move the .lens-flare layer under everything else successfully?
Here's my CodePen for the project
Elements rendered later are considered being closer to the screen than the elements rendered before them.
Z-index is the answer if you want to change this, you just need to remember z-index works only with elements that are positioned.
.lens-flare
position: relative
z-index: 1
.nav-bar, .top-nav-bar, .cta
position: relative
z-index: 2
Your corrected codepen: http://codepen.io/sEvher/pen/doyWoW
I have a horizontal navigation <ul>, and in one of the <li>s I have a <div> element that I was conducting some positioning experiments with.
Along the way I noticed that I could position the inner div inside of the li using
li div {
position: absolute;
top: inherit;
left: inherit;
}
even though I have assigned no top or left properties to the li! Even in Firefox "Computed Styles" inspector. How exactly is it inheriting properties that don't exist? Are my browsers (newest FF & Chrome) just implicitly positioning it, or do the top: and left: properties always exist invisibly?
Also I'm guessing IE<8 will cough this back up...
Here's a fiddle: http://jsfiddle.net/xAk97/
If you have any value with inherit the element is gonna take the same value as his parent. If you don't specify a value in your CSS the inherited value is the default one for that property.
In this case if top isn't defined the element will take that value as auto.
If you check the console in this Fiddle you can check what property is been assigned.
Generally speaking, HTML layout is flow-based. Each element gets positioned after the one before it, either to the right of it or beneath it. There are plenty of exceptions, of course, that you can get by playing with styles, but even then, if you change the order of something, most things "flow" around it and make room for it.
But occasionally I see things that behave very differently, such as pages coming up with "dialog boxes" that float in the middle of the screen, that aren't constrained by the dimensions of the div they're parented by and don't displace other layout elements around them.
I'm trying to figure out a way to do something similar, but not quite the same. I've got a table that I'm using to display a grid (yes, actually using tables correctly) and I'd like to place an image on top of one of the grid cells. I can't put it in the cell, because it's larger than the cell and I don't want to stretch my grid out, but I want it to always display at the same position relative to the grid, even if the browser window scrolls or is resized.
I figure there has to be some way that I can do this. If I put an ID or Class on one of the <TD> cells, how do I create an <Image> that is not part of the <TD> or even the <TABLE> that it belongs to, but will always position itself over the top of that <TD> cell without displacing anything or affecting its layout?
To expand on both CJGreen and Napolux's suggestions, you can still place the image in the table cell, but position it absolutely.
[Edit] Since defining the position of table cells is supposedly illegal (therefore ignored by Firefox), you can wrap the content of each <td> in a <div> element (preferably with JS so you don't have to make massive changes) and then set the <div> position to relative:
CSS:
table td > div {
position: relative;
}
table td > div img {
position: absolute;
z-index: 999;
}
JS:
$(document).ready(function() {
$("td").wrapInner('<div />');
});
See the (updated) fiddle here - http://jsfiddle.net/teddyrised/qyu3g/
If you use
table {position:relative;}
then you can use:
table img {
position:absolute;
top: #px;
left: #px;
}
This will offset the image to a particular location within the containing table and take it out of the flow of the rest of the table around it.
If I understand it correctly you need to use offset properties together with position:absolute.
The absolute position takes your image out of the flow, the offset can give you the position of the element you want to overlay (the TD in your question).
Having the offset (px from left and top of the page for the TD) you can the move the image to the correct position.
Look here: http://jsfiddle.net/jrUsM/
jQuery documentation explains it very well.