I am a newbie of CSS3, and recently I am learning the border-image attributes, when I read the W3C documents:
http://dev.w3.org/csswg/css-backgrounds/#border-image-width
I found the following lines:
The border image is drawn inside an area called the border image area.
This is an area whose boundaries by default correspond to the border
box, see ‘border-image-outset’.
so, what exactly the "border image area" and "border-box" mean? and what's the effects of border-image-width and border-image-outset?
I think the W3C documents don't explain it very clearly.
thanks in advance!
The border box is defined as everything within the outer perimeter of the borders of a box, including the borders themselves, if any. This definition is given in this section of CSS2.1. If there are no borders, then it's the perimeter of the padding box (or, if there's no padding either, then the content box). The border image area is defined as the entire area of the border box, including the padding and content.
So if you have a box with a border width of 30px, then the border image fits into the 30 pixels surrounding the box by default. When you specify a value for border-image-outset, the image is rendered that set distance away from the border area, making it appear further away from the padding/content edge.
Note that border-image-outset by itself does not stretch the border image; it only shifts the border image area a set distance away from the border area. If you want to stretch the image as well, combine border-image-outset with border-image-width.
My understanding of them isn't perfect, but, from use I have found that:
The border image area is the area surrounding your content. If you set a 1px border, then it's 1px. If you use an image of say, 90 pixels in height for a border, and the border is 30px, like so...
XoX
o o
XoX
So X is the corner, o is a side. Anything in this area is the border box.
Related
Kind of a confusing request to phrase. But basically I'd like to have a border around content that has some text centered on the top middle of the border, without having the border strike through the text. Please see the attached image. Also, I will edit to provide my code if you deem it necessary.
Thanks!
Here you go:
https://jsfiddle.net/4nhk3ooy/1/
You put your header inside the box and then put it position:absolute with correct offset. Then you set the background of header to correct color. Also put some padding to it, so there is some space between border and text. Then you just have to correctly count the offset. Also take in mind, that for some responsive features, you might want to write some JS algorithm to count everything depending on size of screen (because you will have to handle text size, after that alter header width, after that alter header padding and after that take all this and calculate correct offset)
And also take note, that the bordered box has to be also positioned, relative, absolute or fixed, or your absolutely positioned header will not be positioned against the div, but against the screen.
I have a view in which I am using some drop downs like
Access Link
I am unable to show border bottom, I have tried to give border-bottom or border definition manually in that elements CSS but couldn't fix. Any help
It is not that it has no bottom border, but it is just not being shown by your browser.
Your button has a height of 40px. But it is also contained in a div that has a height of 40px and a box-sizing of border-box.
Based on this, when using border-box with box-sizing, the height allocated to the content (in this case, your button) is reduced after considering the border and padding attributes of the element (in this case, your div). I just do not know why the content appears to be being rendered in a way that it overlays the bottom border of your container div.
Note that the box-sizing property in your CSS is applied to all elements, including :before and :after pseudo elements.
You can resolve your issue and show the bottom border if you do any of the following:
Reduce the height of the button element (e.g., set .ms-choice to have height of 38px).
Increase the height of the container div (e.g. set to 42px). This will just mis-align your dropdown menus with your search input.
Change the container div to have a box-sizing of content-box.
Change the background-color of your button to transparent and put the white background color on your div.ms-parent.form-control. (I added this option to show that the button' is actually being rendered such that it overlays the bottom border of the containing div.)
UPDATE
To get the input back to the size I want it to be, I had to get rid of padding and borders. The following accomplished this:
*{padding:0; margin:0; border:0;}
Thanks to CBroe, I discovered this is unique to FF which adds to the input a default border of .75px and a padding of 1.5px. For a total of about 4.5px. Chrome does not.
UPDATE 2
The above fix only gets the child element back to the size I thought it should be. The accepted answer below shows that FF has a bug which explains why the outline didn't behave as it should, which is to outline the parent only and not expand for absolute positioned descendents.
I have two div elements stacked vertically with their outline property set to 1px. The div elements have a height of 117px.
I expect where the two div elements meet to have their outlines contiguous. It does so with no content.
When I place an absolute positioned input with top = 97px and height = 20px into the top div , the outline of that div is pushed down.
Here is a fiddle which shows this. If you remove the input, you will see how the top div outline sits next to the bottom div.
There are two things (at least) that I do not understand:
1) In examining the box using the browser's dev tools (Firefox), I see that the top div is in fact still 117px high. The outline should be drawn around the div, but appears not to be. Why?
2) The input has a top of 97px plus a height of 20px. Why would this affect the position of the outline? It looks like the outline is pushed down 4px.
That's because outlines are implementation dependent. It's not only the size:
Outlines may be non-rectangular.
From CSS3 UI,
This specification does not define the exact position or shape of the
outline, but it is typically drawn immediately outside the border box.
Firefox has historically had a tendency of making outlines bigger in various situations, e.g.
outlines are drawn outside (i.e., expanded by) box-shadow and other visual overflow
outlines are drawn outside (expanded by) outlines on descendant elements
The former was fixed, the latter seems the same as your problem.
I've 2 answers for you:
1) In examining the box using the browser's dev tools (Firefox), I see that the top div is in fact still 117px high. The outline should be drawn around the div, but appears not to be. Why?
The outline appears to be drawn around everything inside. So if an element stand out 100px at the bottom. The outline will also be moved 100px. In this case the input element stands out 8px. So the outline is 8px longer than you expected.
The input has a top of 97px plus a height of 20px. Why would this affect the position of the outline? It looks like the outline is pushed down 4px.
You were almost right there, 97px+20px is indeed 117px height. But you forgot to count 8px from the input element. This comes from a 3px thick border + 1px thick padding.
I'm working on a simple design here, but i have a little issue.
Please have a look at the final design example here: http://ronnieaarebrot.com/demo/cms/
On the menu to the left and right, you can see a small border going from the top to the bottom (following the height of the center content).
How can i do this? i was planning on having a background-image with the small border on both sides, but how should i "calculate" the height of the center content? or make the two borders follow the height of the center div. This is a bit hard to explain.. but check the image and here is an html example of how far I've come. http://ronnieaarebrot.com/demo/cms_html/
Any good solutions?
The easiest way would be to contain the centre content in a div element and use the border CSS property to apply it. You can then adjust padding and margins to butt the centre and side elements against one another. Given the model, it seems like some padding on the centre element combined with almost no margins on the sides would do the trick.
If you put overflow:hidden on the #page_wrap element that it will extent to the height of its contents (the left, center and right parts).
So you can put the backgorund image (1px height repeated vertically) on that element and be sure that it will extend all the way down..
Is there a way to let the repeating background 'start' fixed at the bottom of the div and overflow on the top? (the other way round than default)
Small example to show what I'm trying to accomplish. The red lines on the image below are the (horizontal) borders between several divs. The middle div is used as a transition between the upper and lower one, with a single non-repeating image. The background of the lower div consists of a repeating darker image with a paper hole, resulting in the paper border seen below.
Now the upper div (with sizable content) should have a repeating background image starting at the bottom and repeating upwards. This for maintaining the correct distance ratio between the holes instead of ending up with a smaller distance or even a partial hole in the 'paper border'.
Preferably it should be compatible with method 4 of equal height columns, but I don't see a problem there.
Just make sure you set background-position: right bottom; to the top div, and the background image should start from the bottom and "overflow" out the top.
Example in shorthand:
.my-div {
background:#fff url(my-bg.png) right bottom repeat;
}
Some reference in case you'd like to explore this further:
http://reference.sitepoint.com/css/background-position