Hey there my question is pretty simple i'm trying to do a button exactly like the one you can get in vb form. For Example I want some text in my button and I also want an image in it. The only problem is that in VB.net there is only two type of button the first one is button with an image in it and no text at all and the second one is one with only text in it. The only way i've found is putting the image in the background. Unfortunatly the image is taking all the spaces in the button. I'd like to know if there's a way to align the back-ground image to the left or to right for example
Here my HTML code for the button:
<asp:Button ID="btn_LoadReport" runat="server" Text="Charger"
style="margin-left: 0px; margin-bottom: 0px; margin-right:0px;"
Height="35px" Width="102px"
CssClass="Charger" />
And this is the css code that I Have for the moment:
.Charger
{
background-image:url(report.png);
background-repeat:no-repeat;
text-align:left;
}
Thx
I've tried putting the image in the background with a css but my text is over the images
This is what the background-position attribute is for.
<button>Text</button>
button {
padding-right:40px;
background-image:url(myImage.png);
background-repeat:no-repeat;
background-position:center right;
}
Note that the padding-right property is used to prevent the text overlapping the image.
JSFiddle example.
Related
I'm trying to accomplish a dynamic button which is always square, and based on the height of the text it is with. Something like this:
Basically the icon stays the same, but the size of the box varies, based on what size of text it is next to. The icon should be centered vertically and horizontally. To get it to look like the image, I had to manually put in everything, but I want it to work whether the font-size is 20px, 70px, or anything else. Basically, I don't know the height, but it should work is the goal, and that seems to be what is different in this question from others around the site/web.
This is the HTML code:
<!-- This may be any font size, but the result should be like the image above. -->
<div id="name">
<!-- This holds the text -->
<span>Amy</span>
<!-- This holds the image, and the anchor is the box. -->
<img src="/images/edit.png" alt="Edit Name" />
</div>
I've tried following this tutorial, but I can't get it to work for some reason. Everything I've tried (which is too many things to enumerate here) either gives me the right height, but wrong width, the exact size of the image, or the image as the size of the square.
Is this possible with just CSS, or am I going to have to resort to JavaScript?
Thanks.
Something like this should do it. You may have to change the size a little depending on the font. Also, you may have to vertical-align it.
.edit {
display: inline-block;
width: 1em;
height: 1em;
}
.edit img {
display: block;
}
DEMO
HTML:
<button>
<h2 id="name">
<span>Amy<a href="#" class="edit">
<img src="/images/edit.png" alt="Edit Name" /></a></span>
</h2>
</button>
CSS:
button img {
vertical-align: middle;
}
h2 {
font-size:20pt;
}
Is this what you want?
I have a button which I'm using multiple times in my webpage. The buttons styles will be as
Button with Text and Image.
Button with only Image.
Button with only Text.
As shown in the fiddle
http://jsfiddle.net/xzBaZ/4/
I'm using he same css for the button class. I need to align the Text Vertically to center if it is the first case. and no extra alignment is required for other cases.
How can I do this??
vertical-align: bottom on the <img> or make the image and the text equal line heights. The latter requires you to know the image height beforehand.
You should Write the text in span
<button onclick="return false" class="super button"><span>Awesome Button »
</span> <img src="/Buttons5/add-to-cart-light.png" alt="" width="28" height="20"/>
and also specify the css for span
.button span{
float:left;
margin-top:3px;
}
I have a html page which looks like the following:
I want to display some text on the left pane, but the problem is that the text should be inside the oval shaped area only. How do I achieve this? Note that the oval shaped image is the background image, however if required, I can also use a <img> tag for it if it would help. One lame way is to use <p> tags with padding, but that is not an efficient way, so kindly suggest some good methods.
EDIT: HTML:
<div id="leftStage" class="rounded-corners">
<div id="questionDisp" align="center">
</div>
</div>
CSS:
#leftStage {
position: relative;
width: 34%;
height:86%;
float: left;
}
#questionDisp {
display:none;
}
JS: (When the appropriate function is called: )
$("#questionDisp").fadeIn(1000);
$("#questionDisp").html(quesArr.q1); //data read from xml
EDIT: What I need is a div or something above the oval background, & the text should fit in it. I am getting the text from an xml file, so it is not that I have a fixed text size to be displayed
There's actually a pure CSS/XHTML code generator on csstextwrap that does exactly what you want.
EDIT:
The concept here is to float <div>'s on either side of your text so that your content is forced to "flow" in between them. By setting the width of your floated <div>'s, you can create a wide variety of cascading "stencils."
See concept illustrated here: fiddle
If it is background-image then use the position:absolute with proper margins (top and left), and set the width less than that the oval background-image. Then display property 'block'.
Maybe you could try the jQuery plugin Text Fill
also see: https://stackoverflow.com/a/688362/753676
I removed my answer since only the left float worked.
If you paste this code: it'll show you exactly how it works. I did a border-radius instead of creating a circle png.
<div style="width:250px;height:230px; border-radius:125px;background:#efefef;padding-top:20px; text-align:center">
The code for my<br /> fix isn't pretty but it should<br />work It's not automatic, but it<br /> does the job that you need it<br /> to do.
</div>
You have not shared any HTML, The working code is with some assumption
The HTML is,
<div id="main">
<div class="text">This is text</div>
</div>
Where div with classtext is the text container.
The CSS for same will be,
#main{
background-image:url('http://i.stack.imgur.com/bw2HK.png');
height:563px;
width:691px;
}
#main .text{
color:#FF0000;
width:240px;
text-align:center;
top:100px;
border:1px solid;
float:left;
position:absolute;
}
Here .text is the class that represent the text styling. The main part is position:absolute;. This will set the text div position to absolute. Now you can move the div above image div using top and left styles.
Please do review working example here
P.S. The border, color and other styles can be changed as per your need.
I am working round a custom CMS called phpVMS. In this, there is a bubble box that displays when clicked on an icon on the map. However, the text align seems to be centered instead of going to left? I've linked a picture:
The code that I am using for the bubble span is:
<span style="font-size: 9px; text-align: left; width: 100%;">
<strong>Pilot In Command: </strong> <%=flight.pilotname%><br />
... so on.
</span>
I've tried to look where text could be centered, but cannot find anything sadly in the css or the html. I have also noticed that width and font size work, but text-align is ignored. I hope you can help me.
Thanks and regards
You can't use text-align within a span as it is not a block-type element. Try replacing your <span> with a <div> of the same parameters.
I'm trying to display a png image on a <button> element in HTML.
The button is the same size as the image, and the image is shown but for some reason not in the center - so it's impossible to see it all.
In other words it seems like the top right corner of the image is located at the center of the button and not at the top right corner of the button.
This is the HTML code:
<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>
Update:
What actually happens, I think, is a margin problem. I get a two pixel margin, so the background image is going out of the button. The button and the image are the same size, which is only 20px, so it's very noticable... I tried margin:0, padding:0, but it didn't help...
You could use input type image.
<input type="image" src="http://example.com/path/to/image.png" />
It works as a button and can have the event handlers attached to it.
Alternatively, you can use css to style your button with a background image, and set the borders, margins and the like appropriately.
<button style="background: url(myimage.png)" ... />
If the image is a piece of semantic data (like a profile picture, for example), then use an <img> element inside your <button> and use CSS to resize the <img>. If the image is just a way to make a button visually pleasing, use CSS background-image to style the <button> (and don't use an <img>).
Demo: http://jsfiddle.net/ThinkingStiff/V5Xqr/
HTML:
<button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
<button id="close-CSS"></button>
CSS:
button {
display: inline-block;
height: 134px;
padding: 0;
margin: 0;
vertical-align: top;
width: 104px;
}
#close-image img {
display: block;
height: 130px;
width: 100px;
}
#close-CSS {
background-image: url( 'http://thinkingstiff.com/images/matt.jpg' );
background-size: 100px 130px;
height: 134px;
width: 104px;
}
Output:
The simplest way to put an image into a button:
<button onclick="myFunction()"><img src="your image path here.png"></button>
This will automatically resize the button to the size of the image.
try this
<input type="button" style="background-image:url('your_url')"/>
Why don't you use an image with an onclick attribute?
For example:
<script>
function myfunction() {
}
</script>
<img src='Myimg.jpg' onclick='myfunction()'>
Add new folder with name of Images in your project. Put some images into Images folder. Then it will work fine.
<input type="image" src="~/Images/Desert.jpg" alt="Submit" width="48" height="48">
The topic is 'Embed image in a button element', and the question using plain HTML. I do this using the span tag in the same way that glyphicons are used in bootstrap. My image is 16 x 16px and can be any format.
Here's the plain HTML that answers the question:
<button type="button"><span><img src="images/xxx.png" /></span> Click Me</button>
Try like this format and use "width" attribute to manage the image size, it is simple. JavaScript can be implemented in element too.
<button><img src=""></button>
General Answer:
<button style="background: url('icons/close.png'); background-size:cover"></button>
Since currently selected answer has some issues, posting this answer to save people trouble.
Make sure to give your button the width/height necessary to see your image as well as possible adding a "background-position" attribute to make your image show up as intended.
REACT VERSION:
<button style={{backgroundImage: "url('icons/close.png')"}}></button>
To use Image as button create a button download button image and than open it in paint and note down the top left and right bottom coordinates
`<Img src =" button.jpg" usemap=" #button" >.
<map name = " # button " >.
<area shape ="rect" coords = " Top- left , bottom right "
href = " page you want to open by button" > `
You can use multiple< area> tag to create different button from just one image .
Note : There is one issue with this method that if you try to change the height and width of the image the pixels shift and your button won't work
For that change the button image size externally by photoshop or any other photo editor
That's it you have created your button without java script and with few lines of code
Buttons don't directly support images. Moreover the way you're doing is for links ()
Images are added over buttons using the BACKGROUND-IMAGE property in style
you can also specify the repeats and other properties using tag
For example: a basic image added to a button would have this code:
<button style="background-image:url(myImage.png)">
Peace