I need to add padding to a class with a background image. However, when I do so, the padding isn't added to the background image, just the anchor. What am I doing wrong? Here's my CSS:
.heart {
width:200px;
height:18px;
background:url(/images/content/digital-learning/course-library/sprite-favorites.png) 0px 18px repeat-y;
padding-left: 20px;
display:block;
}
Try using margin-left: 20px; instead.
Margin is outside the container and padding is inside the container, so padding won't move the background of the container.
Background can show based on background-origin: content-box;
.heart {
width: 200px;
height: 18px;
border: 1px solid tomato;
background: url('https://via.placeholder.com/50x100') left center repeat-y;
padding-left: 20px;
display: block;
background-origin: content-box;
}
<div class="container">
<div class="heart">x</div>
</div>
or
Another solution is background-position-x: 20px;
.heart {
width: 200px;
height: 18px;
border: 1px solid tomato;
background-image: url('https://via.placeholder.com/50x100');
padding-left: 20px;
display: block;
background-position-x: 20px;
background-repeat: repeat-y
}
<div class="container">
<div class="heart">x</div>
</div>
Related
I am finding it hard to fit an image inside a Div that contain a text. Everytime I try to get it to fit inside the boundaries of the super div, it simply goes out of bounds regardless of what I use from the css side. can anyone tell me what I am doing wrong?
.justRight {
float: right;
max-height: 100%;
max-width: 100%;
margin-bottom: 40px;
margin-right: 50px;
background-image: url(https://internal.bs.fb.ac.uk/modules/2017-
18/bsl/css/sign_language.png);
background-size: cover;
background-repeat: no-repeat;
}
.jas {
background-color: white;
border: 1px outset blue;
position: absolute;
margin-left: 20px;
border-top: 40px solid blue;
border-right: 2px outset blue;
margin-top: 10px;
margin-right: 20px;
height: 80px;
padding-left: 10px;
width: 96.3%;
}
<div class="jas">
<h1>Sign Language</h1>
<div class="justRight">
</div>
</div>
By saying height: 80px to parent (.jas), you are restricting the parent div's height to 80px. So it wont go beyond. So remove height of parent(.jas). Set a height to the child instead(.justRight).
Not sure why you used float: right value to the child(.justRight). Please remove if it is unnecessary.
Codepen: https://codepen.io/johnsackson/pen/KRdvMQ
* {
box-sizing: border-box;
}
.justRight {
height: 100px;
max-width: 100%;
margin-bottom: 10px;
background: url(https://placehold.it/1920x200) 0 0 no-repeat;
background-size: cover;
}
.jas {
background-color: white;
border: 1px outset blue;
/* position: absolute; */ /* use if only needed */
margin: 10px 0;
border-top: 40px solid blue;
border-right: 2px outset blue;
padding: 0 10px;
width: 100%;
}
Hope this helps.
Your problem is that the h1 tag is on position: relative. Changing it would solve your issues.
h1 {position: absolute}
I found that the following CSS instruction does not resize the DIV background image showing in IE9. Do you have any idea?
HTML:
<DIV id=window20 class="window smallWindow">
<STRONG>abcde</STRONG>
<BR /><BR />
</DIV>
CSS:
.window {
Z-INDEX: 20;
BORDER-BOTTOM: #346789 2px dotted;
POSITION: absolute;
BORDER-LEFT: #346789 2px dotted;
PADDING-BOTTOM: 0.5em;
PADDING-LEFT: 0.5em;
WIDTH: 14em;
PADDING-RIGHT: 0.5em;
FONT-FAMILY: helvetica;
HEIGHT: 4em;
COLOR: white;
FONT-SIZE: 1.0em;
BORDER-TOP: #346789 2px dotted;
BORDER-RIGHT: #346789 2px dotted;
PADDING-TOP: 0.5em;
border-radius: 0.6em;
-moz-border-radius: 0.6em
}
.smallWindow1 {
BACKGROUND-COLOR: #558822
}
#window20 {
TOP: 10em;
LEFT: 8em;
WIDTH: 8em;
HEIGHT: 4em;
background-image :url(../image/interface_system.png);
background-repeat: no-repeat;
background-size: auto;
background-origin: content-box;
}
Try This
CSS
#window20 {
TOP: 10em;
LEFT: 8em;
WIDTH: 8em;
HEIGHT: 4em;
background-image :url(../image/interface_system.png);
background-repeat: no-repeat;
background-size: contain;
background-origin: content-box;
}
IE9 does support background-size, but the problem in your example is that you have background-size: auto, which means not to stretch the background! (Which is the default if you don't specify the property.)
Solution: use 100% 100% or cover or contain, depending on your needs.
See https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I would have made a fiddle, but I don't have your background picture, and besides, the div in your example doesn't move, so it would not have been very illustrative.
Any way to declare a size/partial border to a box in CSS? For example a box with 350px that only shows a border-bottom in its firsts 60px. I think that might be very useful.
Examples:
Not really. But it's very easy to achieve the effect in a way that degrades gracefully and requires no superfluous markup:
div {
width: 350px;
height: 100px;
background: lightgray;
position: relative;
margin: 20px;
}
div:after {
content: '';
width: 60px;
height: 4px;
background: gray;
position: absolute;
bottom: -4px;
}
<div></div>
I know, this is already solved and pixels were requested. However, I just wanted to share something...
Partly underlined text elements can easily achieved by using display:table or display:inline-block
(I just don't use display:inline-block because, yeah you know, the awkward 4px-gap).
Textual Elements
h1 {
border-bottom: 1px solid #f00;
display: table;
}
<h1>Foo is not equal to bar</h1>
Centering, display:table makes it impossible to center the element with text-align:center.
Let's work around with margin:auto...
h1 {
border-bottom: 1px solid #f00;
display: table;
margin-left: auto;
margin-right: auto;
}
<h1>Foo is not equal to bar</h1>
Well, that's nice, but it's not partially.
As bookcasey already introduced, pseudo-elements are worth gold.
h1 {
display: table;
margin-left: auto;
margin-right: auto;
}
h1:after {
border-bottom: 1px solid #f00;
content: '';
display: block;
width: 50%;
}
<h1>Foo is not equal to bar</h1>
Offset, the underline is left aligned right now. To center it, just push the pseudo-element the half of its width (50% / 2 = 25%) to the right.
h1 {
display: table;
margin-left: auto;
margin-right: auto;
}
h1:after {
border-bottom: 1px solid #f00;
content: '';
display: block;
margin-left: 25%;
width: 50%;
}
<h1>Foo is not equal to bar</h1>
...as davidmatas commented, using margin:auto is sometimes more practical, than calculating the margin-offset by hand.
So, we can align the underline to the left, right or center (without knowing the current width) by using one of these combinations:
Left: margin-right: auto (or just leave it off)
Middle: margin: auto
Right: margin-left: auto
Full example
.underline {
display: table;
margin-left: auto;
margin-right: auto;
}
.underline:after {
border-bottom: 1px solid #f00;
content: '';
display: block;
width: 50%;
}
.underline--left:after {
margin-right: auto; /* ...or just leave it off */
}
.underline--center:after {
margin-left: auto;
margin-right: auto;
}
.underline--right:after {
margin-left: auto
}
<h1 class="underline underline--left">Foo is not equal to bar</h1>
<h1 class="underline underline--center">Foo is not equal to bar</h1>
<h1 class="underline underline--right">Foo is not equal to bar</h1>
Block-Level Elements
This can easily be adopted, so that we can use block-level elements. The trick is to set the pseudo-elements height to the same height as its real element (simply height:100%):
div {
background-color: #eee;
display: table;
height: 100px;
width: 350px;
}
div:after {
border-bottom: 3px solid #666;
content: '';
display: block;
height: 100%;
width: 60px;
}
<div></div>
Here is another solution that rely on linear-gradient where you can easily create any kind of line you want. You can also have multiple lines (on each side for example) by using multiple background:
.box1 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(to right, transparent 20%, #000 20%, #000 40%, transparent 40%) 0 100% / 100% 3px no-repeat,
#ccc
}
.box2 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat,
#ccc
}
.box3{
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat,
linear-gradient(to right, transparent 30%, blue 30%, blue 70%, transparent 70%) 0 0 / 100% 2px no-repeat,
linear-gradient(to bottom, transparent 30%, brown 30%, brown 70%, transparent 70%) 0 0 / 3px 100% no-repeat,
linear-gradient(to bottom, transparent 20%, orange 20%, orange 70%, transparent 70%) 100% 0 / 3px 100% no-repeat,
#ccc
}
<div class="box1">
Box1
</div>
<div class="box2">
Box2
</div>
<div class="box3">
Box3
</div>
Here is another syntax to achieve the same as above:
.box1 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(#000 0 0) top /40% 3px no-repeat,
#ccc
}
.box2 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(red 0 0) bottom/ 60% 2px no-repeat,
#ccc;
}
.box3{
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(red 0 0)bottom left/ 60% 2px,
linear-gradient(blue 0 0) 60% 0 / 40% 2px,
linear-gradient(brown 0 0) left/ 3px 30%,
linear-gradient(orange 0 0) right / 3px 40%,
#ccc;
background-repeat:no-repeat;
}
<div class="box1">
Box1
</div>
<div class="box2">
Box2
</div>
<div class="box3">
Box3
</div>
I used a grid to build draw some of the borders.
See here.
Code:
/* ungrid without mobile */
.row {
width: 100%;
display: table;
table-layout: fixed;
}
.col {
display: table-cell;
}
/* things to change */
.row {
width: 70%;
margin: auto;
}
.mid.row>.col {
height: 150px;
}
/* draw box and align text */
.col {
text-align: center;
}
.top.left.col {
border-top: 1px solid black;
border-left: 1px solid black;
}
.top.right.col {
border-top: 1px solid black;
border-right: 1px solid black;
}
.bottom.left.col {
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.bottom.right.col {
border-bottom: 1px solid black;
border-right: 1px solid black;
}
.mid.row>.col {
border-left: 1px solid black;
border-right: 1px solid black;
vertical-align: middle;
}
.top.center.col {
position: relative;
top: -0.5em;
}
.bottom.center.col {
position: relative;
bottom: -0.5em;
}
<div class="row">
<div class="top left col"></div>
<div class="top center col">Top</div>
<div class="top right col"></div>
</div>
<div class="mid row">
<div class="col">Mid</div>
</div>
<div class="row">
<div class="bottom left col"></div>
<div class="bottom center col">Bottom</div>
<div class="bottom right col"></div>
</div>
CSS does not support partial borders. You'd need to use an adjacent element to simulate this.
Been playing a bit around with your solutions and came up with that.
I'd appreciate your comments and thoughts.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test file</title>
<style>
#box {
background-color: gray;
position: relative;
left: 10px;
top: 10px;
height: 180px;
width: 380px;
}
#grad1 {
position: absolute;
left: -10px;
top: -10px;
height: 40px;
width: 2px;
background-image: linear-gradient(red, red);
}
#grad2 {
position: absolute;
left: -10px;
top: -10px;
height: 2px;
width: 40px;
background-image: linear-gradient(red, red);
}
</style>
</head>
<body>
<div id="box">
<div id="grad1"></div>
<div id="grad2"></div>
</div>
</body>
</html>
JS fiddle : http://jsfiddle.net/Rkh8L/
I am trying to vertically middle div inside div. The class i want to be vertically middles is MonsterImage.
Here the whole code
<div style="float: left; text-align: center; vertical-align: middle; margin:10px;">
<asp:RadioButton ID="RdButtonMonsterImages" ClientIDMode="Static" runat="server" />
<div class="permonster" >
<div class="MonsterImage"></div>
</div>
</div>
.permonster
{
width: 130px;
height: 120px;
text-align: center;
vertical-align: middle;
border-top: 1px solid #f7fcff;
background: #ababab;
background: -webkit-gradient(linear, left top, left bottom, from(#e3e6e8), to(#ababab));
background: -webkit-linear-gradient(top, #e3e6e8, #ababab);
background: -moz-linear-gradient(top, #e3e6e8, #ababab);
background: -ms-linear-gradient(top, #e3e6e8, #ababab);
background: -o-linear-gradient(top, #e3e6e8, #ababab);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-decoration: none;
padding:2px;
}
.MonsterImage
{
border-width: 0px; border-style: none;
background-image: url(http://static.monstermmorpg.com/images/csssprites/RegisterCSS.png);
background-color: transparent;
margin:auto;
background-repeat: no-repeat;
background-position: -0px -120px;
width: 130px;
height: 96px;
}
You can center (vertical and horizontal align) a div inside a div as below
HTML
<div id="parent">
<div id="child">
</div>
</div>
CSS
#parent {
background-color: #333333;
position: relative;
height: 300px;
width:300px;
}
#child {
background-color: #cccccc;
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
See this article which explains how it works.
Note: Background color is only for illustration purposes only.
See the result below.
You can't vertical-align that element, just add some margin to the top of your .MonsterImage class, something like margin-top:13px; should do it.
Hate to disappoint you, but this is just not possible with CSS alone.
Here's some things you can do:
use fixed top and bottom margins on the inner div, and leave the outer div's height at 'auto' (you'll lose control over the outer div's height)
hard-code everything (you'll lose automatic resizing, obviously)
use javascript to adjust the sizes on-the-fly after loading the document
I'm trying to center the dotted line horizontally with CSS. At the moment, it appears at the bottom. Is there a way I can offset it with -5px or something?
HTML
<div class="divider"></div>
CSS
.divider {
background: aqua url("styles/images/divider-stars.png") no-repeat center 0;
height:30px;
padding-bottom: 10px;
width: 100%;
margin: 20px auto;
float: left;
border-bottom: 2px dotted #b38b0d;
}
no. But you can create another element that have the border and move it within the .divider
html
<div class="divider">
<div class="inner"></div>
</div>
css
.inner {
margin-top:19px;
border-bottom: 2px dotted #b38b0d;
}
Demo: http://jsfiddle.net/5xMG7/
You could also use :before or :after pseudo-selectors, to get rid of the inner element.
<div class="divider"></div>
.divider {
background: aqua url("styles/images/divider-stars.png") no-repeat center 0;
height: 30px;
padding-bottom: 10px;
width: 100%;
margin: 20px auto;
float: left;
}
.divider:after {
content: '';
display: block;
margin-top: 19px;
border-bottom: 2px dotted #b38b0d;
}
http://jsfiddle.net/5xMG7/540/
If you mean center it vertically, one way you can do it is like this:
<div class="divider"><span class="line"></span></div>
.divider {
background: aqua url("styles/images/divider-stars.png") no-repeat center 0;
height:30px;
padding-bottom: 10px;
width: 100%;
margin: 20px auto;
float: left;
}
.line
{
border-bottom: 2px dotted #b38b0d;
margin-top:15px;
display:block;
}