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.
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 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.
Per customer request I need to put an image in a form (via cforms in wordpress).
As you really can't display images there, I just abused a label field like this:
01a Contact Information <img style ="height: 155px; width:668px; position:absolute; top:235px; left:617px;" src ="image.jpg" />
Problem is that once I use position: relative it will extend the borders of that fieldset, that's why I chose position: absolute.
Of course the page is centered and this creates problems with screen resolution.
I can't create a div around this as explained here.
See a screenshot
What's the best code to use this?
You don't need to place the position: relative on a element that is the immediate parent of the image you are working with here - it could be any of its parents, such as the form element, or the container for the entire centered page.
As long as the element you place position: relative is part of the page that is centered the AP (absolute positioned) element will take reference from that element, and your img will be centered like the rest of the page.
If you want us to provide alternatives to what you're doing, the you need to tell us clearly what you are trying to do. Putting an image there is as simple as including the tag, but clearly your problem has to do with positioning - so tell us what sort of positioning you need for that image. If I were to list out all possibilities it would be a very long list.
I am new to CSS, so please bear with me. I have this form which I'm trying to style. Everything works fine, except the confirmation label which is in a div. I want some space to be there between div.field, and while this works for all the input elements, it doesn't work for the label message which is at the bottom. I tried increasing margin-top, but to no avail. I would like that element to be positioned in the center.
Using the web-developer addon of Firefox, it shows me that the width and height of div.field of label tag specifically is 284px and 209px respectively. Why is this so, when I haven't set it that way?
You can view the code live at jsfiddle: http://www.jsfiddle.net/yMHJY/
The solution is simple, really. Add a margin-top to the parent of the label element, and add overflow: hidden to the div#contact div .field selector.
However, can I just say that the code can be rewritten for much better efficiency and semantic correctness. For instance, I would contain the last massage in a p tag and not a label in a div. Also, I would have each input element placed in an unordered list ul instead of divs. You also have a lot of unnecessary floats and the br at the end of each input is wholly uneeded. Oh, and unless you are embedding Calluna somehow, don't use it - stick to web safe fonts (and if you are, you still need to suggest an alternative, in the user's browser does not support it, and also to give the browser something to display while the font loads).
Edit
Fixed the load for ya, I should be paid for this kind of stuff :) Just stick to better HTML and CSS next time.
http://www.jsfiddle.net/SNrtA/
To center you could add a parent container
<div id="parent">
<label id="label">Your Message Has Been Sent</label>
</div>
div#parent {
text-align:center;
}
or add an id to your original parent div to target it with above css
with regards to the margin, you seem to have an issue with a float:left being set in the
div#contact div input[type=text] class. You need to clear this as it could be causing you margin problems. Try removing this and amending your styles. Why are you floating the inputs left?
I'm using a background image to add a custom bullet to list items in my content. In the content there are also images floated left. When an image and a list item are next to each other, the bullet appears where it would do if the image wasn't there, but the text wraps around the image.
Here is an example:
http://golf2.test.textmatters.com/content/greenkeepers/turfgrass/turfgrass_speci/cool_season_gra
is there a way to make the bullet appear where is should (i.e. next to the text)?
In Firebug / Firefox (you'll have to check other browsers) I solved your problem adding a:
li {
overflow:hidden;
}
Don't know why exactly, but that magical line solves lots of problems around floated stuff :-)
Edit: Solution if you can change the html slightly
If you have any control over the html, you could perhaps use paragraph tags instead of list items:
p.list_item {
background: transparent url(/++resource++stylesheets/images/bullet.gif) no-repeat scroll left 0.45em;
padding-left: 11px;
}
However, that would kind of change the semantic meaning of the list items...
This is an old topic... but thought I would add how I usually do this in case someone stumbles in here via a search...
If I have an image on the left, and plan to have graphic bulleted unordered list (UL) to the right of it, I place the image statement inside DIV tags, and add a float:left style to that DIV.
Then, I wrap my UL tags inside a DIV, and give that DIV a float:left style as well, causing it to appear to the right of the first DIV.
If I have additional text that I would like to resume UNDER my UL, then I give the second DIV a width that equals the total width of the page/column minus the graphic width - basically, to account for all of the space to the right of the image. That will force continuing text to flow directly under the UL DIV, and if the UL is shorter than the graphic, the text will flow to the right of the graphic and then under the graphic as expected.
If the UL extends lower than the graphic, then the text will just start under the image, as expected.
If you want the text to simply start UNDER the left graphic regardless of the height of the UL, then you could just apply a clear:both style to the ensuing , i.e.
In general this approach works so long as the UL isn't too much taller than the left image, because obviously in this scenario, the list itself isn't going to wrap under the image, leaving whitespace - so to make a long list look right may require some purposeful image sizing, or stacking a couple of images in the first DIV, or whatever other solution you might have.
If you really want to get whacky, I've had a few times where I've used the two DIV method described above, but setting the first DIV to position:relative, and placing the second DIV containing the UL INSIDE the first, with a position:absolute and of course top:??px and right:??px, set of course to absolutely position my UL to the right of the image. It takes the right kind of layout to use this method, obviously...
OK that's all I had to say, hope this makes sense & good luck to whomever!
Try wrapping your list items in a <p> tag, and then give that tag a left margin.
Why do you have div.fig width set to 0 in the html?
<div class="fig" style="width: 0px;"><img src="/images/43_Fescue.jpg" float="0"/></div>
Remove that and the list will float around the image.
Well, it's not the best fix from a stylistic point of view, but floating the images right avoids this problem. Thanks for everyones suggestions
If you want the whole ul to NOT float under the image try adding overflow:hidden to the ul