wright67uk Posted September 6, 2011 Share Posted September 6, 2011 With the below code I am using a sliding doors technique which uses a single image to create some buttons. Ive added a second image blue.png so that I can also add a hover state. Everything works really well, but Id like to know what I would have to do If I were to add a higher image. At current Im using an image which is W493 H24, ive tried replacing the image with a button W493 H48, but I get all sorts of problems, mainly the fact that the bottom of the button dissapears. ul {padding: 5px;margin: 10px 0;list-style: none;background-color: f2f2f2;border-bottom: ;float: left;clear: left;} ul li {float: left;display: inline; /*For ignore double margin in IE6*/margin: 0 10px;} ul li a {text-decoration: none;float:left;color: #666; cursor: pointer; font: 600 11px/22px "Arial", Helvetica, sans-serif;} ul li a span {margin: 0 10px 0 -10px;padding: 1px 8px 5px 18px;position: relative; /*To fix IE6 problem (not displaying)*/float:left;} ul.blue li a.current, ul.blue li {background: url(grey.png) no-repeat top right;color: #0d5f83;} /*STANDARD STATE right side of rectangle*/ ul.blue li a.current span, ul.blue li span {background: url(grey.png) no-repeat top left;} /*STANDARD STATE left side of rectangle*/ ul.blue li a.current, ul.blue li a:hover {background: url(blue.png) no-repeat top right;color: #0d5f83;} /*HOVER STATE right side of rectangle*/ ul.blue li a.current span, ul.blue li a:hover span {background: url(blue.png) no-repeat top left;} /*HOVER STATE left side of rectangle*/ Quote Link to comment https://forums.phpfreaks.com/topic/246553-sliding-doors-buttons-works-great-but-i-need-a-larger-image/ Share on other sites More sharing options...
cssfreakie Posted September 6, 2011 Share Posted September 6, 2011 You should change the dimensions of the element to which you assigned the background. if you look at your commented code: ul.blue li a.current, ul.blue li {background: url(grey.png) no-repeat top right;color: #0d5f83;} /*STANDARD STATE right side of rectangle*/ ul.blue li a.current span, ul.blue li span {background: url(grey.png) no-repeat top left;} /*STANDARD STATE left side of rectangle*/ Those are the elements you assigned a background to so those are the ones you have to change the dimensions for. Easiest way to do this or to solve this is just use firebug (for firefox) right click on the element and inspect them and play a little with the values such as height (font-size too) width and padding. Those are the ones that directly effect the dimension on which the background is shown Quote Link to comment https://forums.phpfreaks.com/topic/246553-sliding-doors-buttons-works-great-but-i-need-a-larger-image/#findComment-1266211 Share on other sites More sharing options...
wright67uk Posted September 7, 2011 Author Share Posted September 7, 2011 Thankyou I shall look at firebug. Those particular lines of code do not directly have any widths, line heights etc that you talk about. I pressume you mean I need to look at their patents? Quote Link to comment https://forums.phpfreaks.com/topic/246553-sliding-doors-buttons-works-great-but-i-need-a-larger-image/#findComment-1266269 Share on other sites More sharing options...
cssfreakie Posted September 7, 2011 Share Posted September 7, 2011 Thankyou I shall look at firebug. Those particular lines of code do not directly have any widths, line heights etc that you talk about. I pressume you mean I need to look at their patents? very good. Those lines don't have any dimensions indeed, but, Those show you the selectors/id/classes that need to be looked for. ANyway try out firebug indeed very good tool. At my blog I have a small video on how to use it. (5min) check it out if your having difficulties Quote Link to comment https://forums.phpfreaks.com/topic/246553-sliding-doors-buttons-works-great-but-i-need-a-larger-image/#findComment-1266274 Share on other sites More sharing options...
wright67uk Posted September 7, 2011 Author Share Posted September 7, 2011 I've done some reading and firebug along with its many add-ons looks like a very good tool indee, I think you have opened some doors for me, thankyou. Quote Link to comment https://forums.phpfreaks.com/topic/246553-sliding-doors-buttons-works-great-but-i-need-a-larger-image/#findComment-1266297 Share on other sites More sharing options...
cssfreakie Posted September 7, 2011 Share Posted September 7, 2011 I marked your topic solved (button left bottom corner) is that correct? Quote Link to comment https://forums.phpfreaks.com/topic/246553-sliding-doors-buttons-works-great-but-i-need-a-larger-image/#findComment-1266549 Share on other sites More sharing options...
wright67uk Posted September 7, 2011 Author Share Posted September 7, 2011 Yes thankyou. I will ensure to do this next time, Quote Link to comment https://forums.phpfreaks.com/topic/246553-sliding-doors-buttons-works-great-but-i-need-a-larger-image/#findComment-1266608 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.