Solved

DIV border Image

Posted on 2011-03-22
13
514 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 3
  • 2
  • +1
13 Comments
 
LVL 19

Expert Comment

by:Rikin Shah
ID: 35188079
0
 
LVL 19

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
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 
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 19

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 150 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 350 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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)

738 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