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).
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 <span>Submit</span> of text.
</body>
</html>
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:
<span>echo</span>
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! ;)
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.
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
Related
At my website I would like to make the dots in the side change when I'm on the active div box. The hover works fine, but I can't get the active to work. The path for the image is worked fine, when I tried to put it under hover.
#nav{
z-index: 5;
position: fixed;
top: 50%;
right: 20px;
}
#nav li {
position: relative;
height: 20px;
width: 20px;
margin-bottom: 15px;
}
#nav li a {
display: block;
width: 20px;
height: 20px;
text-indent: -9999px;
background: transparent url('images/dot.png') no-repeat;
opacity: 0.80;
}
#nav li a:hover {
opacity: 1;
}
#nav li a:active {
background: transparent url('images/dotactive.png') no-repeat;
}
I don't think it's possible for the image to stay as the active background with just CSS alone. You will need to use a combination of javascript too.
With jQuery you could try something like the below.
.active{background: url('images/dotactive.png') no-repeat !important;}
$('#nav li a').live('click',function () {
$('.active').removeClass('active');
$(this).addClass('active');
});
EDIT A Workign fiddle of your site keeping the active nav background images. http://jsfiddle.net/ukCG8/
try this out
background: url('images/dotactive.png') no-repeat;
no need for transparent
or use opacity also for tranparency
Try this:
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Lst;
function CngClass(obj){
if (Lst) Lst.className='';
obj.className='selected';
Lst=obj;
}
/*]]>*/
</script>
And modify the li items like this:
<li>
<a onclick="CngClass(this);" href="#">Test 1
</a>
</li>
I wish I could take credit for the fix; check it out in action here (yes, I'm cheating on stackOverflow with another web dev site!)
I'm in the process of making my own blog, I haven't got a domain yet so it's not live(I've been building the site from a folder with different directories as the pages). I've been working on the blog and I was looking for a simple navigation menu. I found one on the internet. I'm trying to center the navigation bar and I've tried many solutions that worked for other peoples websites but it isn't working for mine. This is the code (I've tweaked it to my own colors and nav titles)
<ul id="list-nav">
<li>Home</li>
<li>Books</li>
<li>About</li>
<li>Contact</li>
</ul>
And this is the CSS:
ul.list-nav {
list-style:none;
width:525px;
margin-right: auto;
margin-left: auto;
}
ul#list-nav li {
display:inline;
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:150px;
background:#383838;
color:#eee;
float:left;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
"Help me Obi Wan Kenobi your my only hope!"
Your first CSS selector is looking for a ul with a class of list-nav, not an id of list-nav. Change your first CSS rule to:
ul#list-nav {
padding: 0;
margin: 0;
list-style: none;
width: 525px;
margin: 0 auto;
}
And your navigation bar is magically centered. Please see this jsFiddle for a working demonstration > http://jsfiddle.net/TLaN5/. Obviously you'll need to amend the width of the parent ul in order to accomodate the correct width of the elements within, but you should get the idea.
I would wrap the entire page inside <div class="wrap">. You have declared margin twice in the code, so I would remove the first occurrence and leave it like:
ul#list-nav {
padding: 0;
list-style: none;
width: 725px; //NOTE I have increased the width value.
margin: 0 auto;
}
Also, find
ul {
display: inline;
text-decoration: none;
color: black;}
[around line 20] and remove display: inline; rule. This should fix your issues. Check the live example here.
You can give a define size to the ul and center its content (remove the display-inline, indeed)
ul {
width: 960px;
margin: 0 auto;
text-align: center;
}
Then display the child li elements as inline blocks :
ul li {
display: inline-block;
}
The inline-block property won't work in ie7, so check your browser targets first...
Another way is to just use the good ol'
ul li {
float: left;
}
ul:after {
display: block;
content: "";
clear: both;
}
But the li won't be centered within the ul and you'll have to use javascript if you absolutely want to do this dynamically (without assigning a fixed with to each li).
This is daunting me and I can't see the way to go. This is the first time I put a question here, so correct me if I´m not following protocol. Thanks!!!
I need the background of the menu to change according to the selected item so when active, the items to the left will show in orange while keeping the items on the right in gray.
Also, the triangle separating the colors have to keep to the right of the active menu item.
For the first element, is easy, but the second and forward, I cant make the code work as it cuts on the boundaries of the menu.
For example, I have [individuos] [empresas] [corredores] [proveedores]
When empresas is active, individuos and empresas should be orange while corredores and provedores should be gray.
If corredores is selected, then individuos, empresas and corredores should be orange while proveedores is gray.
I wanted to post an image to illustrate but as newbie I am not allowed.
#navigation {
position: absolute;
line-height: 40px;
padding: 0;
margin: 0;
margin-left: 210px;
width: 730px;
background-color: #757373;
}
#navigation ul li a {
text-decoration: none;
float: left;
padding: 0 40px 0 10px;
}
#navigation .empresas .active {
background: url(images/the-background.png) no-repeat right;
}
This one is good
This one is not, see that INDIVIDUOS should be orange
Maybe this fiddle provides some inspiration?
CSS:
#navigation li {
background-color: #ffa500;
}
#navigation li.active+li,
#navigation li.active+li+li,
#navigation li.active+li+li+li,
#navigation li.active+li+li+li+li,
#navigation li.active+li+li+li+li+li {
background-color: #757373;
}
HTML:
<div id="navigation">
<ul>
<li>professionals</li>
<li>organizations</li>
<li class="active">others</li>
<li>others2</li>
</ul>
</div>
Update
See updated fiddle with the "arrow" and more. If you want this to work also in IE7, then add span elements instead of using :before and :after.
THE SOLUTION
Ok, problem solved and it was the cleanest trick I´ve seen. I did not need to add anything else to the php, classes or the like. The solution was pointed by a colleague. All that it was needed was some trickery with z-index and positioning. Thank #peter and #PeterSmith for your input.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ejemplo menú</title>
<style type="text/css">
ul { list-style-type: none; }
ul li { display: inline; position: absolute; text-align: right; }
a { position: absolute; }
.uno { border: 1px #FF6600 solid; z-index: 4; width: 100px; }
a.uno:hover { background: #FF6600; }
.dos { border: 1px #FF6600 solid; z-index: 3; width: 200px; }
a.dos:hover { background: #FF6600; }
.tres { border: 1px #FF6600 solid; z-index: 2; width: 300px; }
a.tres:hover { background: #FF6600; }
.cuatro { border: 1px #FF6600 solid; z-index: 1; width: 400px; }
a.cuatro:hover { background: #FF6600; }
</style>
</head>
<body>
<ul>
<li>PRUEBA 1</li>
<li>PRUEBA 2</li>
<li>PRUEBA 3</li>
<li>PRUEBA 4</li>
</ul>
</body>
</html>
Edit: Just saw your latest comment below about the .active class.
If you can add some javascript to your pages, you could run through a for loop for each li item, appending "orange" to its class, until you find the .active class, then the rest would have "grey" appended to the class. I'll try a fiddler later when I've got some free time
What css styles to be applied to make the clickable area of button to the exact shape of the button.Could you please tell me
If you use HTML you have to use a somewhat obsolete technique - Image maps - to get a clickable area that's not in the shape of a square. If you use Flash, you have more options. This reply addresses HTML/XHTML up to version 4, I haven't read the the specs for HTML 5 wich may have more ways of solving this (probably in combination with Javascript).
If I wish to style links in a menu I use an unordered list. You need to use display:block to make the whole list item click-able. I have included example css and html below.
In my stylesheet:
#menu {
width: 800px;
height: 40px;
}
#menu ul {
list-style-type: none;
margin:0;
padding:0;
}
#menu li {
display: inline;
margin-right: 10px;
float: left;
background-color: #FC0;
}
#menu a {
text-decoration: none;
font-size: 1.2em;
color: #006;
display:block;
padding: 5px 10px 5px 10px;
}
#menu a:hover,
#menu a:active {
color: #009;
background-color: #F90;
}
In my html:
<div id="menu">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Articles</li>
</ul>
</div>
This will give you a horizontal menu of three yellow boxes/buttons which will change to orange on hover. The a is displayed as a block and so the hover affect takes affect when the mouse hovers anywhere within the yellow box, rather than just over the text.
Hope this helps :o)
I'm trying to style a button with the css 'sliding doors' technique, but it isn't working properly. I've only got access to firefox 3 at the moment so this issue may not occur in other browsers but I would like to solve it for firefox as well.
Here's a picture of what the problem is:
http://img131.imageshack.us/img131/3559/buttons.png
As you can see the second side is lower than the first by a pixel and also is not over to the right enough. Here is the code I am using:
button
{
font-weight: bold;
border: none;
background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
color: #FFFFFF;
height: 25px;
}
button span
{
display: block;
height: 25px;
background: top right url(../images/blue_button_right.gif) no-repeat;
position: relative;
}
<button class="important" type="button"><span>Register</span></button>
<button type="submit"><span>Submit</span></button>
How do I fix this problem? I tried relatively positioning the span using top: -1px right: -3px but then the text is mis-aligned.
Thanks.
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
I just did sliding doors on a div background, and the code from this site worked perfectly.
Try setting the padding for the button to zero, and then playing with the padding-left and width to put the text in the right place.
button { padding:0; padding-left:5px; width:90px; /* total width:95px */ }
button span { ... }
If you look at the HTML block display: padding gets added to the overall width of the object, and the background starts in the padding area, and the right half is padded
However please take note, that button elements are NOT suited for embeding any other nodes inside (like span). They may work OK in the browser, but IE can make your life really hard (not to mention that as far as I know, it's not valid)
Form elements like buttons are always hard to style, and riddled with minor bugs like these.
Instead of applying the class to the button element itself, perhaps try and apply the button's styling to an extra span element inside the actual button?
In short:
button {
background: white;
border: 0;
}
button div {
font-weight: bold;
border: none;
background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
color: #FFFFFF;
height: 25px;
}
button div div {
height: 25px;
background: top right url(../images/blue_button_right.gif) no-repeat;
position: relative;
}
And HTML:
<button type="submit"><div><div>Submit</div></div></button>
I use DIVs instead of buttons and have a function to build them in-place. It ends up looking like this:
alt text http://fb.staging.moveable.com/samplebutton.gif
inline script call:
<script type='text/javascript'>makeButton("Log in","login()")</script>
code:
function makeButton(text,action) {
document.writeln("<a class='titleGen' href='javascript:// "+action+"' onclick='"+action+";return false'><div class='btn'><div class='btnLeft'></div><div class='btnMiddle'><div class='btnText'>"+text+"</div></div><div class='btnRight'></div></div></a>")
}
css:
a.titleGen, .btnText, .btnGText {
text-decoration:none
}
a.titleGen:hover, .btnText:hover, .btnGText:hover {
text-decoration:none
}
.btn {
height:22px;
display:inline;
cursor:pointer;
margin-right:5px;
}
.btnLeft {
background-image:url(/images/bg_btnLeft.gif);
width:3px;
height:22px;
float:left;
}
.btnRight {
background-image:url(/images/bg_btnRight.gif);
width:5px;
height:22px;
float:left;
}
.btnMiddle {
background-image:url(/images/bg_btnMiddle.gif);
width:auto;
height:22px;
float:left;
}
.btnText {
color:#ffffff;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-top:2px;
padding-left:10px;
padding-right:10px;
}