content box .. problem

[dagash]

i have this content box , and i had some problems when i want to style it ..
how can i slice it and styling .
this is a box content : the link
and this is an image : the link
i want to slice it like this method : the link

and this is my code :

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

this HTML :

#wrapper {

margin:0 auto;

width:450px;

}

/*Head Shadow*/

.top_right {

background-position: -30px 0;

float: right;

height: 25px;   /* IMAGE HEIGHT */

width: 30px;	 /* IMAGE WIDTH */

}

.top_left {

background-position: 0 0;

height: 25px;	 /* IMAGE HEIGHT */

width: 30px;	 /* IMAGE WIDTH */

float: left;

}

.top_mid {

background-position: 0 0;

margin: 0 30px 0 30px;

height:25px;	 /* IMAGE HEIGHT */

}

/*Side Shadow*/

.shadowright {

background-position: right 0;

padding: 0 16px 0 0;

}

.shadowleft {

background-position: left 0;

padding: 0 0 0 16px;

}

/*Content*/

.content {

text-align:justify;

padding: 0 14px;

background: #FFF;

}

/*Bottom Shadow*/

.bottom_right {

background-position: -30px -25px;

float: right;

height:30px;	 /* IMAGE HEIGHT */

width: 30px;	 /* IMAGE WIDTH */

}

.bottom_left {

background-position: 0 -25px;

height: 30px;	 /* IMAGE HEIGHT */

width: 30px;	 /* IMAGE WIDTH */

float: left;

}

.bottom_mid {

background-position: 0 -25px;

margin: 0 30px 0 30px;

height: 30px;	 /* IMAGE HEIGHT */

}

/*Images*/

.top_right, .top_left, .bottom_right, .bottom_left {

background-image: url(images/shadow_corner.png);

background-repeat: no-repeat;

}

.top_mid, .bottom_mid {

background-image: url(images/shadow_tb.png);

background-repeat: repeat-x;

}

.shadowright, .shadowleft {

background-image: url(images/shadow_side.png);

background-repeat: repeat-y;

}

[Mottie]

Hi Dagash!

Have you thought about using css3? I made a demo using two methods.

The first uses the image you shared as a border image. And the second uses a simple border radius… I’m sure someone better at css3 could add a border gradient to better match the border you have.

.box1 {

padding: 20px;

border: transparent 20px solid; /* so large because of the spacing of the image */

-moz-border-image: url(http://s14.postimage.org/gu06w3pn5/image.png) 70 70 70 70 repeat stretch;

-webkit-border-image: url(http://s14.postimage.org/gu06w3pn5/image.png) 70 70 70 70  repeat stretch;

border-image: url(http://s14.postimage.org/gu06w3pn5/image.png) 70 70 70 70  repeat stretch;

}

In either box, click on the “Add more…” link to see how it behaves with more content.

.box2 {

margin: 15px;

padding: 30px;

background: #fbfbfb;

border: #f5f5f5 3px solid;

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

}

[dagash]

this is another attempt .

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

/* wrapping Div="posts" */



/*              */

/*start wrapping style.*/

#wrap {

width : 600px;

overflow: hidden;

}

/*start upper part*/

.wrappostsup{

background : url(images/mainareaContainerUpMid.png) repeat-x top;

height : 39px ;



}



.wrappostsupright {

background : url(images/mainareaContainerUpRight.png ) no-repeat top right;

height : 39px;

width : 41px;

float : right;



}



.wrappostsupleft {

background : url(images/mainareaContainerUpLeft.png ) no-repeat top left;

height : 39px;

width : 41px;

float : left;

}

/* END upper part*/



/* start middle part*/

.wrappostsmid{

background : #fdfdfd;

text-align:justify;



}



.wrappostsmidright {

background : url(images/mainareaMidRight.png ) repeat-y right;

height : 7px;

width : 41px;

}



.wrappostsmidleft {

background : url(images/mainareaMidLeft.png ) repeat-y left;

height : 7px;

width : 41px;

}



/*END middle part*/





/* start lower part*/

.wrappostsdown {

background : url(images/mainareaContainerDownMid.png) repeat-x bottom;

height : 39px ;



}



.wrappostsdownright {

background : url(images/mainareaContainerDownRight.png ) no-repeat bottom right;

height : 39px;

width : 41px;

float : right;



}



.wrappostsdownleft {

background : url(images/mainareaContainerDownLeft.png ) no-repeat bottom left;

height : 39px;

width : 41px;

float : left;

}



/*END lower part*/



/* END wrapping Div="posts" */

but it is not ok , look at thispicture

this folder contained a picture which i used here the folder

[dagash]

the third attempt .
i slice the box to 3 parts , ( upper + middle + lower ) .

.mainareaup {

background: url("images/mainAREAup.png") no-repeat scroll 0 0 transparent;

height: 39px;

width: 671px;

}





.posts {

background: url("images/mainAREAmid.png") repeat-y scroll 0 0 transparent;

width : 671px ;

}



.post {

background: url("images/mainAREAmid.png") repeat-y scroll 0 0 transparent;

width : 671px ;

}

.mainareadown {

background: url("images/mainAREAdown.png") no-repeat scroll 0 0 transparent;

height: 39px;

width: 671px;

}

عمل الأذكياء لدى مدراء أغبياء







الكاتب :عبدالله المهيري

|التصنيف :عام

|التاريخ :2 ديسمبر 2011





|التعليقات :24























من الجميل فرض نظام جديد يخدم مصلحة المدينة وينعش اقتصادها, وكنتيجة حتمية يجب على المواطن الصالح وأيضاً الطالح تطبيق النظام ودفع “2 ريال سعودي” للوقوف في الموقف لمدة ساعة وبعد الساعة الثالثة تصبح القيمة ريال واحد ! بدلاً بأن تأتيه مخالفة قيمتها 50 ريال سعودي ! .. طبعاً تطبيق النظام وإقناع الناس في البداية في أي أمر يأتي بصعوبة بالغة حتى يبدءون بالاقتناع والرضوخ للقوانين وتسديد قيمة الموقف, التي لا تعتبر بالمبلغ الكبير جداً للحصول على موقف آمن ونظيف وتحت مراقبة موظفين شركة “موقف” المتعاقدة مع أمانة الشرقية..





أكمل القراءة
























عمل الأذكياء لدى مدراء أغبياء







الكاتب :عبدالله المهيري

|التصنيف :عام

|التاريخ :2 ديسمبر 2011





|التعليقات :24























من الجميل فرض نظام جديد يخدم مصلحة المدينة وينعش اقتصادها, وكنتيجة حتمية يجب على المواطن الصالح وأيضاً الطالح تطبيق النظام ودفع “2 ريال سعودي” للوقوف في الموقف لمدة ساعة وبعد الساعة الثالثة تصبح القيمة ريال واحد ! بدلاً بأن تأتيه مخالفة قيمتها 50 ريال سعودي ! .. طبعاً تطبيق النظام وإقناع الناس في البداية في أي أمر يأتي بصعوبة بالغة حتى يبدءون بالاقتناع والرضوخ للقوانين وتسديد قيمة الموقف, التي لا تعتبر بالمبلغ الكبير جداً للحصول على موقف آمن ونظيف وتحت مراقبة موظفين شركة “موقف” المتعاقدة مع أمانة الشرقية..





أكمل القراءة

but again , there is a problem .. HERE

also sorry for the content , because it is for a western language .

[dagash]

any suggestions..

[Author]

Posts