I have an interesting goal that hopefully, with your help, will be achieved.
I have this HTML structure:
<li>
<span class="buttonHighlight"></span>
BUY NOW
</li>
That HTML + a few CSS lines gives me this:
IMG 1 (see below)
As you can see, the span.buttonHighlight is overlapping the button itself. Now, here comes the interesting part: The button is a simple anchor tag with cufonized text, that has a few CSS styles which give it that rounded-button background. Hence, what I want to achieve, is putting the 3 elements (CSS background, cufonized text and Highlight) in this order:
IMG 2 (see below)
What I've tried so far was to aim at each element separately: The <span class="buttonHighlight"></span> as span.buttonHighlight, the CSS-driven background/box as a.button and the cufonized text as a.button .cufon . And luckily, the a.button .cufon is properly displaying; you can see it in FireBug:
IMG 3 (see below)
However, adding a z-index (of 101) that is superior to the z-index of span.buttonHighlight (100) did not help, i.e. the Highlight still overlapped the text.
You can find all the CSS styles relevant to this case here: pastie [dot] org/1478291
I really, really appreciate any help provided and your time.
Thank you so much!
Chris
**PS. Since I am not allowed to post images and only 1 hyperlink, i've stacked the 3 images below:
http://i.stack.imgur.com/Upe63.jpg:
z-index only works on positioned elements, you must specify postion:relative even if that is the default. Try this:
span.buttonHighlight {
background: url(assets/images/button_highlight.png) no-repeat top center;
z-index: 100;
position: relative;
}
and
a.button .cufon {
z-index: 101;
position: relative;
}
Related
I have a page which has some data in form of tables
Currently, for one of the columns(which is a link) I need to display a text on hover and was able to do it successfully by giving the title in the tag. Now , I tried applying css to the text on hover and following is the snippet
CSS
a.changes:hover {text-decoration: none; }
a.changes p {position: absolute; left: -9999px;border-style:solid; border-color:black; border-width:1px;}
a.changes:hover p {left: 5%; background: #ffffff; size:1px;}
and in the html, I removed the title from the a tag and gave it in inside tag
<a href='#' class='changes' onclick='AAA'><font color=blue>XYZ</font><p style='width:100px;'>TextToBeDisplayedOnHover</p></a>";
The above snippet works fine on the current display. But when I scroll down the page and then try to display to text on hover by selecting the last element, then the title is not getting displayed at well. My guess the text on hover has gone beyond the display page vertically.
Someone please help me in this. I need this hover to work for all the rows in the table in the current page as well as the next pages and not just the current display alone as happens in my case
Thanks in advance.
I don't quite understand your problem but you have 100 pixels wide container so the "TextToBeDisplayedOnHover" doesn't fit into the container. You could try this (or widen the container):
a.changes:hover p {left: 5%; background: #ffffff; size:1px;width:100px;overflow:scroll;}
Lose the inline styles in the hovering ´p´. (You're using CSS already.)
<a href='#' class='changes' onclick='AAA'>XYZ<p>TextToBeDisplayedOnHover</p></a>
If you use spaces in the hovering text ("Text To Be Displayed On Hover") you'll be less likely to run out of space.
If blue isn't the the default font color, add this to your styles:
a {color:blue;}
I display a few images of varying width and height, and I'd like to be able to add a class or two, say new or hot that would add small overlay star or something.
Normally this would be solved by making a div with the intended image being the background, but having my images all of unknown size, I'm getting stuck trying to figure out how to achieve this. Current HTML is of structure: <a><img></a>
I'm looking for a CSS feature that doesn't exist:
img.new { foreground:transparent url('/images/new.png') no-repeat bottom right }
I'm really hoping to solve this without databasing my image sizes, and without using javascript. But if you have a JS/jquery approach that's elegant, I'm all ears.
I'm not sure how well this would work for you, but if you can add the class to your <a> element instead of your <img>:
<a class="new" href="..."><img src="..." alt="alt text"></a>
Then you can try adding an a:after pseudo-element positioned absolutely over your <img> and giving it the overlay icon as a background image:
a.new {
display: inline-block;
position: relative;
}
a.new:after {
display: block;
position: absolute;
content: '';
width: /* width of overlay image or anything you choose */;
height: /* height of overlay image or anything you choose */;
right: 0;
bottom: 0;
background: transparent url('/images/new.png') no-repeat;
}
There's a bit of an issue with the positioning of the overlay image as the <a> is made an inline block for positioning to work, but you can always give it a little bottom offset to make up for it. Here's a fiddle to show you what I mean.
Without knowing more details about your setup, there are a few things that come to mind that you can do:
Use img.new:after (Some Quirksmode info on it.). It does have some browser support limitations, though. If you don't mind that some of the older browsers don't support this, then I recommend this one. I've used it before with nice results (and you could also fall back to JavaScript wrapped in IE conditional comments if you really need to, since IE appears to be the only browser out after the feature that doesn't support it).
If you're not using overflow:hidden, you might be able to set it as the background of either your image, its anchor tag, or even the next parent up. This, of course, depends on your exact design.
Use an absolutely positioned div or span within your anchor tag and display only on anchors with the .new class. So, something like this:
<a class="new">
<span class="newBanner">
<img/>
</a>
<style>
.newBanner {
display: none;
position: absolute;
top: 0;
right: 0;
}
.new .newBanner {
display: block;
}
</style>
This last one's kind of rough and will likely need tweaked, but the point is in the styling, specifically the .new .newBanner { display: block; } part. Again, it depends largely on your exact design, so the more information you can give us, the better help we'll be able to give you.
Can anyone help me with list.
I have an image:
And now I need to build list with default bulls replaced with left side arrow (but not with whole image):
How I can achive it using cross-browser css?
My HTML markup is:
<ul>
<li>Conveniently located on Adelaide St. W, one block east of the Bathurst and Adelaide intersection, just north of the Gardiner Expressway, downtown Toronto.</li>
<li>All units are located indoors, which means they are all climate controlled.</li>
<li>There is an indoor loading dock with four bays, two of which are large enough to accommodate up to 50' trailers.</li>
<li>Complimentary use of on-site dollies and pallet truck.</li>
</ul>
See this question regarding using Sprite images with list style backgrounds:
use CSS sprites for list (<li>) background image
I guess this is what you were asking for.
Check out this fiddle
Here is the code
The HTML is the same.
The CSS
ul {
list-style: disc inside none;
}
ul li:before {
position: absolute;
content: "";
left: 8px;
background: url('http://i.stack.imgur.com/KKMcz.png') no-repeat #fff;
width: 8px;
height: 14px;
}
you need to set the
background: transparent, url(/image/sprite.png) no-repeat -XXpx -XXpx;
where the -XXpx moves the position of the element. The only problem with this is you will have to make sure the padding on the li where the bullet shows is not too wide and shows only the size of the image you want.
the other option you have is to set the list-style-type: none; and then drop a div or span at the beginning of you li elements that you want to have the image. I wouldn't recommend this but it would work,
ul {
list-style-image: url(/xxx/xxx.gif);
}
Will give you the whole image, can't you just then split the image down the middle and use the left part?
Here's another method that should be cross-browser. You would need to change your sprite image, however. (I couldn't seem to open the image with Photoshop or GIMP or any thing else without it messing up, though. You would have to fix it up yourself). (fixed)
Demo
Basically it offsets the other image vertically instead of horizontally. If you have longer lists, you will have to modify how far it is offset vertically. This should work on all browsers and I tested it in IE9 with compatibility settings changed. it works even in quarks mode.
The modified image looks like this:
I have the following that I would like wrapped as units.
<div class='tag-box'>
<a href=#>Axe Committee</a>
<div class='circle'><a href=#>x</a></div>
</div>
The CSS for these classes are:
.tag-box {
display:inline;
}
.circle {
display:inline;
padding-left:4px;
padding-right:4px;
background:rgb(196,15,24); /*dark red*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.circle a {
font-size:10px;
text-decoration:none;
color:#fff;
position:relative; top:-2px;
}
I can have upwards of 20 or 30 of these tag-boxes displayed inline. The problem is that the wrapping will break the words from each other or even break the red circle from the link. This makes it hard to differentiate which circle belongs to which link. (In the future, each circle corresponds to a different action with respect to the link.) See below.
alt text http://www.freeimagehosting.net/uploads/f0c5a72ac9.png
How do I prevent this kind of wrapping from occurring?
You want each of your .tag-box to be inline (not taking all the width available) but still being considered as a block (its content shouldn't be cut in half). Here enters ... inline-block!
Here is a complete HTML code: http://pastebin.com/24tG7tCz
I used a list of links to better represent the lists of couple of links tag+action (bad news: you've a divitis syndrome ;))
I also added titles: your 'x' links aren't accessible at all and can be confusing for everybody, with or without any handicap, because one is never sure if the x will suppress the tag on the left or on the right: there are dozens of links, each with the text 'x'! A title attribute on the a element tells blind users and everybody else via a tooltip what'll really do that x.
With a span inside a.x, you can change the background-color on hover and focus, it wouldn't be possible with a inside a span or div.
0: Use white-space: nowrap;.
1: You could have the circle as background of your .tag-box (or your .circle a). eg:
.tag-box {
display: inline;
background-image: url('circe.png');
background-position: 100%; /* Display to the right */
background-repeat: no-repeat;
padding-right: 10px /* To leave space for the image */
}
2: You could use fixed-size floating .tag-box-es ( :/ )
3: You could have a (ready made) script put a circle on the right of every ".circle a"
You could try:
.tag-box {
display: inline-block;
}
Although you may experience some issues with firefox 2 and older versions of IE
This is my HTML:
<div id="links">
Link 1
Link 2
Link 3
Link 4
</div>
And these are the CSS styles:
#links {
position: absolute;
border: 1px solid #000;
}
#links a {
display: block;
}
#links a:hover {
background-color: #CCC;
}
This displays a list of links, the problem is that in IE, I can only click a link by directly clicking the text link, which is not the case with other browsers (where you can click anywhere whether the text link or anywhere else as long as it's in the link block), is there any fix for that (with only CSS, no javascript)?
Please note that I don't want to specify a width for the links or the div.
I have had the same problem and none of the solutions above worked for me.
I also needed the background of the links to be transparent.
A very uncomfortable solution, but one that worked perfectly is to set the background to a transparent gif. Only needs to be 1x1 px as it will repeat.
#links a
{
display: block;
background: url(/images/interface/blank/1dot.gif);
}
This seems to have no side effects apart from one additional request to the server.
Put position:relative; in your CSS at #links a{ }
like this
It will fix it :)
Enclose the link text in a span element. Then it will accept clicks anywhere within its bounds.
I have no idea why, but giving the anchor a background color seemed to fix this problem for me.
Setting the background color to #FFF and an opacity of 0 worked for me in IE9, Chrome and Firefox. Don't know about other versions though. Setting it to transparent didn't help me.
This has the advantage of being pure CSS and cross-browser, so maybe it could be a better alternative.
Ok, the fix for this problem is to give the anchors a background property other than transparent. Some proposed to give the anchors a transparent background image. I have an addition to this: The image does not have to exist. You can simply write any path and it will make it work:
a {
background:url('dummy/doesnotexist.png') no-repeat;
}
Insert this inside your a-tag style:
background:url('images/dot.png') no-repeat;
where dot.png is a 1x1 transparent image.