I'd like to do text highlighting by hovering a div behind the text via z-index*. If the element containing the text doesn't have a background, it works fine:
However, if the element has a background or background-color, it doesn't work as the background blocks the view of the div that's behind it:
Of course I can make the div be on top, but that looks terrible, as it colors the text itself:
You can see this problem in action with jsfiddle here. My question is: how can I have a div go behind the text but above the background?
* Why am I not using a span like everyone else? Because with div I can animate the highlighting's movement from word to word. That's in the jsfiddle also.
http://jsfiddle.net/V3Kae/9/
you could do it like this. setting the z-index of the container to be lower then the highlight, an the z-index of the text to be higher then the highlight.
Related
I am trying to implement something where my text width is identical to one another or very close for example. I have a few div tags with some text that is unchangeable react component that is injecting a variable into the div tag for example {reactVar}
however my text that is returned aligns like so for mr following divs.
test
test
test
tets
tetstetetse
all of my text are not aligned accurately they are all over the place. Any suggestions to have them all the same width and aligned? I have tried text align center and margin auto and none work.
This html/css:
Left
Produces this:
But I want this:
Left
ThisWontBeVisible
The class ui-btn-icon-notext will remove the text ("ThisWontBeVisible") within the <a>. However, if there is no text within the <a>, it will shrink the button to a short height. Seems like a hack but also likely the simplest way to achieve the desired result.
You can do it by setting the height attribute to 1em on all of your .ui-btn elements, or any height greated than 1em. This will set them all to the same height regardless of whether they have text inside them or not.
In the normal prestashop theme, there is a box at the top of the category pages for a description of the category as a whole. The box has an outline and contains a picture and some text.
The text is normally below the image, so the block takes up a lot of room. I would like to float the image to the left, and wrap the text around it, so it's smaller.
I suspected this would be easy, because the image and text are in divs, and both of them are in another div for the outline. So I simply added float:left to the image's DIV.
The image moved to the right OK, and the text flowed too. However, the surrounding DIV did not resize properly, so the image now runs right out of the box.
How do I get the enclosing DIV to resize properly?
You need to force the containing div to wrap the floated contents. You can do this a few ways, one being to add overflow:hidden.
.content_scene_cat {overflow:hidden;}
We have a tooltip which appears when you mouse over a small (?) image. However, in Chrome, when you un-hover (mouse out), a part of the image on our tooltip somehow still displays, like a ghost image of some sort.
This is the jsFiddle Test Case:
http://jsfiddle.net/UYxBt/
Dont use inline element '.tooltip span'. Use 'div' or add 'display:block' to this span on your css file.
http://jsfiddle.net/fliptheweb/UYxBt/1/
I have a div, inside the div is a background image that looks like a button and I have text in the div saying "Home". By default the text is snapped to the top and does not look right. How could I move the text around in the div without moving the div?
css file:
http://pastebin.com/xrAFMVDd
html file:
http://pastebin.com/b5Fubte0
One way of doing this is to wrap your text in a <p> tag and use CSS attributes top and left with position: relative to specify the position of the text relative to the top left of the div.
See an example here: http://jsfiddle.net/zvMKH/
I fixed it by changing the line-height under #button1 li a. Worked like a charm! Thanks to everybody that contributed! I really appreciate it!