[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

DIV border Image

Posted on 2011-03-22
13
Medium Priority
?
527 Views
Last Modified: 2012-05-11
I want CSS2 and HTML code to make the div border as the image below (on all div sizes).

Here is the border I have:
border.png
0
Comment
Question by:Mohamed Abowarda
  • 7
  • 3
  • 2
  • +1
13 Comments
 
LVL 20

Expert Comment

by:Rikin Shah
ID: 35188079
0
 
LVL 20

Expert Comment

by:Rikin Shah
ID: 35188096
http://www.w3.org/Style/Examples/007/roundshadow.en.html

this is better explained with both points...
0
 
LVL 12

Author Comment

by:Mohamed Abowarda
ID: 35188113
@rikin_shah: How can I do that by using the image itself?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 20

Expert Comment

by:Proculopsis
ID: 35188165

Is this any use:

<style>
.table-wrapper { border-collapse:collapse; }
.top-left      { width:36px; height:36px; background-position:left top;      background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.top-center    { width:36px; height:36px; background-position:center top;    background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.top-right     { width:36px; height:36px; background-position:right top;     background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.middle-left   { width:36px; height:36px; background-position:center left;   background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.middle-right  { width:36px; height:36px; background-position:center right;  background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.bottom-left   { width:36px; height:36px; background-position:left bottom;   background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.bottom-center { width:36px; height:36px; background-position:center bottom; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.bottom-right  { width:36px; height:36px; background-position:right bottom;  background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
</style>

<table class="table-wrapper">
<tr><td class="top-left"></td><td class="top-center"></td><td class="top-right"></td></tr>
<tr><td class="middle-left"></td><td class="">

<div style="width:400px; height:200px;">This is my DIV content!</div>

</td><td class="middle-right"></td></tr>
<tr><td class="bottom-left"></td><td class="bottom-center"></td><td class="bottom-right"></td></tr>
</table>

Open in new window

0
 
LVL 20

Expert Comment

by:Rikin Shah
ID: 35188166
write a css for making the background of div with same image. and per attached image in red color you can create a table with some spacing from all directions.

add the contents and done!!

 border
0
 
LVL 12

Author Comment

by:Mohamed Abowarda
ID: 35188215
@Proculopsis: That will cause a problem when I resize the div.
0
 
LVL 12

Author Comment

by:Mohamed Abowarda
ID: 35188278
@rikin_shah: I want the image to fit the div on any size.
0
 
LVL 20

Assisted Solution

by:Proculopsis
Proculopsis earned 600 total points
ID: 35188408

Resizing should be fine, here some colspan and rowspan is used to allow sizes larger than the original:

<style>
.table-wrapper { border-collapse:collapse; }
.top-left      { width:36px; height:36px; background-position:left top;      background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.top-center    { width:36px; height:36px; background-position:center top;    background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.top-right     { width:36px; height:36px; background-position:right top;     background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.middle-left   { width:36px; height:36px; background-position:center left;   background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.middle-right  { width:36px; height:36px; background-position:center right;  background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.bottom-left   { width:36px; height:36px; background-position:left bottom;   background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.bottom-center { width:36px; height:36px; background-position:center bottom; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.bottom-right  { width:36px; height:36px; background-position:right bottom;  background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
</style>

<table class="table-wrapper">
<tr><td class="top-left"></td><td class="top-center"></td><td class="top-center"></td><td class="top-right"></td></tr>
<tr><td class="middle-left"></td><td colspan="2" rowspan="2">

<div style="width:600px; height:400px;">This is my DIV content!</div>

</td><td class="middle-right"></td></tr>
<tr><td class="middle-left"></td><td class="middle-right"></td></tr>
<tr><td class="bottom-left"></td><td class="bottom-center"></td><td class="bottom-center"></td><td class="bottom-right"></td></tr>
</table>

Open in new window

0
 
LVL 12

Author Comment

by:Mohamed Abowarda
ID: 35194010
@Proculopsis: Thanks! it work great, the ony thing that I have now is when I make the div very large, it cause a problem.

Check the following code:
 
<style>
.table-wrapper { border-collapse:collapse; }
.top-left      { width:36px; height:36px; background-position:left top;      background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.top-center    { width:36px; height:36px; background-position:center top;    background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.top-right     { width:36px; height:36px; background-position:right top;     background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.middle-left   { width:36px; height:36px; background-position:center left;   background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.middle-right  { width:36px; height:36px; background-position:center right;  background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.bottom-left   { width:36px; height:36px; background-position:left bottom;   background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.bottom-center { width:36px; height:36px; background-position:center bottom; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.bottom-right  { width:36px; height:36px; background-position:right bottom;  background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
</style>

<table class="table-wrapper">
<tr><td class="top-left"></td><td class="top-center"></td><td class="top-center"></td><td class="top-right"></td></tr>
<tr><td class="middle-left"></td><td colspan="2" rowspan="2">

<div style="width:832px; height:518px;">This is my DIV content!</div>

</td><td class="middle-right"></td></tr>
<tr><td class="middle-left"></td><td class="middle-right"></td></tr>
<tr><td class="bottom-left"></td><td class="bottom-center"></td><td class="bottom-center"></td><td class="bottom-right"></td></tr>
</table>

Open in new window


Any suggestions?
0
 
LVL 12

Author Comment

by:Mohamed Abowarda
ID: 35194116
@Proculopsis: I have checked the code in Chrome, unfortunately, it doesn't work on Chrome, works great on IE8.

How can I get it to work in all browsers?
0
 
LVL 12

Author Comment

by:Mohamed Abowarda
ID: 35195191
@Proculopsis: I want the div to resize according to its contents, I need to remove "width:832px; height:518px;" from the following line to make the div fit its contents:

<div style="width:832px; height:518px;">This is my DIV content!</div>

When I do that it cause a problem only in Chrome (works great in Firefox and IE8)

What I need now is to make the div resize according to its contents without any problem in Chrome.
0
 
LVL 2

Accepted Solution

by:
MINORITYmaN earned 1400 total points
ID: 35197580
tha table solution is not standard w3c compilant because there are no surounding  tr & td for the div.
i just use divs instead of tables: check my example:
ps: the corners pixel went about 1 pixel to the left because i didnt cut it correctly out to 30x30 px, now the rorner have 30x31px.
if you cut your out, just watch to make all of them do 30x30px
<style>
.top-left {
	background-position:top left;
	background-repeat: no-repeat;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAIAAACQzIFuAAAACXBIWXMAAAsSAAALEgHS3X78AAABzElEQVRIibWVP0pDQRDGZ5MXxEILG48gHkCwF8k5tBJvYhHxFJYWYiNELKwEKyMIVhKiRBQhKmhkdtZiYRxn/72EOMUymRd+8+03kxfjnIN/i2qGrFDobOgpA6ahF83kL0xAz0PDp865Mr0+1OeyUqCn0KrunOOK7JGk1+FKUHgm6VG04oZiwyRCj84nxZViiUg1m2Cq6u5RLkdceziuUGaeK6OaAq1yDiLK0Wuio1x/D9WjvO91lEquPCsJUnkRTUSceO0cvlhrZzJopddaKx8l9z1jsaJzxVqrilVoS6aHAnFirQUAzvkS8X2XJ/fgMUqNkkVEiCjrufdMxmtG+OB7yCj4rqaqxqhYTEdELiZ/q8oNSZdQZgEAIvqPXIxrD9sUezAdEQcvH2e94d3jexVK5oSFR+3mxBOZfnI1OLocfCNB8d8jFM4Lw9f3UGPM1/i7c3zb648AYGNtpbPbjmxkZtPlSP3JRhtjDi/ue/3R8tJC92CbnGk1G8n3TL6HtMg3eHj97F4PAeB0f4ucWZxvAUAjbwv83UhuoNYREc9vnshBe33VmIZHa3pmVaL+yDbe7r2dzbnqlxnRnplqCOX8+W0MAMaYuVaTOT9nNGYHizZP9QAAAABJRU5ErkJggg==);
}
.top-center {
	background-position:top;
	background-repeat:repeat-x;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAIAAAB/DupQAAAACXBIWXMAAAsSAAALEgHS3X78AAAAXklEQVRIie3WywmAUAxE0URs2qZsygrcCPm/rbgfIZAUcAh3NZyZhLkN5BLRXlUNaVzrpnREDP0T7e4NaTMb+k2rKoru+bWINKR7BjnOC0QDxwLfD6o148YCMMjQn1utVElF0wViLgAAAABJRU5ErkJggg==);
}
.top-right {
	background-position:top right;
	background-repeat: no-repeat;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAIAAACQzIFuAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAJBSURBVEhLtVVNLwRBENUzO9lILBJuxFU4ORAJRxEXB0dnJ3H0PyT+gX/g5EhcETdOYolkI7shIvuRNR87q0bxtnT3jFmhDpPu3u33ql+/qlbdbnfg30LFcWyCK6X+hNGO/ld8qtPpACtPynn+0wOMoogm1j3ZQHloVBiGUgfeo+1MA/qRQPm+z+garknzCw7VbrexTSLKRYnbl4aq1WrJxDWC/BxWVof8zkFlJcc05RUuN56i9HLWoEOOZFAMQANE5sgmsPIl6BxIXB5FgspDsBE0RJOghw4aK5NMPL9EOrp2Ak0T4EqCjI7kUK1yyNyhFS42QyIpiCbOJzrBgSDPBeT1DHUCmXsah1UiKZRVn54y4JAELJHp0QxceSyHc9dOoNmUCeQdSEfCqWb6CTqgmaavOzBdLzk+0cEhoTXnoMpMv6ddcoIeBAGjy0NoHk1rQRl2pEM4GjQTWOvWtDzUz8odWcvcIUtaF8Ilmz0HZO5ZNHdRfn2qB2Ol4uhQ0XVd5yuoZdMQX3NKK+bDIl8Id2R2tfkW3dVap9e1RjucmSgRIN5CuR9j7JcDbZFfJPfh8mh7Y/G+Wr+tPJdrzXK1sTQ9LtGTy/k4AW+whvZTbztp5IcdP6L3IV7bPai9NDaXp9bnJz3PKxQK/EWQbjKgIdNDOqA7NCp67vCgRyIf72/R9PC8UnluZjQ1aR48iiiib50Aq0QQd9XKwnQQxSdXVa0hWx8sWahWUya5IzzX2dtZo+nNY0MaEV0srVNaE6fFd39uhhEZOQJxAAAAAElFTkSuQmCC);
}
.middle-left {
	background-position:0px;
	background-repeat:repeat-y;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAeCAIAAABbkFLLAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAABhSURBVEhLY/z37x8DA8N/MACyIeAvEvgDBr9h4NevX0AmkPwJBhBG5brHQEMuLizg42QFMuCACZlDdfao6biCdDRkRkOG1Ow2mmZG08xomiE1BEbTDKkhNlrOjKaZwZVmABkQRTkIgm3+AAAAAElFTkSuQmCC);
}
.middle-right {
	background-position:right;
	background-repeat:repeat-y;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAeCAIAAABbkFLLAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAABhSURBVEhLY/z//z8DEvj0/bd+/ASgQHuQLDs7OxsbG5CEMFhZWSEkBLCAATMSYIIBRjAAGsKEbDTV2aOm4wrS0ZAZDRlSs9tomhlNM6NphtQQGE0zpIbYaDkzmmYGV5oBAKLtCTbCocijAAAAAElFTkSuQmCC);
}
.bottom-left {
	background-position:bottom left;
	background-repeat: no-repeat;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAIAAACQzIFuAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAIvSURBVEhLrVQtTwNBFOy110tIwCEIqSZBoMEDwfMrUISEP4DtH0CCQ2DQJBAEEkOgCBxF8WUoorTHXXntlOH17d7SNDyxedfezbydmd2oN6hSqYRGKs9zWbMsk0ZKGtTXaKWD6na7su4dN5pv7evD7aQaTyUVQUOV2UkTRREfpXer/FPyF9rKoBbmZ+TD3f3TNMs14Ag6/iAHGnIIlgEFtNTq0lwSl8+v7stRr9VOPbO7g2tocHB2PXgcx7XZ6c3lmry/tnMg0gpBJ836n1N3V3roDulpgIgPG0RumCENHKmf3N0+vgvOxspifWu9P44XHd7CXo2OngTG589O9+jy4ezmKe+nZCAyA4PZZQUo8+PdATnABBo0zZePi8azbOK11RlB1+JMNj45oN4wM8ZShgc5KfKTiRRjUdVqFSvKk0hGpSj7TA4TKY0LnSTJUBmKbsRx1dc28Bi7Dfz3o8Nb7bCOEFOk7wnpRXST4EJ0xkZfPiajBktnFzeVB11H0wRUBwlHjPcdbz1KJ80vupHea4C2gUzaCfOjH51MRh9zSxPXgPIaHwu9KEjmxBGUp30EXYtjxg8QuLZzi3+jEzfgBKc2SobQ3SOmCcJkoLHoRpwAgQmunprEHvQwgdcPnm3e52jGQnfdxsfGEvfRj+6OTyw0GkjvxihZiF5E4O7DIOrHELo7Lwcv8oaK4c2/0QObCNCHXNUzBub1vqbHH2t2F8UoUDTNhOhj8v0bunf8b+JKM6VYKQ2UAAAAAElFTkSuQmCC);
}
.bottom-center {
	background-position:bottom;
	background-repeat:repeat-x;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAIAAAB/DupQAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAACfSURBVEhL7dYhDgMhEIXh0pP0Ur1UL4JD4dahMKg1GAwCQUKyDQnZEBaa2vrfdQ7w5eWNmBFrrRszd4b9qn/6p1vxbh2qWzyeL4gG1yiklFBqoZSiaK01RW/bRtHGGIq21lK0c46i932naO89RYcQKDrGSNEpJYrOOVN0KYWij+Og6ForRbfWKPo8T4ruHTu7Ywwq9XVdFD3nhGjwWfgA9CJADzoY8N4AAAAASUVORK5CYII=);
}
.bottom-right {
	background-position:bottom right;
	background-repeat: no-repeat;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAIAAACQzIFuAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAJpSURBVEhLnVY9axtBEPWu9eGAFTdJbIJIUgUCst0YUoYQgxvjwpDabtPGRf6Du5AQ0uV3iBDUGvwDjP+EiKwIfZzuznOMPHqa2VukbHGs7rRv3ryZeXcuz/O1h3U3nOyffV337vt5q1qt1mo1usqqVCq0pyutdVgelntYBElbL9DjJOVITx/X+SydEhBGkMOIwkCCgxtAn2Zffv6mZ7svtiyo8LMBEFqFmaHfDZM8z9pXN96tvW9tq9w5D+aOGSDrIH0/nKQE7V1+9PkX/ftwb+flswbBSQCU1YrDAcrou7//Rhc/2n+ub1mTi5M3jzbqVACpIUWiYrJWGFISCuY0i/rq4yXtahV/+rZ5fNDklqA7vMEOYWgutVxZK5UTF7bI6N2nb6+fNz7s7jSfbAocowtZLIPg2jrTHakEa+U6nQ5mLdyVFNKjiC5FFu4K3dthYcqRqZGmRFBRY6HfcSCt1kJZ9FUdqciqmVrgjl0R6Uhbw9JZFevgFsQASmsWRKkxqx7X0PiBD3qT6msKE+w8hEZNJEyBjjVUzRcfVPSysBPYecEhDNqLMsigO/LNgrt1FfRI5VyKrxUHk5gpg2+DIHcBFc9S5hX2d8QVleMBlC+WtWPxt263q3hh7so6RAdBVND6Z6/XwzOSbxlu5I1hk3D9fh+lLAq9aHVIE88HsMw0ucFgoPJVweJvHylmUH03Go3Q3rDD4t0WHE7VOW48Hlufs91W1hiRhilgkyRR2cXFXYbyHHA6nS5Tn5VA5+hpmgZfK3b24iIEZ9VlWRZ+UPLxFvEs+2j+pYfq/wfNMEX8Bl6J1zJ/vgflWWN09DgBGAAAAABJRU5ErkJggg==);
}
.box-outer { width:400px; }
.box-inner {
	padding:34px;
	height:300px;
}
</style>

<div class="box-outer">
	<div class="top-center">
	<div class="bottom-center">
	<div class="middle-left">
	<div class="middle-right">
	<div class="top-left">
	<div class="top-right">
	<div class="bottom-left">
	<div class="bottom-right">
		<div class="box-inner">This is my DIV content!</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
</div>

Open in new window

0
 
LVL 12

Author Closing Comment

by:Mohamed Abowarda
ID: 35197861
Thanks alot,
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question