It's really simple stuff, but I can't understand what the problem is.
In an ASP.Net webpage I want to create a div with a specific border.
CSS:
.ResourcesDiv
{
border-image:url(http://blogrope.com/wp-content/uploads/2013/06/003-wood-melamine-subttle-pattern-background-pat.jpg) 30 30 stretch;
border: 15px solid transperant;
width: 300px;
padding: 10px 20px;
margin: 50px;
}
HTML/ASP:
<div id="Resources" class="ResourcesDiv">
In the future, this will display the amount of herbs the user has.<br />
In the future, this will display the amount of gems the user has.<br />
</div>
EDIT: It displays a black border if i remove the transperant part of the border, but not the image, although I`m pretty sure the url is well set.
See the fiddle
I have changed your CSS as follows
CSS
.ResourcesDiv {
border-image:url("http://blogrope.com/wp-content/uploads/2013/06/003-wood-melamine-subttle-pattern-background-pat.jpg") 30 30 stretch;
border: 15px solid url("http://blogrope.com/wp-content/uploads/2013/06/003-wood-melamine-subttle-pattern-background-pat.jpg") 30 30 stretch;
width: 300px;
padding: 10px 20px;
margin: 50px;
}
Try it..
UPDATE
Check the fiddle--tested in chrome and firefox
Well, first of all you have got a spelling mistake in the line
border: 15px solid transperant;
in the word transparent.
and secondly I think what you want is here at this fiddle: (specific border ,getting from the url you mentioned)
DEMO
http://jsfiddle.net/kq950cvv/
Related
I am trying to use the attached image as border of the div but failed.
My code is
<div class="menu-box-wrapper">
</div>
CSS
.menu-box-wrapper{
border-image:url(../images/about-text-bg-box.png) 30 repeat stretch;
height:100px;
width:100px;
}
Demo : http://jsfiddle.net/squidraj/gunj1nxj/1/
I got it to work:
.menu-box-wrapper{
border: 20px solid transparent;
border-image: url(http://s30.postimg.org/w2z6ws0h9/about_text_bg_box.png?noCache=1431183351) 7 repeat stretch;
padding: 15px;
height:200px;
width:400px;
background:#000;
}
h1{
color:#fff;
}
https://jsfiddle.net/Danthejsman/gunj1nxj/4/
Apparently It will only stretch if you do 7 or under, which is half of the image. Of course, I don't know for sure. Change the border width for a bigger image
Instead of using 'repeat' in your css, alter your border-image-slice value in you css code. Not sure what your desired outcome is, but if you alter your code as shown below and play with the values, you should be able to achieve what you are after. Your current code only places the border images at each corner.
.menu-box-wrapper{
border: 5px solid transparent;
border-image:url(../images/about-text-bg-box.png) 30% stretch;
background:#ccc;
}
So, im trying my hands on some html/css/js/jquery coding, and having been searching around for answers some days now. Im trying to make a clean website, and was basically wondering how to do this:
What my amazing paint skill are trying to explain is how to do the "border/background" around/behind the content. Not the blue white background but the light grey one. Been trying to use and use css border/width/height etc. But cant seem to get anything to work properly. Like it should scale automatically with a menubar, as seen in the image. Appreciate any input.
Try this:
fiddle: http://jsfiddle.net/CGqa5/1/
CSS
.outer{
width: 200px;
height: 200px;
background: #999999;
border-radius: 10px;
padding: 10px;
}
.inner{
width: 100%;
height: 100%;
background: #ffffff;
}
HTML
<div class="outer">
<div class="inner">
CONTENT
</div>
</div>
Using box-shadow you just need to add one line to your css!
box-shadow: 0px 0px 5px 5px #888888;
Fiddle: http://jsfiddle.net/3vVZQ/
This is my css properties:
.line-separator {
height: 1px;
background: #d2d2d2;
border-bottom: 0px solid WindowFrame;
color: #d2d2d2;
width: 984px;
}
this is my DIV: (i use one more like this for the bottom one.)
<div class="line-separator" style="margin-left: 3px;">
</div>
IE 7 : This is the required look
IE 6 : It appears very thick. It should not be the case.
Please avoid comments like dont use ie6 or move on etc., I am aware its going extinct. I have a requirement in ie6. How to solve it ?
Add line-height: 1px or overflow: hidden. That will do the trick.
I am trying to create a button with 3 layers of border around it with the middle layer showing the background of the containing div. Examples are worth a thousand words so here you go
http://jsfiddle.net/e5Sxt/2/
html
<div id="content">
<p>Generic Content</p>
<button class="button">Search</button>
</div>
css
#content{
width: 500px;
height: 500px;
background-color: black;
padding: 50px;
color: white;
}
button{
margin-top: 50px;
padding: 20px;
text-align: center;
background-color: #333;
box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb;
border: none;
cursor: pointer;
}
The red box-shadow is where the black of the containing div should come through. If the box-shadow is set to transparent for this layer, the box-shadow under it shows through instead.
I have tried utilizing outlines, borders, and box-shadows to no avail so far. As of right now, I think I will have to wrap the button in another div with the outer border and a padding to show the background, but wanted to see if anyone could do this without adding another html element.
Thanks!
The answer depends on what browsers you need to support (and whether you'd be happy with a fall-back solution for older browsers).
There is a CSS feature called border-image, which, frankly, can do pretty much anything you could think of for a border. You could achieve this effect very easily using this style.
With border-image, you could simply specify a small image with your two colours and transparent middle section. Job done.
Learn more about border image here: http://css-tricks.com/understanding-border-image/
However... there is a big down-side: browser support. border-image is a relatively new addition to the CSS spec. Firefox and Chrome users should be okay, but IE users miss out -- this feature didn't even make it into IE10.
Full browser support details can be found here: http://caniuse.com/#search=border-image
If poor browser support for border-image is enough to kill that idea for you, then another viable answer would be to use :before or :after CSS selectors to create an pseudo-element sitting behind the main element. This would have a transparent background and be sized slightly larger than the main element and with it's own border. This will give the appearance of the triple border you're looking for.
Of course, you can only use this solution if you aren't already using :before and :after for something else.
Hope that gives you some ideas.
I think the only way to do this is by using a wrapper unfortunately. I'm not sure if it is possible to get the transparency through the button background.
Although, if you know the background color, you can use that in the border obviously, but of course this won't work for background gradients.
Here is a proposed jsFiddle showing knowing the color, and another using a wrapper:
http://jsfiddle.net/eD6xy/
HTML:
<div class="box one-div">(1 div, know color)</div>
<div class="two-div">
<div class="box">(2 divs, pure transparent)</div>
</div>
CSS:
/*
With one div, works fine with a constant color (#abc)
But with gradient, probably won't match up correctly
*/
.one-div {
margin: 15px 10px;
border: 5px solid blue;
box-shadow: 0 0 0 5px #abc,
0 0 0 10px red;
}
.two-div {
margin-top: 30px;
padding: 5px;
border: 5px solid red;
}
.two-div > .box {
border: 5px solid blue;
}
I'm reading a book (Agile Web Development With Rails) and I'm encountering a problem on page 96.
I've stuck to the code in the book exactly, but I get this.
I know another way to approach this is to use a table, but I want to know if there is another solution first.
I would organize these comments using divs. The first div to house the image and comment. The second div to house the image. And the third to house the comment.
The html:
<div class="comment-container">
<div class="comment-img">
<!whatever code you use to pull images from the database>
</div><!ENDcomment-img>
<div class="comment-field">
<!whatever code you use to pull comment content from the database>
</div><!ENDcomment-field>
</div><!ENDcomment-container>
The CSS:
.comment-container{
padding: 5px;
border-bottom: 1px dashed #009fe4;
margin: 2px 0 5px 0;
}
.comment-img{
float: left;
width: 80px;
height: auto;
}
.comment-field{
width: 700px;
height: auto;
padding: 0 0 0 10px;
}
I hope this helps out.
#subm0ral
It's the position: absolute; in the rule img of your CSS that make the image above the text. See help