Solved

DIV border Image

Posted on 2011-03-22
13
510 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 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
 
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

758 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

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now