I want to set the border of a table to be "1px solid black" except on the bottom, where I want to use an image which provides a pointer into the link - as a visual aid.
Is it possible to set an image as the bottom border when the other borders are regular css.
Try putting the table inside <div class="myTableContainer"></div> and then:
.myTableContainer{
padding-bottom: 1px;
background: url(myBorderImage.png) bottom left;
}
This should work well across all browsers.
CSS3 has added support for border-image. You can find more information at http://www.w3.org/TR/css3-background/#border-images. At this point (early 2012), it's probably not safe to use due to lack of support in all versions of IE. To track when it is safe to use you can visit http://caniuse.com/#search=border-image. One way to simulate the border-image style is to use a positioned background-image. For example, to simulate a top border:
div
{
background-image: url('topBorder.gif');
background-position: top;
background-repeat: repeat-x;
}
I don't think so. You're probably better off adding a <DIV> below the table, give it a black border, a fixed background, and some fixed padding or whatnot (to give it some size).
One solution is to style your element with a background image in css and then specify an offset for the background in CSS. The background can poke out from beyond the edge of the element (a div or li element for example). This can be used for many different effects, one being the appearance of a drop shadow using pure css.
Some specifics here:
http://www.alistapart.com/articles/cssdropshadows/
Now there is CSS3 and a border-image property for that, but still it does not work for all browsers.
OK, let's there be a W3Schools link on this topic.
No. Why don't you try another table row for that purpose?
Try putting a below your table then set his style like
.bottomborder {
height:1px;
background-image:url("yourImage.png");
}
Should work good.
Edit : and of course border-top, left, right for your table a "solid 1px black"
You can set the borders like that except the bottom border :
border-top:1px solid black;
border-right:1px solid black;
border-left:1px solid black;
For the bottom border, you can set your image as background of a row maybe.
Related
In CSS it is perfectly possible to combine background-image and background-color, which I often use to style an element with a background color and lay a semi-transparent pattern over it, like I did with my navbar:
background-color: #fa4457;
background-image: url(../images/pattern/overlay.png);
or shorthand
background: #fa4457 url(../images/pattern/overlay.png);
The following image shows that my navbar has both a background color and a background image to create a paper-like effect, but the selected menu item has a solid white bottom-border.
if I use this code, it looks like this
border-image: url(../images/pattern/overlay.png) 0 0 10 repeat;
can I somehow combine this with
border-bottom: 10px solid #fff;
Or is there any way which does not involve creating an extra element?
You said that don't want to create extra elements, but maybe then just use pseudo elements? like :before or :after on your items,
http://www.smashingmagazine.com/2011/07/learning-to-use-the-before-and-after-pseudo-elements-in-css/
Ok, I have somehow found the solution.
This:
background: white url(../images/pattern/overlay.png) repeat;
border-bottom: 10px solid rgba(0,0,0,0);
result in this:
thanks to justtry for pointing me in the right direction of using pseudo elements. I still don't quite understand why they behave this way though.
Consider the following:
I am writing a debug class to show the position of elements on a page. I want to show the margin edge above (outside dashed line), but realise I can not use the border as this is the inside margin edge. How can I do this?
You’re probably best off setting an outline in combination with an outline-offset. outline is like border, but doesn’t take up any space in the layout and has a slightly different set of rules. Given a div with a 1px border and 10px margin, you’d add an outline like this:
div {
border: 1px solid black;
margin: 10px;
outline: 1px solid red;
outline-offset: 10px;
}
More info on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset
Unfortunately outline-offset isn’t supported in IE. If you need to support that then you’ll have to go down the psuedoelement route as per the other answers.
The box model prevents this.
As you in your original post the margin of a box is not included in it's content size. Without changing your margin to padding this could only be done with pseudo elements.
http://jsfiddle.net/Fcwkw/1/
Since you mentioned it's a class you can simply get a div's margin with some Javascript and set the pseudo padding to the margin.
That's not how border's work, and your image is a perfect example of that. You could create a border with a second element or with the use of :after for example...
You can use :before/:after with position:absolute, border-left/right and height:100%
i hope someone can answer this question because my client wants this and right now i dont know how to build this in css.
Does anyone know how to build something like this ?
It should be something like if you align your image to the right your text will align nicely with the image.
Here what i want to do is to build a div make a border around all the text that has been typed and then align it with the image. how could i do this?
After the help of Pete.
Problem here is the
box-shadow
Also the box needs to be transparant later in the stage.
This is my result right now http://jsfiddle.net/peteng/cu59r/.
Edit : Thank you for all the answers and support to help me solve this css issue.
The following thing it should happen is :
See the picture.
See the jsfiddle link i posted.
The content with the border needs a box-shadow, a border radius and a gradient.
This needs to be dynamic.
And again thank you community for helping me means alot to me.
with the use of a couple of images you should be able to create what you want
html
<div id="wrapper">
<div id="imageHolder"><div class="inner"><img src="http://lorempixel.com/200/200" /></div></div>
<!--put text here-->
<p>Text</p>
</div>
css
#wrapper {width:400px; border-radius:10px; border-top-right-radius:0px; background-color:#7ab37a; overflow:auto; padding:15px;}
#imageHolder {float:right; margin:-15px -15px 0 0; background:#ffffff url(http://i.imgur.com/gMIy72D.gif) left top no-repeat;}
#imageHolder .inner {background:url(http://i.imgur.com/RLBbLYV.gif) right bottom no-repeat; padding:10px 10px 20px 20px;}
Example
Update
With all your edits as to what you now want (instead of the simple l-shape in your original question). This is not possible for the following reason
The text has to have a background colour which means that you need the background colour on the main wrapper so that it will make the l-shape. This means the only way to get the desired effect of the rounded corners for the image is to place another background over the wrapper background (meaning you cannot have anything transparent otherwise the wrapper background-color will just show through)
The best you can hope for is to tell the client, if they want that shape, they will have to keep the images to an exact size and their text to a specific length and then you can use a simple background image
I think there isn't a easy way to style your text-box like this.
My suggestion: designs the box with Photoshop and then add it as a background image in two different divs (the text box should have a transparent background where the image should be). After this you position the divs in the right way, if necessary with a wrapper div.
disadvantages: not responsive, static, and so on
You can simply float the image and it will look like this: http://www.homeandlearn.co.uk/wd/images/chapter3/text_wrap_final.gif
Just add
float: right/left;
margin: 0;
See if that works.
see this DEMO . Is this what you are expecting.
<figure style="float:right;">
This is a very good question in my opinion :)
My short answer would be - yes, it's possible - see Pete's answer. I understand the difficulty of the situation and also I understand the fact that this kind of solution lacks flexibility because it combines css border-radius and an image - so => a) it will look weird in IE8 and below and b) it will look weird if we change some css :)
My own answer would be to use css only to do that, but the main issue will be unsolved, the corners close to the image will not be rounded by any means in css that I'm aware of.
Consider looking at this fiddle - http://jsfiddle.net/skip405/m6cpb/1/
I would prefer my variant because it's a bit more flexible - if there is a need of change - only css will change, no need of re-making any images of another color or of a different radius... no images needed at all :) Although you will need to style the images floated to the left differently and those - in the middle of the text as well.
Skull3r7 had a good idea with background-images. In addition, it is possible to use two divs with (dynamic) text and one other with the 'top border'.
Layer one contains the text as 'placeholder' and 'bottom border',
Layer two contains the 'top border image' (covers the top of Layer one)
Layer three contains the visible text.
Example
However, it is easier to implement Pete's solution, but I hope this example can help too. :)
A further alternative to those suggested, given the following HTML structure:
<div class="imgContainer">
<img src="http://placekitten.com/150/150" />
<p><!-- text excised for brevity --></p>
</div>
And CSS:
.imgContainer {
border: 1px solid #000;
padding: 0;
width: 80%;
margin: 0 auto 1em auto;
border-radius: 1em;
}
.imgContainer img {
float: right;
margin: -1px -1px 0 0;
padding: 0 0 0.5em 0.5em;
border: 1px solid #fff;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
.imgContainer p {
margin: 0.5em;
padding: 0;
text-indent: 0.5em;
}
JS Fiddle demo.
This should allow any size image to be used (so long as it fits within the container element, of course), and be responsive, and adaptable to changed sizes.
Unfortunately, though, I can't think of a way to provide the curve on the borders of the img itself. On the plus-side, it avoids needlessly wrapping and re-wrapping elements, so the HTML itself could, and should, stay pretty lean.
This question already has answers here:
CSS: Background image and padding
(9 answers)
Closed 3 years ago.
I'd like to add a background to a div, position right center, but!, have some padding to the image. The div has padding for the text, so I want to indent the background a little. probably makes most sense w/ example:
http://jsbin.com/umuvud/edit#javascript,html,live
Thanks!
Updated Answer:
It's been commented multiple times that this is not the correct answer to this question, and I agree. Back when this answer was written, IE 9 was still new (about 8 months old) and many developers including myself needed a solution for <= IE 9. IE 9 is when IE started supporting background-origin. However, it's been over six and a half years, so here's the updated solution which I highly recommend over using an actual border. In case < IE 9 support is needed. My original answer can be found below the demo snippet. It uses an opaque border to simulate padding for background images.
#hello {
padding-right: 10px;
background-color:green;
background: url("https://placehold.it/15/5C5/FFF") no-repeat scroll right center #e8e8e8;
background-origin: content-box;
}
<p id="hello">I want the background icon to have padding to it too!I want the background icon twant the background icon to have padding to it too!I want the background icon to have padding to it too!I want the background icon to have padding to it too!</p>
Original Answer:
you can fake it with a 10px border of the same color as the background:
http://jsbin.com/eparad/edit#javascript,html,live
#hello {
border: 10px solid #e8e8e8;
background-color: green;
background: url("http://www.costascuisine.com/images/buttons/collapseIcon.gif")
no-repeat scroll right center #e8e8e8;
}
this is actually pretty easily done. You're almost there, doing what you've done with background-position: right center;. What is actually needed in this case is something very much like that. Let's convert these to percentages. We know that center=50%, so that's easy enough. Now, in order to get the padding you wanted, you need to position the background like so: background-position: 99% 50%.
The second, and more effective way of going about this, is to use the same background-position idea, and just use background-position: 400px (width of parent) 50%;. Of course, this method requires a static width, but will give you the same thing every time.
Method 1 (99% 50%)
Method 2 (400px 50%)
There is actually a native solution to this, using the four-values to background-position
.CssClass {background-position: right 10px top 20px;}
This means 10px from right and 20px from top.
you can also use three values the fourth value will be count as 0.
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.
In case anyone else needs to add padding to something with background-image and background-size: contain or cover, I used the following which is a nice way of doing it. You can replace the border-width with 10% or 2vw or whatever you like.
.bg-image {
background: url("/image/logo.png") no-repeat center #ffffff / contain;
border: inset 10px transparent;
box-sizing: border-box;
}
This means you don't have to define a width.
first off, to be a bit of a henpeck, its best NOT to use just the <background> tag. rather, use the proper, more specific, <background-image> tag.
the only way that i'm aware of to do such a thing is to build the padding into the image by extending the matte. since the empty pixels aren't stripped, you have your padding right there. so if you need a 10px border, create 10px of empty pixels all around your image. this is mui simple in Photoshop, Fireworks, GIMP, &c.
i'd also recommend trying out the PNG8 format instead of the dying GIF... much better.
there may be an alternate solution to your problem if we knew a bit more of how you're using it. :) it LOOKS like you're trying to add an accordion button. this would be best placed in the HTML because then you can target it with JavaScript/PHP; something you cannot do if it's in the background (at least not simply). in such a case, you can style the heck out of the image you currently have in CSS by using the following:
#hello img { padding: 10px; }
WR!
To add space before background image, one could define the 'width' of element which is using 'background-image' object. And then to define a pixel value in 'background-position' property to create space from left side.
For example, I'd a scenario where I got a navigation menu which had a bullet before link item and the bullet graphic were changeable if corrosponding link turns into an active state. Further, the active link also had a background-color to show, and this background-color had approximate 15px padding both on left and right side of link item (so on left, it includes bullet icon of link too).
While padding-right fulfill the purpose to have background-color stretched upto 15px more on right of link text. The padding-left only added to space between link text and bullet.
So I took the width of background-color object from PSD design (for ex. 82px) and added that to li element (in a class created to show active state) and then I set background-position value to 20px. Which resulted in bullet icon shifted inside from the left edge. And its provided me desired output of having left padding before bullet icon used as background image.
Please note, you may need to adjust your padding / margin values accordingly, which may used either for space between link items or for spacing between bullet icon and link text.
What is the difference between border and outline properties in CSS?
If there is no difference, then why are there two properties for the same thing?
From: http://webdesign.about.com/od/advancedcss/a/outline_style.htm
The CSS outline property is a confusing property. When you first learn about it, it's hard to understand how it is even remotely different from the border property. The W3C explains it as having the following differences:
Outlines do not take up space.
Outlines may be non-rectangular.
In addition to some other answers... here are a few more differences I can think of:
1) Rounded corners
border supports rounded corners with the border-radius property. outline doesn't.
div {
width: 150px;
height: 150px;
margin: 20px;
display: inline-block;
position: relative;
}
.border {
border-radius: 75px;
border: 2px solid green;
}
.outline {
outline: 2px solid red;
border-radius: 75px;
-moz-outline-radius: 75px;
outline-radius: 75px;
}
.border:after {
content: "border supports rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}
.outline:after {
content: "outline doesn't support rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}
<div class="border"></div>
<div class="outline"></div>
FIDDLE
(NB: Although firefox has the -moz-outline-radius property which allows rounded corners on outline... this property it is not defined in any CSS standard, and is not supported by other browsers (source))
2) Styling one side only
border has properties to style each side with border-top:, border-left: etc.
outline can't do this. There's no outline-top: etc. It's all or nothing. (see this SO post)
3) offset
outline supports offset with the property outline-offset. border doesn't.
.outline {
margin: 100px;
width: 150px;
height: 150px;
outline-offset: 20px;
outline: 2px solid red;
border: 2px solid green;
background: pink;
}
<div class="outline"></div>
FIDDLE
Note: All major browsers support outline-offset except Internet Explorer
Further to other answers, outlines are usually used for debugging. Opera has some nice user CSS styles that use the outline property to show you where all the elements are in a document.
If you're trying to find out why an element isn't appearing where you expected or at the size you expected, add a few outlines and see where the elements are.
As already mentioned, outlines do not take up space. When you add a border, the element's total width/height in the document increases, but that doesn't happen with outline. Also you can't set outlines on specific sides like borders; it's all or nothing.
tldr;
The W3C explains it as having the following differences:
Outlines do not take up space.
Outlines may be non-rectangular.
Source
Outline should be used for accessibility
It should also be noted that outline's primary purpose is accessibility. Setting it to outline: none should be avoided.
If you must remove it it maybe a better idea to provide alternative styling:
I’ve seen quite a few tips on how to remove the focus indicator by using outline:none or outline:0. Please do not do this, unless you replace the outline with something else that makes it easy to see which element has keyboard focus. Removing the visual indicator of keyboard focus will give people who rely on keyboard navigation a really hard time navigating and using your site.
Source: "Do Not Remove the Outline from Link and Form Controls", 365 Berea Street
More Resources
http://outlinenone.com/
A practical use of outline deals with transparency. If you have a parent element with a background, but want a child element's border to be transparent so that the parent's background will show through, you must use "outline" rather than "border." While a border can be transparent, it will show the child's background, not the parent's.
In other words, this setting created the following effect:
outline: 7px solid rgba(255, 255, 255, 0.2);
From W3 School Site
The CSS border properties allow you to specify the style and color of an element's border.
An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
The outline shorthand property sets all the outline properties in one declaration.
The properties that can be set, are (in order): outline-color, outline-style, outline-width.
If one of the values above are missing, e.g. "outline:solid #ff0000;", the default value for the missing property will be inserted, if any.
Check here for more information :
http://webdesign.about.com/od/advancedcss/a/outline_style.htm
Border is created inside the element, where as outline is created outside the element. So border is computed along with the width and height of the element, while outline draws outside the element.
A little bit of an old question, but worth mentioning a Firefox rendering bug (still present as of Jan '13) where the outline will render on the outside of all child elements even if they overflow their parent (through negative margins, box-shadows, etc.)
You can fix this with:
.container {
position: relative;
}
.container:before {
content: '';
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: 1px solid #ff0000;
}
Super unfortunate that it's still not fixed. I much prefer outlines in many cases since they do not add to the dimensions of an element, saving you from always having to consider border widths when setting dimensions of an element.
After all, which is simpler?
.container {
width: 960px;
height: 300px;
outline: 3px solid black;
}
Or:
.container {
width: 954px;
height: 294px;
border: 3px solid black;
}
It is also worth noting, that W3C's outline is IE's border, since IE does not implement W3C box model.
In w3c box model, the border is exclusive of element's width and height. In IE it is inclusive.
Differences between border and outline:
Border is part of the box model so it counts against the element's size.
Outline is not part of the box model so it doesn't affect nearby elements.
Demo:
#border {
border: 10px solid black;
}
#outline {
outline: 10px solid black;
}
<html>
<body>
<span id="border">Border</span>Other text<br><br>
<span id="outline">Outline</span>Other text
</body>
</html>
Other differences:
The outline is displayed outside the border.
Outlines cannot have rounded corners; borders can.
I've made a little piece of css/html code just to see the difference between both.
outline is better to inclose potential overflowing child elements, especially into an inline container.
border is much more adapted for block-behaving elements.
Fiddle for you sir!
The outline property in CSS draws a line around the outside of an element. It's similar to border except that:
It always goes around all the sides, you can't specify particular
sides It's not a part of the box model, so it won't effect the
position of the element or adjacent elements
Source: https://css-tricks.com/almanac/properties/o/outline/
As a practical example of using "outline", the faint dotted border that follows the system focus on a webpage (eg. if you tab through the the links) can be controlled using the outline property (at least, I know it can in Firefox, not tried other browsers).
A common "image replacement" technique is to use, for example:
<div id="logo">Foo Widgets Ltd.</div>
with the following in the CSS:
#logo
{
background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
display: block;
text-indent: -1000em;
}
The problem being that when the focus reaches the tag, the outline heads off 1000em to the left. Outline can allow you to turn off the focus outline on such elements.
I believe that the IE Developer Toolbar is also using something like outline "under the hood" when highlighting elements for inspection in "select" mode. That shows well the fact that "outline" takes up no space.
think about outline as a border that a projector draw outside something as a border is an actual object around that thing.
a projection can easily overlap but border don't let you pass.
some times when i use grid+%width, border will change the scaling on view port,for example a div with width:100% in a parent with width:100px fills the parent completely, but when i add border:solid 5px to div it make the div smaller to make space for border(although it's rare and work-aroundable!) but with outline it doesn't have this problem as outline is more virtual :D it's just a line outside the element
but the problem is if you don't do spacing properly it would overlap with other contents.
to make it short:
outline pros:
it doesn't mess with spacing and positions
cons:
high chance of overlapping
Google web.dev has a good explaintion for Box Model.
The border box surrounds the padding box and its space is occupied by the border value. The border box is the bounds of your box and the border edge is the limit of what you can visually see. The border property is used to visually frame an element.
The margin box, is the space around your box, defined by the margin rule on your box. Properties such as outline and box-shadow occupy this space too because they are painted on top, so they don't affect the size of our box. You could have an outline-width of 200px on our box and everything inside and including the border box would be exactly the same size.
Copied from W3Schools:
Definition and Usage
An outline is a line that is drawn
around elements (outside the borders)
to make the element "stand out".