İ have this button, and i want to but an image at the left, and it should have a text
which i could position as i want inside the button. i tried a few ways but i couldn't position
the text and image the way i wanted.
<button class ="buttn"> Click Here <img src ="./logo.png"> </button>
.buttn{
background:transparent url(/logo.png) no-repeat left;
border:0;
padding-left: xxxpx; // this is how wide the image is plus any additional padding
}
<button class="buttn">Click Here</button>
The path should be replaced with the correct one.
Basically, set the image as the background, remove any default button styling and then play with the padding until you position the text as expected.
Multiples:
.buttn{
background-image:url(/logo.png), url(/gradient.png);
background-repeat:no-repeat, repeat-x;
background-position:center left, center left;
}
You don't need to use an image for the gradient, by the way. Just showing that you can have more than one background.
Ive never put an image in a button. I'm guessing it doesn't show that. In which case wrap the button in a div with float left (or same demensons as button) and position relative. Position the image with absolute positioning where you want it. Use padding in the button to push the text which ever way you want it to go. If padding doesn't work then wrap the text in span and AP it to.
Kai answer is cleaner if it works in all browsers.
Related
I am trying to include an image and some text inside a button element. My code is as follows:
<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>
The CSS is:
.testButton1
{
font-size:100%;
height:10%;
width: 25%
}
.testButton1 img
{
height:80%;
vertical-align:middle;
}
What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using   works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.
What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.
Any help, as always, is appreciated. Thank you.
Background Image Approach
You can use a background image and have full control over the image positioning.
Working example: http://jsfiddle.net/EFsU8/
BUTTON {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background: #f0f0f0 url([url or base 64 data]);
background-position: 8px 8px;
background-repeat: no-repeat;
}
A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/
And another example showing adjustments to the button based on the :hover and :active states.
Child Element Approach
The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/
This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.
Change button display style to inline-block, img float to left. Add margin to img as necessary.
<button style="display:inline-block">
<img src="url" style="float:left;margin-right:0.5em">Caption
</button>
If you want to use image inside the button not in the CSS I think this help you:
http://jsfiddle.net/FaNpG/1/
Adding float left to the image works to an extent. A judicious use of padding and image sizing fixes the issue with having the text stuck to the top of the button. See this jsFiddle.
I have created a div class container but when I type in the text it appears in the middle of the container. How can I align the text to the top left corner of the container?
By the way I have used position: relative, top 0px left 0px.
However, this moves it to the the corner of the browser page, not the corner of the container.
There are many ways the text gets align into the center , you might have used the tag , or your container is forcefully moved in the center , the proper way of moving container to the middle is margin:0 auto; . You must give the html and css code your are using .
You might have used a text-align: center; can't really tell since you have not provided us with the necessary information to help you.
If it is a submit button in a form, and you inputted the text in the value="" it will automaticly center your text, the same goes for the tag called button between the tags.
Please make a codepen press the pen button, and copy the related code, and give us the link to your pen.
When you are using position absolute in your box, you need something to put it in relative to. So add a position relative to your box, and a position absolute to your text.
However I would suggest you to use line-height: "height of your box"px; and padding-left: 5px for an example to align your text in the box, if it is a button. Remember to use box-sizing: border-box; that allows you to use padding without expanding the box.
the align of the text can be changed using
margin-left:-1%;
margin-top:-1%;
float: left;
<div class="container text-center"> </div>
In my html content, I want to place an image at the bottom right corner of some container. While the image, like all images, is square in that it has a height and width, the actual visual image that the eye sees is not square. It could be a ball for example or a triangle. I also want text in this container but when the text is a lot, I would like it to flow around the edge of the visual image and not along the actual rectangle edges. Is this possible? Does html or css have some construct where you can setup the border (or edges) where text should stay away from?
If you want to solve the problem only with css and html you need to programming the page with many paragraphs (<p> tag) with various dimensions and set the image like a background image of the div wrapper.
#wrapper {
width:500px;
height:500px;
background-color: #fff; /*Default bg, similar to the background's base color*/
background-image: url("image.png");
background-position: right bottom; /*Positioning*/
background-repeat: no-repeat; /*Prevent showing multiple background images*/
}
After that set any paragraphs with custom width to set the text around the image.
Unfortunately i don't know any other "automatic" solutions.
Maybe, you can find a valid plugin here:
check this another stackoverflow question
Have a look at the menu link "Produkter" on http://marckmann.se/
I would like to add an arrow image in the right side of the drop down menu on some of the items. But since the text is styled into Blocks, it wont allow me.
Is there some way i could fix this?
Thanks :)!
In your CSS, for the #dropdown div a rule, add the flowing:
background: url('http://www.phillipsdepury.com/imgs/nav/arrow_small_left.gif') no-repeat right center;}
padding-right: 20px;
Replace your own arrow image. Also replace the 20px with the (width of your image + 5)px ...
I am trying to include an image and some text inside a button element. My code is as follows:
<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>
The CSS is:
.testButton1
{
font-size:100%;
height:10%;
width: 25%
}
.testButton1 img
{
height:80%;
vertical-align:middle;
}
What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using   works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.
What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.
Any help, as always, is appreciated. Thank you.
Background Image Approach
You can use a background image and have full control over the image positioning.
Working example: http://jsfiddle.net/EFsU8/
BUTTON {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background: #f0f0f0 url([url or base 64 data]);
background-position: 8px 8px;
background-repeat: no-repeat;
}
A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/
And another example showing adjustments to the button based on the :hover and :active states.
Child Element Approach
The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/
This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.
Change button display style to inline-block, img float to left. Add margin to img as necessary.
<button style="display:inline-block">
<img src="url" style="float:left;margin-right:0.5em">Caption
</button>
If you want to use image inside the button not in the CSS I think this help you:
http://jsfiddle.net/FaNpG/1/
Adding float left to the image works to an extent. A judicious use of padding and image sizing fixes the issue with having the text stuck to the top of the button. See this jsFiddle.