I'm trying to get the black x mark to display on the same line as the second green rectangle. I tried using display: inline, but it still won't show up on the same line. Can someone help please?
http://jsfiddle.net/a4Cg4/1/
In the HTML code, moving the mark inside the element where it'll float is mandatory, if I understood what you want to achieve.
Then you use deprecated attribute align="center" and it complicates everything when trying to position the mark... Nonetheless here's a fiddle: http://jsfiddle.net/PhilippeVay/a4Cg4/5/
(modified CSS is at the top, first and second rule)
Unrelated to your problem but still: every HTML img needs an alt attribute, even if it's empty for decorative images (or when context like surrounding text already says what the image represent). I added it to the HTML code.
Related
I can't seem to get my CSS to format my html correctly.
This is what I've got currently, it has copy/paste ability on the blue text, but the formatting is horrible:
http://jsfiddle.net/xa3apsdc/29/
This is what I'm trying to get it to look like. The black text is all aligned and of uniform size, I had to abandon this approach because the blue text wasn't selectable (can't copy/paste it) - it was generated content which isn't in the DOM.
http://jsfiddle.net/xa3apsdc/11/
The underlying question is, how to position things, like arbitrary <g> or <t> elements, "above" other arbitrary elements, or maybe there's an alternative way to format this stuff.
http://jsfiddle.net/xa3apsdc/31/
remove float: left from <t>. Doing so both elements with display: inline-block are vertically-aligned by default to the baseline value.
Result
The problem that i'm having is that I've specified some rollover buttons, and some div id's to control my image positions. however when i make a new div called Text and put some in, this also seems to trigger my rollover buttons? like its using code from the div above it, even though I've used the <div> tags:
http://jsfiddle.net/bq5MR/2/
Your example doesn't display the images.
You haven't closed your <a> tags which may result in the effect area being larger than you expect.
http://validator.w3.org/ - a free HTML validator which can help pinpoint invalid HTML and potential issues.
You're not closing your second 'a' tag. Try closing it and see if that fixes the problem.
Is there a simple way to make a styled tooltip for an <area> in a <map> ? By default the browser seem to render the area text into a yellow text box. But I've got cases where the text should be formatted.
I've been trying with Twitter Bootstrap's tooltips and popover but they're always positioned at the top left of the window. At 0,0.
UPDATE - screenshot and code
Telling to add popovers to the area elements of the piechart. Each <area> corresponds to one section of the pie chart.
$('area').popover({content:"I'm a cut off popover" ,trigger:'hover'});
I'd like to have the popover appear next to the hovered-on section.
I'm aware of comparable questions related to <area> in Stack Overflow. My case however is different in the sense that I don't know upfront the size and positions of the sections. So I can't generate a custom style to set the top and left properties.
The same happens for regular tooltips. They're put into the left upper corner. But I'd rather go for popovers because I need formatted content.
Hope this helps.
Just don't use the title attribute which does this yellowish browser tooltip.
For a custom tooltip, you must use a custom solution (javascript based, obviously). I suggest you use a library (like jQuery) and find a tooltip plugin which does what you want like this one
Update
For the css issue with the bootstrap tooltip, it looks like there is a position issue. Please provide more code so we can figure out what's goin' on.
The answer is that this is a bug in Bootstrap
https://github.com/twitter/bootstrap/issues/5000
I'd like to display text over an image like Newser.com does.
Here is a sample:
At first glance this seems simple. But it's proven very challenging for me.
The solution likely lies in some combination of DIV and SPAN (possibly span's nested in block DIV's...?)
Ideas?
(Note 1: Notice how each span of text has a background of a unique length -- e.g. directly under the text)
(Note 2: Don't worry about the opacity value for now. I just basically want to make 4 black text blocks (as shown in the jpg.))
Newser.com seems to produce the images with the text already on them but you can do this using just html and css.
Here is an example of how:
http://codepen.io/anon/pen/jDdAb
Please take a look at this nav menu
Currently it looks like below
What I'm trying to achieve, is result shown below (I made this on Photoshop)
Is that possible to get this result with CSS3? If yes please help me. Can't figure out, how to get this result
Here we go
http://jsfiddle.net/DBzSD/11/
I have used CSS pseudo elements to display them you can replace with normal elements if you want but that wont be a very wise choice.
Secondly i have used the data-attribute to show the value of the number , you can dynamically change the number with very minimal amount of javascript and that will automatically change the numbers shown in the box :-)
Hope that helps ..
Sorry i failed to find out your hover effects :-(
I can't find where you specify the border on the hover event, but I would make the green line part of the div, and then use the triangle as an image inside the div.
Have a look at this fiddle http://jsfiddle.net/Neograph734/DBzSD/8/