How can I put text and image in a same line, like centered to image?
I tried some method, like vertical-align:middle; display: inline; but not working... where is my mistake?
Now:
my css code:
<style>
.entryDetailX {
float: right;
background: #2B587A;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px;
font-weight: bold;
color: #FFF;
padding: 6px;
}
.date {
float: right;
font-size: 9px;
padding-top: 1px;
background: url(/content/themes/mavi/img/custom/icon_time16x16.png) top left no-repeat;
padding-left: 20px;
margin-right: 10px;
}
.nick {
float: right;
margin-right: 20px;
color: #cc9900;
background: url(/content/themes/mavi/img/custom/icon_user16x16.png) top left no-repeat;
padding-left: 20px;
}
</style>
HTML:
<div class="entryDetailX">
<span class="date">18.01.2011 00:50:55</span>
<a class="nick">phantasm</a>
</div>
Thanks
You just need to Add the
background-position:left center;
Check on Fiddle
The images are background images and you need to set their position in the background css property. So, instead of top you can set center.
.date {
background: url(/content/themes/mavi/img/custom/icon_time16x16.png) left center no-repeat;
}
.nick {
background: url(/content/themes/mavi/img/custom/icon_user16x16.png) left center no-repeat;
}
If the above doesn't work, you can set how low the image to be in pixels. So, if you want the images to be 8px lower you can set
.date {
background: url(/content/themes/mavi/img/custom/icon_time16x16.png) left 8px no-repeat;
}
.nick {
background: url(/content/themes/mavi/img/custom/icon_user16x16.png) left 8px no-repeat;
}
There is a property, named background-position, to decide the background position. It takes two values, one for horizontal and one for vertical position. It could take center for both values.
When you write the following line of code, you set the background-position using the shorthand background. You explicitly ask to align the background is the top left corner.
background: <background-image> <background-position> <background-repeat>;
background: url() top left no-repeat;
You should write this code to vertically center your background image:
background: url() center left no-repeat;
You can play with this property on this jsfiddle.
Cheers,
Thomas.
Related
I'm working on my code to set up the border for the background image when I hover on the image. I have got a problem with the image that get too close to the border when I hover on the image. I want to move the image to the center just like this:
https://i.imgur.com/9et5LIL.png
Here is the jsfiddle: https://jsfiddle.net/05xq2b3m/
I have tried each of these:
padding-left: 4px;
background-position: center center;
background-position: 2px;
margin-left: 2px;
It wont do anything as the background image will stay close to the border when I hover on the image. I have tried to find the answers on google but I am unable to find the solution.
Here is the full code:
.a8r {
margin-top: 12px;
margin-left: 11px;
height: 28px;
width: 28px;
border: none;
display: inline-block;
}
.e1f600 {
background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -11223px;
}
.e1f600:hover {
-webkit-border-radius: 2px;
border-radius: 2px;
box-shadow: 0 0 3px 2px rgba(0, 0, 0, .15);
width: 32px;
height: 30px;
background-position: center center;
}
<button aria-label="grinning face" string="1f600" class="e1f600 a8r">
What I am expecting to achieve is I want to set the background image to be in the center that is not too close to the border when I hover on the image.
Can you please show me an example how I can set the background image that don't get too close to the border when I hover on the image?
Thank you.
Change the background position
Give your element a background color
Set the size of your element in not hover style
See it in seperate lines. You will understand it more this way. Feel free to optimize or minimize it.
.e1f600 {
background-image: url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png);
background-position: center -11222px;
background-repeat: no-repeat;
background-color: transparent;
width: 32px;
height: 32px;
}
.e1f600:hover {
-webkit-border-radius: 2px;
border-radius: 2px;
box-shadow: 0 0 3px 2px rgba(0,0,0,.15);
}
I add a simple decorative svg in my div:
.advantages {
color: #B3B3B3;
padding-top: 6px;
padding-bottom: 21px;
background: url(../svg/curvy-bg.svg) center bottom repeat-x, #FBFBFB;
background-size: 32%;
}
The problem is that the svg shows separate white space between the repeat-x...
Check the problem here
If you resize the screen in the jsfiddle you can see how the curvy background changes it's white space.
I don´t want the white spaces.
What´s the problem?
Edit background in your code
.advantages {
color: #B3B3B3;
padding-top: 6px;
padding-bottom: 21px;
background: #f5f5f5 url(http://imgh.us/curvy-bg2.svg) repeat-x center bottom;
background-size: 32%;
}
https://jsfiddle.net/q3geyevk/5/
Can someone one please give me a hand with the CSS for displaying an image as the background of a TD and fitting some text correctly over it.
It seems that for double digits works fine but with a single I am getting some clipping.
CSS:
.bkgImg {
background: url('/Images/circle.png') no-repeat;
background-size:32px 32px;
padding: 6px 8px 6px 8px;
color: white;
}
HTML:
<table>
<tr>
<td class="bkgImg">50</td>
</tr>
</table>
SEE LINK
Fiddle: http://jsfiddle.net/7kM3R/
I've updated your fiddle:
http://jsfiddle.net/7kM3R/7/
Here's full css for your class:
.bkgImg {
background-image: url("http://www.charlespetzold.com/blog/2012/12/BezierCircleFigure3.png");
background-repeat: no-repeat;
background-position: center center;
background-size:32px 32px;
color: white;
width: 32px;
height: 32px;
text-align: center;
vertical-align: middle;
}
Firstly I removed padding.
Then set fixed size for table cell (width&height):
width: 32px;
height: 32px;
and added background position (center)
background-position: center center;
width: 15px;
text-align: center;
Adding these lines to ur css will give you an ans
check the impact in your fiddle which I have updated
Your background image is cutted by the width of your td element. Give your td a fixed width and it will work. Have a look at this fiddle
You can use min-width for <td> like this link.
you only need to set fixed block bkgImg sizes width:32px; height:32px; or change the padding: 6px 11px;
.bkgImg {
width: 32px;
height: 32px;
background: url("http://www.charlespetzold.com/blog/2012/12/BezierCircleFigure3.png") no-repeat;
background-size:32px 32px;
/*padding: 6px 8px 6px 8px;*/
color: white;
text-align:center;
}
DEMO
You need to specifiy width and height
You should avoid use background-image for circle but border-radius
.value {
width: 30px;
height: 30px;
border-radius: 30px;
background-color: orange;
color: white;
}
avoid also to use table for non tabular data
Just change background-size:32px 32px to background-size:100% 100%;
DEMO
You need to set width and height of your element. For example add:
bkgImg {
width:450px;
height:450px;
}
Example:
http://jsfiddle.net/pndz/WFQLC/
Add following css
.value {
width: 30px;
height: 30px;
}
I have a Triangle (Drawing using css) and I am displaying a number inside the triangle..
But my number is dynamic (I am getting number different always).
I want number should align center of the triangle for all different values.
My Html :-
<div class="triangle-up"><span class="triangle-up-span">125</span>
</div>
<div class="triangle-up"><span class="triangle-up-span">1</span>
</div>
<div class="triangle-up"><span class="triangle-up-span">1255</span>
</div>
<div class="triangle-up"><span class="triangle-up-span">12</span>
</div>
My Css:-
.triangle-up {
width: 0;
height: 0;
border-style: solid;
border-width: 0 36px 38px 36px;
border-color: transparent transparent #d30000 transparent;
line-height: 0px;
left:-10px;
position:relative;
}
.triangle-up-span {
text-align: center;
line-height: 44px;
position:relative;
}
jsfiddle code here
Please guide if I did any silly mistake..
Demo
Add below properties to .triangle-up-span
width : 38px;
/* equal to triangle bottom width */
margin-left : -19px;
/* equal to negative of half of triangle bottom width/width of .triangle-up-span */
Here is the changed css of .triangle-up-span
.triangle-up-span {
text-align: center;
line-height: 44px;
position:relative;
width: 38px;
display: block;
margin-left: -19px;
}
guys. I style little form with submit button.
It looks like:
As you can see there is some white background around submit image and I don't have idea why! Image is cut fine and I always cut image with transparent background.
my HTML:
<form action="#">
<textarea rows="4" cols="50"> </textarea>
<input type="submit" class="join-us" value="PŘIDEJ SE K NÁM">
</form>
CSS:
.join-us{
background-image: url("images/join_us.png");
background-repeat: no-repeat;
width:181px;
height: 114px;
line-height: 114px;
color: #f7f7f7;
vertical-align: top;
margin-top: 10px;
margin-left: 10px;
cursor:pointer;
white-space: nowarp;
}
Live website can be find on http://funedit.com/andurit/new
Can you help me to remove that white backgroun from there?
It's not a white background, it's the input element's border. Just remove it using CSS by adding the following rule to the .join-us class:
border: none;
It seems that you also need to adjust the height of the button to 106px, so your final class definition will look like this:
.join-us{
background-image: url("images/join_us.png");
background-repeat: no-repeat;
width:181px;
height: 106px;
line-height: 106px;
color: #f7f7f7;
vertical-align: top;
margin-top: 10px;
margin-left: 10px;
cursor:pointer;
white-space: nowrap;
border: none;
}
Setting
border: none;
is an important part to remove the standard <button>-style. However, in your case it is not quite enough: You also have to set
height: 106px;
Since your image is only that high.
It's not a Background of input.
You can easily remove this white border, by setting the CSS property border:none;,
And the bottom white background is due to your Image. It's because your image have some transparent area at the bottom.
If you want to remove it, you can try to set height: 106px; into CSS class .join-us.
After doing this your Input look like this : -
As buttons have there default border style, you need to overwrite that:
border:none;
so ur css should be:
.join-us{
background-image: url("images/join_us.png");
background-repeat: no-repeat;
width:181px;
height: 114px;
line-height: 114px;
color: #f7f7f7;
vertical-align: top;
margin-top: 10px;
margin-left: 10px;
cursor:pointer;
white-space: nowarp;
.join-us{
background-image: url("images/join_us.png");
background-repeat: no-repeat;
width:181px;
height: 114px;
line-height: 114px;
color: #f7f7f7;
vertical-align: top;
margin-top: 10px;
margin-left: 10px;
cursor:pointer;
white-space: nowarp;
}
Just add the following CSS to your .join-us class
border:none;
.join-us {
height:106px;
border:none;
}
Add both of these styles to your .join-us class.
border: none;
background-size: 100% 108%;
The border style will remove the small while line around your image. The background-size style will stretch out the image to fit perfectly into your class background with no white space.
You need to remove border: 2px outset buttonface; from your stylesheet.
Your background image height and input height are not equals. So as you see under image you have a void space that shows background-color.
So yaou have to set background-color equals transparent or change input height.
Use this:
background-color: rgba(0, 0, 0, 0);
background-image: url("images/join_us.png");
background-repeat: no-repeat;
border: 0 none;
color: #F7F7F7;
cursor: pointer;
height: 114px;
line-height: 114px;
margin-left: 10px;
margin-top: 10px;
vertical-align: top;
width: 181px;