Solved

DIV border Image

Posted on 2011-03-22
13
512 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

776 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