Trying to find an example that has css rollover using sprites & sliding door techniques combined.
I am not css literate, so a complete example or link to a complete example would be appreciated.
All I am trying to do is to have <a href> buttons that are not fixed width with a nice rollover effect and the possibility to add an icon (similar to web outlook).
With just CSS there is not real rollover or sliding effect. Basically both of those techiques are based on "background-position".
Maybe this will help you:
http://kailoon.com/css-sliding-door-using-only-1-image/
But with javascript you could achive so much better looking rollover effect... :) Check out my test page and click on "click to show little bit advanced hover ;)" to see it ;)
www.arvag.net/test/jquery/
If you want something like that just say and i will try to explain it.
We did something like this and you perhaps could find it useful. In the anchor we used a span and assigned the following css to them:
html:
<a href="example"><span>echo</span></a>
css:
a, a:visited {
background: url(left.png) no-repeat scroll left;
}
.tabContainer a span {
background: url(right.png) no-repeat scroll right;
margin: 0 0 0 21px;
padding: 0 21px 0 0;
float: left;
}
and then hover them like this:
.a:hover {
background-position: -45px;
}
.a:hover span {
background-position: -45px;
}
The left and right must look proportionataly of course! :) Hopes this helps you to solve your css issues! ;)
Well, depending on exactly what you want this is very variable, but say you want a button that changes colour when the mouse is over it, and has a little image that appears next to it, this is the sort of thing you'd need:
HTML:
<ul>
<li>home<img src="sprite.png" width="16px" height="16px" alt="tinypic" /></li>
....
</ul>
CSS:
ul li img {
display: none;
}
ul li {
background: #FFFFFF;
}
ul li:focus, ul li:hover, ul li:active {
background: #000000;
}
ul li:focus li img, ul li:hover li img, ul li:active ul li img{
display: inline;
margin-right: -16px; // should stop the button expanding
}
But as I said, that's a very basic stripped down answer
The following is based on this article (http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/), but adapted for use with the a tag.
It is similar to @xijo 's answer, with a couple of minor tweaks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
<html>
<head>
<title>Test</title>
<style type="text/css">
/* REQUIRED BUTTON STYLES: */
a {
border: 0;
padding: 0;
display:inline-block;
}
a span {
display: block;
white-space: nowrap;
cursor: hand;
}
/* OPTIONAL BUTTON STYLES for applying custom look and feel: */
a.submitBtn {
padding: 0 15px 0 0;
margin-right:5px;
font-size:2em;
text-align: center;
background: transparent url(btn_blue_sprite.gif) no-repeat right -140px;
}
a.submitBtn span {
padding: 13px 0 0 15px;
height:37px;
background: transparent url(btn_blue_sprite.gif) no-repeat left top;
color:#fff;
}
a.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the hover state with a script */
background-position: right -210px;
}
a.submitBtn:hover span, button.submitBtnHover span {
background-position: 0 -70px;
}
</style>
</head>
<body>
This is a bunch <a href="#" class="submitBtn"><span>Submit</span></a> of text.
</body>
</html>