- This topic is empty.
-
AuthorPosts
-
January 8, 2012 at 8:30 am #36019dagashParticipant
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 linkand 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;
}
January 8, 2012 at 9:45 am #94276MottieMemberHi 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;
}January 8, 2012 at 12:30 pm #94283dagashParticipantthis 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
January 8, 2012 at 2:58 pm #94292dagashParticipantthe 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;
}
mine
من الجميل فرض نظام جديد يخدم مصلحة المدينة وينعش اقتصادها, وكنتيجة حتمية يجب على المواطن الصالح وأيضاً الطالح تطبيق النظام ودفع “2 ريال سعودي” للوقوف في الموقف لمدة ساعة وبعد الساعة الثالثة تصبح القيمة ريال واحد ! بدلاً بأن تأتيه مخالفة قيمتها 50 ريال سعودي ! .. طبعاً تطبيق النظام وإقناع الناس في البداية في أي أمر يأتي بصعوبة بالغة حتى يبدءون بالاقتناع والرضوخ للقوانين وتسديد قيمة الموقف, التي لا تعتبر بالمبلغ الكبير جداً للحصول على موقف آمن ونظيف وتحت مراقبة موظفين شركة “موقف” المتعاقدة مع أمانة الشرقية..
أكمل القراءة
من الجميل فرض نظام جديد يخدم مصلحة المدينة وينعش اقتصادها, وكنتيجة حتمية يجب على المواطن الصالح وأيضاً الطالح تطبيق النظام ودفع “2 ريال سعودي” للوقوف في الموقف لمدة ساعة وبعد الساعة الثالثة تصبح القيمة ريال واحد ! بدلاً بأن تأتيه مخالفة قيمتها 50 ريال سعودي ! .. طبعاً تطبيق النظام وإقناع الناس في البداية في أي أمر يأتي بصعوبة بالغة حتى يبدءون بالاقتناع والرضوخ للقوانين وتسديد قيمة الموقف, التي لا تعتبر بالمبلغ الكبير جداً للحصول على موقف آمن ونظيف وتحت مراقبة موظفين شركة “موقف” المتعاقدة مع أمانة الشرقية..
أكمل القراءة
but again , there is a problem .. HERE
also sorry for the content , because it is for a western language .
January 10, 2012 at 3:44 am #94371dagashParticipantany suggestions..
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.
|التعليقات :24