I've met a small problem that I cannot seem to solve.
This is my CSS code that should work:
div.menu-menu_hun-container li {
padding: 5px;
font-size: 18px;
-moz-border-image:url("images/menu-border.png") 0 0 1 0;
-webkit-border-image:url("images/menu-border.png") 0 0 1 0;
border-image:url("images/menu-border.png") 0 0 1 0;
border-width: 1px;
border-image-repeat: space;
}
As you can see, I'm trying to add a border image only to the bottom of each menu element (except the last one as it's already solved). The problem is that the space property doesn't work at all. Menu elements are 187px width and the image is 125px. I want to position the border element to the left to cover 2/3 of the bottom line. Perhaps, I do not understand how this property works, but I think it should position a single image element to the center of the bottom border because there's no more space left for another image element to make the border complete. I hope you guys could clear the mess in my head.
If you can provide fiddle or image, it will be nice, anyway, Try to re-size the image and use border-image-repeat: space; or you can use round property.
Related
I've used border, border-top-image, border-image and none seem to do what I am after.
I have the following CSS:
#footer {
overflow: hidden;
clear: both;
width: 100%;
margin: 0 auto;
padding: 26px 0 30px 0;
border-top-image: url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg');
font-size: 0.8461538461538462em;
color: #aaa;
}
This does not seem to apply to the website I am trying to work on, I've tried it in Firefox and Chrome.
I only want the image to appear on the top border and wish to have no other borders (so it's sort of like a <hr />)
I don't think that there is any such property like border-top-image to give image border to any side of an element -
Use
border-image:url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg') 30 30 round;
but it give border around all sides. To remove border around rest of the sides I gave -
border-bottom:0;
border-left:0;
border-right:0;
It worked and here is my fiddle - http://jsfiddle.net/ashwyn/c7WxG/1/
There is the border-image-width: a b c d; property. The details:
a-d are the widths of the top, right, bottom and left borders, respectively
values of a-d may be in the form:
[x]px
[x] - multiples of border-width value
[x]% - percent of the image slice (appears non-working in Safari 7)
auto - derive from the width of the corresponding image slice
the default value is 1.
if you omit d, the value of b is used for the left border width
if you also omit c, the value of a is also used for the bottom border width
if you also omit b, the value of a is used for all borders :)
So for your example you could use:
border-image-width: 100% 0 0 0;
Alternatively the border-image shorthand property includes border-image-width as a parameter, so in one line of CSS:
border-image: url(image.png) 100% 0 0 0 / [desired_border_width]px 0 0 0 repeat;
This uses the entire image for the top slice ("100% 0 0 0") and applies it as the top border at the desired width.
Another SOLUTION - create visual "BEFORE" phseudo-element :
.yourDiv::before{
background:url("http://lorempixel.com/200/100/");
width:100%;
height:20px;
}
You said you wish to have no other borders, so instead of border-image-width you can also simply use the border-width shorthand :
see https://jsfiddle.net/j2x6n3q9/
The border image is specified as a URI, for two different groups:
The URI of upto three images may be specified for each of the four border edges. If one image URI is given, the first tile is centered on the border line. If two image URIs are given, they meet at the center of the border line with the first image placed on the top or left side of the center. If three image URIs are given, the second becomes the center and does not tile. The other two are placed on either side of the center image, with the first going on the top or left side of the center and the third going on the bottom or right.
For more refer w3.org
I've used border, border-top-image, border-image and none seem to do what I am after.
I have the following CSS:
#footer {
overflow: hidden;
clear: both;
width: 100%;
margin: 0 auto;
padding: 26px 0 30px 0;
border-top-image: url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg');
font-size: 0.8461538461538462em;
color: #aaa;
}
This does not seem to apply to the website I am trying to work on, I've tried it in Firefox and Chrome.
I only want the image to appear on the top border and wish to have no other borders (so it's sort of like a <hr />)
I don't think that there is any such property like border-top-image to give image border to any side of an element -
Use
border-image:url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg') 30 30 round;
but it give border around all sides. To remove border around rest of the sides I gave -
border-bottom:0;
border-left:0;
border-right:0;
It worked and here is my fiddle - http://jsfiddle.net/ashwyn/c7WxG/1/
There is the border-image-width: a b c d; property. The details:
a-d are the widths of the top, right, bottom and left borders, respectively
values of a-d may be in the form:
[x]px
[x] - multiples of border-width value
[x]% - percent of the image slice (appears non-working in Safari 7)
auto - derive from the width of the corresponding image slice
the default value is 1.
if you omit d, the value of b is used for the left border width
if you also omit c, the value of a is also used for the bottom border width
if you also omit b, the value of a is used for all borders :)
So for your example you could use:
border-image-width: 100% 0 0 0;
Alternatively the border-image shorthand property includes border-image-width as a parameter, so in one line of CSS:
border-image: url(image.png) 100% 0 0 0 / [desired_border_width]px 0 0 0 repeat;
This uses the entire image for the top slice ("100% 0 0 0") and applies it as the top border at the desired width.
Another SOLUTION - create visual "BEFORE" phseudo-element :
.yourDiv::before{
background:url("http://lorempixel.com/200/100/");
width:100%;
height:20px;
}
You said you wish to have no other borders, so instead of border-image-width you can also simply use the border-width shorthand :
see https://jsfiddle.net/j2x6n3q9/
The border image is specified as a URI, for two different groups:
The URI of upto three images may be specified for each of the four border edges. If one image URI is given, the first tile is centered on the border line. If two image URIs are given, they meet at the center of the border line with the first image placed on the top or left side of the center. If three image URIs are given, the second becomes the center and does not tile. The other two are placed on either side of the center image, with the first going on the top or left side of the center and the third going on the bottom or right.
For more refer w3.org
On this page, you'll see a blog post that has a thumbnail, tag set and other information in a sidepanel on the left: http://www.elegantthemes.com/preview/TheStyle/2010/10/morbi-rutrum-interdum-justo/.
What I am trying to do is to create a black rectangle on this white div, a black rectangle that extends from the top left of the white div to the bottom, just left of the post text.
At first I tried simply creating a two-color image that was one pixel wide and using repeat-y in order to extend the "faux two column" layout from top to bottom. However, this div resizes dynamically, so in many cases the black text from the post ends up running over into this sidebar.
I then tried using the same image in the same way, but giving the white div a "position: absolute" trait. This caused the sidebars on the right to spill over onto the post content.
I want to create this black rectangle to take up any whitespace to the left of the post content.
I have inherited a lot of CSS that I'm not sure how to change. Any advice would be greatly appreciated. `
I will add the style.CSS file here if I can find some way to do so. This is my first time on the site.
Looking into the CSS, it says that everything you said is within its own div:
<div class="info-panel">
With that said, you just make your CSS changes to that class. You'd do something like:
.info-panel {
background-color: #000;
}
But keep in mind that, for it to look good, you should play with the padding and margins for the info-panel and post-content classes as well.
I just made it look better and keep the same overall width by including the following:
.post-content {
background: url("images/entry-bottom-bg.png") repeat-x scroll left bottom transparent;
padding: 0 4% 30px 1%;
}
.info-panel {
background: none repeat scroll 0 0 #000000;
float: left;
margin-right: 1%;
padding: 2% 0 2% 2%;
width: 29%;
}
The last two code snippets from the CSS are just some advice on what I would do if my solution worked for you. Doesn't mean you have to, so please don't treat it as such. It just keeps the area from looking awful.
It's hard to decipher what exactly you're trying to do, but see if this helps:
.post-content.info-panel {
background-color: black;
padding: 4px;
width: 28%;
}
I wonder how to (CSS-wise) realize a Button with a counter element like the Tweet-Button. The call-out seems to grow with the number of digits; the backgrund sprite used http://platform0.twitter.com/widgets/images/tweet.png has a significantly wider call-out than visible in the basic (i.e. one digit) button rendered.
Any help is greatly appreciated!
The key is to use a correct background position.
They use two elements:
<span><a href=#" >1</a></span>
Apply a background to the span, position it (according to the position of the image in the sprite), and specify the padding for positioning the number:
span {
background-img: url("sprite.png");
background-position: 0 -50px;
padding: 0 0 0 5px;
}
This is the left side of the call-out. The '0 -50px' means the portion of the sprite 50px from the top, 0px from the left is used.
Next style the anchor and the trick is to apply the background to the right side of the element this time:
a {
background-img: url("sprite.png");
background-position: right -50px;
padding: 0 5px 0 0;
}
This background is aligned to the right side of the (growing) anchor and the left side is chopped of.
This way there are actually two images on top of each other, the right-side is on top of the left side (but they are really the same portion of the sprite). The number can grow only as much as the width of the original sprite, otherwise the left side of the anchor background (on top) will be visible.
I am unable to understand especially in background property.
.stars div a {
background: transparent url(sprite_rate.png) 0 0 no-repeat;
display: inline-block;
height: 23px;
width: 12px;
text-indent: -999em;
overflow: hidden;
}
background:
transparent hope it's clear :)
url(sprite_rate.png) a background image
0 0 a position in the container - left top corner
no-repeat the background image shouldn't repeat
display: inline-block;
a box behaving like an inline element, see http://www.w3schools.com/css/pr_class_display.asp
height: 23px;
width: 12px;
size of an element
text-indent: -999em;
kicks the element far beyond the visible area, http://www.w3schools.com/css/pr_text_text-indent.asp
overflow: hidden;
hides the content that doesn't fit in the element, http://www.w3schools.com/css/pr_pos_overflow.asp
The CSS background property is a shorthand property of the following properties below:
The order of the property values for the CSS background property are:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is missing, as long as the ones that are present are in this order.
In your case you're doing the following:
background: transparent url(sprite_rate.png) 0 0 no-repeat;
transparent
That means that the background color is transparent
url(sprite_rate.png)
The url of the background image is sprite_rate.png.
0 0
The left and top position is 0px.
no-repeat
The last parameter is no-repeat which means the image will not repeat on the x- and y- axis.
Here's link to all the properties in correct order:
http://www.w3schools.com/css/pr_background-color.asp
http://www.w3schools.com/css/pr_background-image.asp
http://www.w3schools.com/css/pr_background-position.asp
http://www.w3schools.com/css/pr_background-repeat.asp
You can read more about the background shorthand property at:
http://www.w3schools.com/css/css_background.asp
The syntax for the background CSS shorthand property is:
background: { background-color background-image background-repeat background-attachment background-position | inherit } ;
It combines a large number of background properties into a single shorthand property. See:
http://reference.sitepoint.com/css/background for more information.
The technique you're looking at is known as CSS Sprites. You can find more information about it here:
http://www.alistapart.com/articles/sprites
Draws the top-left corner of sprite_rate.png over an otherwise transparent background without repeating (tiling) the image. It will be displayed inline (between text) but act as a block and will be 12 pixels wide and 23 pixels high. The first line of text will be indented so far to the left that most likely none of it will be visible, especially since overflow will be hidden (nothing outside the 12x23 rectangle will be rendered).
All of that could have been googled.