I am trying to display a background image for a button. The button is saved as .png and used in JSP page. The problem is that, when button gets displayed, it only displays one half of the image, i want the whole image to be displayed.
CSS -
#btn {
background: url(../images/btn-blk.png) no-repeat;
width: 100%;
}
JSP -
<input type="submit" value="Add" id="btn" />
What could the problem be? How to make the image display the whole width instead of left half alone?
-Thx in Advance
Are you sure that you posted corect css code? It should be "#btn" not "btn".
Since you know your width of btn-blk.png, why don't you put it in css, instead using width:100%? Attach here the image btn-blk and maybe we will be able to understand better what you want to do.
You need to set the size of btn to be the size of your image in pixels. CSS has no idea how big your image is.
Because BTN is an inline element, width:100% refers to the width of the button, not your background image.
You need something like:
btn {
background: url(../images/btn-blk.png) no-repeat;
width: 50px;
height:20px;
}
Check with a DOM examiner (FireBug, Chrome's internal one, or something like that) and see that your <input> tag really is big enough.
As a FYI: the "width: 100%" does not apply to the background image size, but to the element's size, relative to its parent.
There are other ways of putting an image in a form that may be more appropriate:
<input type="image" src="../images/btn-blk.png">
<button><img src="../images/btn-blk.png"></button>
Related
I have a table in which I have a dropdown, due to IE8, I had to manipulate it such that it displays long text in the option. However, upon resizing the window, the dropdown isnt being resized and is being shown as in the image attached. Thats look funny. How can I correct the dropdown being shown such that when window is being resized, it also gets resized along.
style is as follows: .test{
width: 250px;
position:absolute;
z-index:+1;
}
code is as follows:
<select id="myList" class= "test" onactivate="this.style.width='auto';" onchange="this.blur();" onblur="this.style.width='250px';" disabled>
Give the select a width in % rather than px.
Or use some javascript to handle the window's resize event.
I'm having trouble getting rid of the gray border in my button that has a background image. I tried to put together a public example on jsfiddle and I can't even get a proper example to work as the image sprite also fails to show up:
http://jsfiddle.net/3vPpt
So my two questions are:
1) Why isn't the background image showing up in my jsfiddle
2) And after we get the sprite to show up, how do I get rid of the gray border that is the original button? I only want the sprite to show up.
Try this.
It looks like you were applying the styles to the image element, not to the button. I doubt that you can apply a background-image style to an image element, even if it's a blank image. I think this may be because an image element is an inline element.
I also added border: none; to the button, which gets rid of the button border styling.
Note that you still may encounter weird padding/margin issues yet, but that can be for another question. Firefox, at least, like to apply an extra few pixels of padding in button elements even after you remove their border.
If its a form use input type image... or just use a div with onclick to submit
Try applying the "thumb_up" class to the button tag and remove the img from inside the button like this.
<button class="thumb_up" onclick=";return false;" title="I LIKE" type="button" class=""> </button>
And then add "border:0;" to "thumb_up" CSS
.thumb_up {
background: no-repeat url("http://www.mattsbits.co.uk/user_media/uploaded_media/sp2010_formatmap32x32.png") 0 0;
width: 200px;
height:200px;
border: 0;
}
How can I do to have an image as the background for all links? I want to have a nice box representing buttons, but I cannot figure this out.
I have tried:
a {
font-size: 40px;
background: url('images/shooting-stars/shooting-star-link.png') no-repeat left top;
}
But this is not working, image is not displaying.
"I want to have a nice box representing buttons, but I cannot figure this out." - I don't understand this part.
Anyway, your css looks fine from here, are you sure the image exists? This is a working example with the exact same code, just an image that I'm sure exists:
http://jsfiddle.net/3k9nm/
If you want to always show the image, even if the text is shorter, you should set a minimum width for the links. This does mean they'll have to be inline-blocks, you can't set width on a regular link (which is an inline element).
a {
display: inline-block;
min-width: 25px;
}
(25px was randomly chosen, fill in the width of your background image..)
Two things to try, is there any text in the actual <a> links? And if you use Firebug, you can check you've definitely got the right file path to the image...
HTML
<div id="example-link">
Link to journal article
</div>
CSS
#example-link a {
background: url('images/shooting-stars/shooting-star-link.png');
}
Can we use more than 2 images for single navigation. That means when we hover on that image it will shows 6 different images. Is it possible to make for a single navigation image? If possible means how?
I think you are all understand this
alt text http://img714.imageshack.us/img714/2786/mubeen.gif
If I understood you correctly, you want to continously change the position of your background image while you hover over one button.
If that's right, then I suggest making a static image as background image and changing the image to a GIF animated image on hover
You can (at the moment - cross browser) only set one bg image on an element. If you want to change it on hover or whatever, just add an a-tag with href set on #:
<a class="img" id="thatoneimg" href="#"></a>
And then in the css:
a.img {
width: 100px;
height: 100px;
}
a#thatoneimg {
backround-image: url(staticimg.jpg);
}
a#thatoneimg:hover {
backround-image: url(movingimg.gif);
}
That should work cross browser. You need the a-tag for it to work in IE.
Edit:
As Starx said, just make the second image a .gif with an animation. It will not use sprites but it will work.
If I get your question right, it's possible, but you will have to have 6 different HTML elements to contain the background image at 6 different positions.
I have multiple styles such as button_50 where the width is 50px, button_75 where the width is 75px, and so on...
Is there a way to dynamically generate the length of the button based upon the length of the text, so I probably would just have to create one style like button and I can apply that to any button and it would shrink or stretch based on the length of the text.
Here is my asp.button declaration:
<asp:Button ID="btnReset" runat="server" Text="Reset" OnClick="btnReset_Click"/>
Here is some styling in which I have a small image that I want to be able to expand and shrink depending on the length of the text.
.test_button
{
background: url(../images/test/grey-left.png) top right left bottom;
background-repeat:no-repeat;
border-style: none;
font-family: Arial,Helvetica,Sans-Serif;
height: 23px;
}
I added the top right left bottom to the class and that expands the image across. How can I apply 4 different images to each background position of the button so I can have a sort of gradient for example instead of the same button for top right left bottom.
Your changes have clarified what you want a lot from when I first replied.
Each element can have ONE background image only*. The solution is to having multiple background images is to have multiple HTML elements:
<span class="fake_button">
<span>
<span>
<input type="submit">
</span>
</span>
</span>
Then in your CSS add an image to different corner of each one.
It's not simple or pretty but it's the only way of having multiple background images.
*I think some of the nightly builds of Safari and Firefox can do this but I suspect this isn't what is being asked about.
<asp:button> outputs <input type="submit"> (give or take a few attriubutes)
In the absence of other styling, a submit button like this should just expand to fit it's text. Perhaps you should look at what is stopping this happen.
Just don't set the width.
Update
As noted in comments, the case is using an image, probably as background.
The only things I can think of for image buttons that dynamically resize is using using separate images as end-caps for the left and right of the button, then a background image that either can repeat or is big enough to account for all sizes. This would have the limitation of how the center image fades into the ends, probably at best you could use a top to bottom gradient.
An alternative would be to use css/javascript package/method such as SpiffyCorners.
If you try to stretch an image, you risk pixelation and you would have to use an estimation for font width such as you could get from a printing or font API. This would be very error prone due to the risk of not all clients having the same fonts.
You can do it on PageLoad with a loop like this:
// set default length
string cssclass = "button_25";
int text_length = button.Text.Length;
int[] sizes = {50, 75};
for (int x = 0; x < sizes.Length; x++)
{
if (text_length > sizes[x])
cssclass = "button_" + sizes[x].ToString();
else
break;
}
button.CssClass = cssclass;
You can keep your source clean by adding the rounded corner functionality via CSS for browsers that understand it (plus the gradient bg image or whatever) and using JS for browsers that don't.
for ff/sf/op just use
button{
background: #ccc (../path/img.gif) left bottom;
-moz-border-radius: 6px;
-webkit-border-radius:6px;
border-radius: 6px;
}
then for IE include a snippet of js to wrap the button with spans and apply the styling via css. there are jquery plugins a plenty to do this for you if you're not inclined to hand roll.
Try CSS3PIE. It will make your life easyer... Take a look in my bolg page:
Internet Explorer 6-8 don’t have CSS border-radius. How to make rounded corners?
Cheers!
Roberto.