content box problems

No replies

Tue, 2012-01-10 10:21

dagash

Offline

newbie

Last seen: 11 years 21 weeks ago

Timezone: GMT+3

Joined: 2012-01-10

Posts: 1

Points: 2

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 :
and this is an image :
i want to slice it like this method :

i tried many times but it is not working .

the first try :
and this is my html code :

<!-- Wrapper -->
<div id="wrapper">
 
 <!-- head-->
 <div>
 <div class="top_left"></div>
 <div class="top_right"></div>
 <div class="top_mid"></div>
 </div>
 <!-- End/ Head  -->
 
 <!-- Side  -->
 <div class="shadowleft">
 <div class="shadowright">
 
  <!-- Content -->
  <div class="content">
 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.
  </div>
  <!-- End/ Content -->
 
 </div>
 </div>
 <!-- End/ Side  -->
 
 <!-- Bottom  -->
 <div>
 <div class="bottom_left"></div>
 <div class="bottom_right"></div>
 <div class="bottom_mid"></div>
 </div>
 <!-- End/ Bottom Shadow -->
 
</div>
<!-- End/ Wrapper -->

and this is my css code :

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

--------------------------------
the 2nd attempt :

i try to slice the image to 3 images , (header , content area and footer ) .

my html code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" lang="ar">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<!--css files-->
<link rel="stylesheet" media="screen" href="css.css">
<!--END css Call-->
<title>mine</title>
</head>
<body>
 
 
<div class="mainareaup"></div>
</div class="mainareamid">
                        <div id="posts"><!--this div include posts & its own-->
 
 
 
                        <div class="post"><!-- this div contain all single post and its info-->
                                <div class="posttitle"><!-- this div contain the title of post-->
                                <a href="#"><h2>عمل الأذكياء لدى مدراء أغبياء</h2></a>
                                </div><!-- END posttitle-->
 
                                <div class="postmetadata">
                                        الكاتب :<a href="#">عبدالله المهيري</a>
                                        <span class="spanDash">|</span>التصنيف :<a href="#">عام</a>
                                        <span class="spanDash">|</span>التاريخ :<a href="#">2 ديسمبر 2011</a>
 
                                        <div class="commentsnumber"><!-- this div contain the comments number which will take u to the comments of the specific post-->
                                                <span class="spanDash">|</span>التعليقات :<a href="#">24</a>
                                        </div><!-- END commentnumber-->
 
                                </div><!--END postmetadata-->
 
                                <div class="postimage"><!-- this div contain picture post-->
                                        <img src="images/postlongimage.png" alt="صورة التدوينة"/>
                                </div><!--END postimagelong-->
 
 
                                <div class="postcontent"><!-- this div contain the content of the post-->
                                        <p>
                                        من الجميل فرض نظام جديد يخدم مصلحة المدينة وينعش اقتصادها, وكنتيجة حتمية يجب على المواطن الصالح وأيضاً الطالح تطبيق النظام ودفع “2 ريال سعودي” للوقوف في الموقف لمدة ساعة وبعد الساعة الثالثة تصبح القيمة ريال واحد ! بدلاً بأن تأتيه مخالفة قيمتها 50 ريال سعودي ! .. طبعاً تطبيق النظام وإقناع الناس في البداية في أي أمر يأتي بصعوبة بالغة حتى يبدءون بالاقتناع والرضوخ للقوانين وتسديد قيمة الموقف, التي لا تعتبر بالمبلغ الكبير جداً للحصول على موقف آمن ونظيف وتحت مراقبة موظفين شركة “موقف” المتعاقدة مع أمانة الشرقية..
                                        </p>
 
                                        <p>أكمل القراءة</p>
                                </div><!--END postcontent-->
 
                                <div class="postdivider">
                                        <img src="images/postdivider.png" alt="فاصل التدوينة"/>
                                </div><!--END postdivider-->
 
                        </div><!--END post class-->
 
 
                        <div class="post"><!-- this div contain all single post and its info-->
                                <div class="posttitle"><!-- this div contain the title of post-->
                                <a href="#"><h2>عمل الأذكياء لدى مدراء أغبياء</h2></a>
                                </div><!-- END posttitle-->
 
                                <div class="postmetadata">
                                        الكاتب :<a href="#">عبدالله المهيري</a>
                                        <span class="spanDash">|</span>التصنيف :<a href="#">عام</a>
                                        <span class="spanDash">|</span>التاريخ :<a href="#">2 ديسمبر 2011</a>
 
                                        <div class="commentsnumber"><!-- this div contain the comments number which will take u to the comments of the specific post-->
                                                <span class="spanDash">|</span>التعليقات :<a href="#">24</a>
                                        </div><!-- END commentnumber-->
 
                                </div><!--END postmetadata-->
 
                                <div class="postimage"><!-- this div contain picture post-->
                                        <img src="images/postlongimage.png" alt="صورة التدوينة"/>
                                </div><!--END postimagelong-->
 
 
                                <div class="postcontent"><!-- this div contain the content of the post-->
                                        <p>
                                        من الجميل فرض نظام جديد يخدم مصلحة المدينة وينعش اقتصادها, وكنتيجة حتمية يجب على المواطن الصالح وأيضاً الطالح تطبيق النظام ودفع “2 ريال سعودي” للوقوف في الموقف لمدة ساعة وبعد الساعة الثالثة تصبح القيمة ريال واحد ! بدلاً بأن تأتيه مخالفة قيمتها 50 ريال سعودي ! .. طبعاً تطبيق النظام وإقناع الناس في البداية في أي أمر يأتي بصعوبة بالغة حتى يبدءون بالاقتناع والرضوخ للقوانين وتسديد قيمة الموقف, التي لا تعتبر بالمبلغ الكبير جداً للحصول على موقف آمن ونظيف وتحت مراقبة موظفين شركة “موقف” المتعاقدة مع أمانة الشرقية..
                                        </p>
 
                                        <p>أكمل القراءة</p>
                                </div><!--END postcontent-->
 
                                <div class="postdivider">
                                        <img src="images/postdivider.png" alt="فاصل التدوينة"/>
                                </div><!--END postdivider-->
 
                        </div><!--END post class-->
<div> 
<div class="mainareadown">
</div>
 
</body>
 
</html>

my css code :

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

this site is made by used a western language ( rtl ) ..

finally i tried to do it with a rounded corner and border reduis .. but i need more articles on these properties

Tags:

User login

Navigation