I am making a webpage with an image at center and i wanted a password field(textbox on the image) like this.
I used Some CSS3 animations in the image so is there's any way that i could place my text box on the image without affecting any css animation??
As he said in the comment sample code would be nice, however you could try using absolute position in your css for the image this will allow overlapping, I cannot give any specific code but it will be similar to what is below.
{
position:absolute;
}
in the above case use :
position:absolute
what it does is simply disassociates the elements from is siblings and can be placed anywhere holding a reference to its parents.
Means if you want to position the element , use left/right of its parent.
Related
[Highcharts]
Hello, is there a way to display the tooltip outside the tags? Like to make it "float" outside the container so that it doesn't get cutoff like below.
Thanks in advance.
Here's an example jsFiddle you can use to reproduce the issue. (Try hovering over the boxplot)
http://jsfiddle.net/af3g18mo/ Code
In your fiddle i can figure out the Problem:
If you go up one cascade in your stylesheet you can see that your paths and stuff is within a tag.
The tag has the fix height of 65px and no overflow attributes - but one path before there is the overflow:hidden. This is why the highchart tooltips and everything is just cut off.
You can change your height dynamically to for example 40% what doesn't really fix the problem if you have longer contents in your tooltip. but you can give a "overflow:visible;" to your <svg> and overwrite the "overflow:hidden" in your ".highcharts-container" with visible - so all the contents like your tooltips that have more than 65 px height are displayed.
You can see the solution here:
be careful changing these things, but in your example i couldn't see any bad reactions to this change. In case you have to give your css the whole path to not change it globally.
http://jsfiddle.net/af3g18mo/2/
So the concrete fixing for your css could be:
svg{
overflow:visible;
}
.highcharts-container{
overflow:visible !important;
}
I'm trying to add text within the timeline on this page: http://dev.greenthumbweather.com/frost_date.php?location=medford,%20or&lat=42.33&lng=-122.88&temp=36
The CSS I'm referencing in the script is: timeline_custom.css
I've tried adding position: relative and z-indexing to keep the text in front, but it's still behind the timeline.
I want to place the text within the timeline frame but have it in front. There are some other CSS rules going on with the timeline, with files timeline-2.5.0/timeline.css, so perhaps there's some conflict, but I haven't been able to locate it.
Any help would be greatly appreciated. Thanks!
Shad
Your "timeline" widget seems to be hiding your "info" element after it's done loading.
I would suggest you do the following:
1) Take the "timeline_info" div out of the "timeline" div.
2) Place it right before the "mytimeline" div.
3) Create a container div for "timeline_info" and "mytimeline" only.
4) In your CSS:
#timeline_info {
position:absolute;
top:10px;
left:10px;
font-size:12px;
}
Set "top" and "left" (or "right" and "bottom" if you prefer) depending on where you want it placed.
The order of the elements in the new container (with "timeline_info" coming first in the DOM) should automatically make it so that your text should appear "ahead" of the "mytimeline" div if and when they overlap, so you should probably get rid of the "z-index" rule.
I've got the following JS Fiddle to demonstrate what I'm trying to accomplish:
http://jsfiddle.net/sVKU8/2/
1) I assume this first part is easy - Is there a way to update the parent label class to automatically have it's width set based on the total width of the two child <div>s so the border only wraps around the green and red <div>s? I thought setting width: auto was supposed to do that, but my CSS skills are apparently lacking.
2) What I'd like to accomplish next would be to remove the width attribute from my label-text class and have the width set (or grow automatically, if possible) whenever I apply text to that <div> via JavaScript without text wrapping (i.e. keeping the original height of the label class).
I wasn't sure if I needed to try to calculate the width based on the actual text, or if there is a way to just apply the text with a width setting that will allow it to grow.
Any input or suggestions would be greatly appreciated!
Add this property to your css :
.based-on-text{
display: inline-block;
}
This way, the div will act like a block but will have exactly the width it needs instead of taking the whole parent level width !
click here
CSS alternative without additional JS using traditional floating elements approach
This fiddle (Click HERE) shows using inline-block on the div text-label and a little JS to set the width on the outer box with the border.
This is the javascript. Pretty ugly. There's probably a better way:
$(".label").css("width",
parseFloat( $(".label-image").css("width"))
+ parseFloat( $(".label-text").css("width"))
);
I give my links a background color to make it stand out, the problem is that it will also apply to links which have images as child instead of text. The result is that the image has a small background at the bottom. (see: http://blog.cmstutorials.org/reviews/general/featured-tutorial-of-the-week-05-feb-2011 )
How do i removed the background of links when it has an img as a child? I though that someting like this would work:
.featured_tutorial img < a
CSS does not support a parent selector.
You have to use classes like a.this_link_contanis_img{ /*override background*/ }
Or maybe you could set a new property to the img. This could hide the link's background.
.featured_tutorial img{ /*override background*/ }
Edit: Ok, that wont work in your case..
Cascading Style Sheets don't allow accessing elements "backwards". You can only access children of an element, not its parents.
It has background leaking at the bottom because images are inline level elements by default and are positioned at the baseline of the text line they are placed on thus there is gap between baseline and descent line that gets the color leak. You can get rid of it in two ways. Set css for:
a img { display: block; }
or if you want the to stay displayed as inline
a img { vertical-align: bottom }
this should fix your problem as it will align the image to the descent line of the text line the image is placed on when in inline mode.
Hope it helps,
T.
As mentioned there is no CSS fix but as you're already using jQuery this is the only way i can think of doing it
http://jsfiddle.net/vrqCV/
jQuery(document).ready(function() {
jQuery("a:not(:has(img))").addClass("bg");
});
As has already been pointed out, CSS doesn't have a way of looking "up" the DOM tree. It basically comes down to performance considerations. (Here's one explanation.)
But if you're not averse to the sometimes necessary evil of tacking this sort of thing on with Javascript, jQuery has a :parent selector.
Like alert bar of stackoverflow here.
It should not be position:fixed,because it's not supported by all browsers.
Absolutely,neither will position:absolute do.
You could always use EMCAscript or one of its forms (JScript, JavaScript) to calculate the position of the viewport and set the position equal to that.
function positionView()
{
return (window.pageYOffset) ?
window.pageYOffset :
(document.documentElement.scrollTop) ?
document.documentElement.scrollTop :
document.body.scrollTop;
}
function setPosition(object)
{
object.style.top = positionView() + "px";
}
Then just pass in the DIV object you want to use, with document.getElementById.
I'd use position: fixed;. Many people still use IE6, though, which does not support it.
Put the div under the body tag, give it position absolute, top:0, left:0
And if you want it to push the content, just put it there without the CSS I gave you.
Its very simple step if you are using any class in css apply one more property z-index = 1;
it will make that div to always on top, if that div is relative to its parent div.
Make sure the element is directly nested under the body tag, use css with absolute position and top:0;
By the way, fixed is used by a large majority of the browsers.
Only fixed positioning does this, unless you want to use javascript. Which you don't, because it's an ugly way of doing it.
Just do it like SO does it. Use the "notifycontainer" and populate it with InnerHTML from JavaScript when you need to. Since it's a relative positioning, when you rewrite the InnerHTML the page rerenders based on the contents of the div as they are at that moment. Same deal when you want to clear the alert, you just rewrite the InnerHTML. You don't even need to write animation code. The way browsers render now, the animation will be automagical.