Grow your CSS skills. Land your dream job.

content box .. problem

  • # January 8, 2012 at 8:30 am

    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;
    }

    # January 8, 2012 at 9:45 am

    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;
    }
    # January 8, 2012 at 12:30 pm

    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

    # January 8, 2012 at 2:58 pm

    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;
    }

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">























    صورة التدوينة





    من الجميل فرض نظام جديد يخدم مصلحة المدينة وينعش اقتصادها, وكنتيجة حتمية يجب على المواطن الصالح وأيضاً الطالح تطبيق النظام ودفع “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

    any suggestions..

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".