Menu
I have this html:
<div class="warning">
<span>text text text</span>
</div>
and this css:
.warning
{
background:#F2EEBB url(Images/warning_triangle.gif) no-repeat right center;
border:solid 1px red;
margin:5px;
color:#000000;
font-weight:bold;
padding-top:3px;
padding-bottom:3px;
padding-left:3px;
padding-right:18px;
}
This is the result:
The problem is that the background image that aligned to the right don't have padding between it and the border. How can I add a padding between the image and the border? (I cannot add elements to the div!)
703
The padding-box value means that the only the padding box part of the HTML element has the background image rendered. The content-box value means that the only the content box part of the HTML element has the background image rendered.
you can use background-origin:padding-box; and then add some padding where you want, for example: #logo {background-image: url(your/image. jpg); background-origin:padding-box; padding-left: 15%;} This way you attach the image to the div padding box that contains it so you can position it wherever you want.
HTML | <img> hspace Attribute The HTML <img> hspace attribute is used to specify the number of whitespaces on the left and the right side of the image.
Double-click the image (not the shape). In the File Properties dialog, select the Appearance tab. In the Padding section, enter numbers in the Left, Right, Top, and/or Bottom fields to set the width of the padding (in pixels). Click OK.
Without any changes in html, and only a little change in css you can accomplish that .Try this css - I just change the position of the warning icon.
background:#F2EEBB url(Images/warning_triangle.gif) no-repeat 99.5% center;
<div class="warning">
<span>text text text</span>
</div>
.warning
{
background:#F2EEBB url(Images/warning_triangle.gif) no-repeat 99.5% center;
border:solid 1px red;
margin:5px;
color:#000000;
font-weight:bold;
padding-top:3px;
padding-bottom:3px;
padding-left:3px;
padding-right:18px;
}
83
You could use the ":after"-psuedo class. That also makes your icon show up if a user prints the page. I made you an example.
33
To make it consistent as 18px padding from the right side you can use calc.
background-position-x: calc(100% - 18px);
You can cut that image in photoshop as per how much space you want in your design
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
