مشكلة فى اتجاهات القوالب - نسخة قابلة للطباعة

كود :
<?xml version="1.0" encoding="UTF-8" ?>

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

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

  <head>

    <b:include data='blog' name='all-head-content'/>

    <title><data:blog.pageTitle/></title>

    <b:skin><![CDATA[/*

 * -----------------------------------------------------

 * Blogger Template Style

 * Name:     Snapshot: Madder

 * Designer: Dave Shea

 * URL:      mezzoblue.com / brightcreative.com

 * Date:     27 Feb 2004

 * Updated by: Blogger Team

 * ------------------------------------------------------ */



/* Variable definitions

   ====================



   <Variable name="textcolor" description="Text Color"

             type="color" default="#474B4E" value="#474B4E">



   <Variable name="pagetitlecolor" description="Blog Title Color"

             type="color" default="#7B8186" value="#7B8186">



   <Variable name="titlecolor" description="Post Title Color"

             type="color" default="#C4663B" value="#C4663B">



   <Variable name="footercolor" description="Post Footer Color"

             type="color" default="#B4BABE" value="#B4BABE">



   <Variable name="sidebarcolor" description="Sidebar Title Color"

             type="color" default="#7B8186" value="#7B8186">



   <Variable name="linkcolor" description="Link Color"

             type="color" default="#DD6599" value="#DD6599">



   <Variable name="visitedlinkcolor" description="Visited Link Color"

             type="color" default="#D6A0B6" value="#D6A0B6">



   <Variable name="bodyfont" description="Text Font"

             type="font"

             default="normal normal 100% Helvetica, Arial, sans-serif" value="normal normal 100% Helvetica, Arial, sans-serif">



   <Variable name="startSide" description="Start side in blog language"

             type="automatic" default="left" value="left">



   <Variable name="endSide" description="End side in blog language"

             type="automatic" default="right" value="right">

*/



/* -- basic html elements -- */

body {

  padding: 0;

  margin: 0;

  font-size: small;

  color: $textcolor;

  background: #fff; 

  text-align: center;

}



a {

  color: $linkcolor;

  font-weight: bold;

  text-decoration: none;

}

a:visited {

  color: $visitedlinkcolor;

}

a:hover {

  text-decoration: underline;

  color: #FD0570;

}

h1 {

  margin: 0;

  color: $pagetitlecolor;

  font-size: 1.5em;

  text-transform: lowercase;

}

h1 a, h1 a:link, h1 a:visited {

  color: $pagetitlecolor;

}



h2, #comments h4 {

  font-size: 1em; 

  margin-top: 2em;

  margin-$endSide: 0;

  margin-bottom: 0;

  margin-$startSide: 0;

  color: $sidebarcolor;

  background: transparent url(http://www.blogblog.com/snapshot/bg-header1_$startSide.gif) bottom $endSide no-repeat;

  padding-bottom: 2px;

}

h3 {

  font-size: 1em; 

  margin-top: 2em;

  margin-$endSide: 0;

  margin-bottom: 0;

  margin-$startSide: 0;

  background: transparent url(http://www.blogblog.com/snapshot/bg-header1_$startSide.gif) bottom $endSide no-repeat;

  padding-bottom: 2px;

}

h4, h5 {

  font-size: 0.9em;

  text-transform: lowercase;

  letter-spacing: 2px;

}

h5 {

  color: #7B8186;

}

h6 {

  font-size: 0.8em;

  text-transform: uppercase; 

  letter-spacing: 2px;

}

p {

  margin-top: 0;

  margin-$endSide: 0;

  margin-bottom: 1em;

  margin-$startSide: 0;

}

img, form {

  border: 0; margin: 0;

}



/* -- layout -- */

#outer-wrapper {

  width: 700px;

  margin: 0 auto; 

  text-align: $startSide;

  font: $bodyfont;

  background: #fff url(http://www.blogblog.com/snapshot/bg-body_$startSide.gif) $startSide top repeat-y;

}



#header-wrapper {

  background: #D8DADC url(http://www.blogblog.com/snapshot/bg-headerdiv_$startSide.gif) $startSide top repeat-y;

  position: relative;

  _height: 0;

}



.descriptionwrapper {

  background: #fff url(http://www.blogblog.com/snapshot/bg-sidebar.gif) 1px 0 no-repeat;



  width: 264px;

  padding-top: 0;

  padding-$endSide: 0;

  padding-bottom: 0;

  padding-$startSide: 8px;

  margin-top: 1px;

  margin-$endSide: 0;

  margin-bottom: 2px;

  margin-$startSide: 0;

  position: absolute;

  bottom: 0px;

  $endSide: 0px;

}



.description {

  border: 1px solid #F3B89D;

  background: #FFD1BC url(http://www.blogblog.com/snapshot/bg-profile.gif);

  padding-top: 10px;

  padding-$endSide: 0;

  padding-bottom: 10px;

  padding-$startSide: 7px;

  margin-top: 4px;

  margin-$endSide: 0;

  margin-bottom: 0;

  margin-$startSide: -6px;

  color: #C4663B;



  font-weight: bold;

}



#header-inner {

  background: transparent url(http://www.blogblog.com/snapshot/header-01_$startSide.gif) bottom $startSide no-repeat;

  _height: 0;

}



#main-wrapper {

 line-height: 1.4;

 float: $startSide;

 padding: 10px 12px;

 border-top: solid 1px #fff;

 width: 428px;

 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

 overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

 /* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */

 voice-family: "\"}\""; 

 voice-family: inherit;

 width: 404px;

}

/* IE5 hack */

#main {}



#sidebar {

  float:$endSide;

  border-top: solid 1px #fff;

  padding-top: 4px;

  padding-$endSide: 0;

  padding-bottom: 0;

  padding-$startSide: 7px;

  background: #fff;

  width: 264px;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

}

#footer {

  clear: both; 

  background: #E9EAEB url(http://www.blogblog.com/snapshot/bg-footer_$startSide.gif) bottom $startSide no-repeat; 

  border-top: solid 1px #fff;

  min-height: 15px;

}



/* -- header style -- */

#header h1 {

  padding-top: 12px;

  padding-$endSide: 0;

  padding-bottom: 92px;

  padding-$startSide: 4px;

  width: 557px; 

  line-height: 1;

}



/* -- content area style -- */

#main {

 line-height: 1.4;

}

.post h3 {

  font-size: 1.2em;

  margin-bottom: 0;

  color: $titlecolor;

}

.post h3 a,

.post h3 a:visited {

  color: $titlecolor;

}

.post {

  clear: both;

  margin-bottom: 4em;

}

.post-footer .post-author,

.post-footer .post-timestamp {

  color: $footercolor;

}



.uncustomized-post-template .post-author,

.uncustomized-post-template .post-timestamp { 

  float: $startSide;

  margin-$endSide: 4px;

}



.uncustomized-post-template .post-footer .comment-link {

  float: $endSide;

  margin-$startSide: 4px;

}



.post img {

  border: 1px solid #E3E4E4;

  padding: 2px;

  background: #fff;

}

.deleted-comment {

  font-style:italic;

  color:gray;

}



.feed-links {

  clear: both;

  line-height: 2.5em;

}



#blog-pager-newer-link {

  float: $startSide;

 }

 

#blog-pager-older-link {

  float: $endSide;

 }

 

#blog-pager {   

  text-align: center; 

 }



.comment-footer {

  margin-bottom: 10px;

}



/* -- sidebar style -- */



.sidebar .widget { 

  margin-top: 1.3em;

  margin-$endSide: 0;

  margin-bottom: 0.5em;

  margin-$startSide: 0;

 }



.sidebar h2 {

  font-size: 1.3em; 

}

.sidebar dl {

  margin-top: 0;

  margin-$endSide: 0;

  margin-bottom: 10px;

  margin-$startSide: 0;

}

.sidebar ul {

  list-style: none;

  margin: 0;

  padding: 0;

}

.sidebar li {

  padding-bottom: 5px;

  line-height: 1

}



.main .widget .clear { 

  clear: both;

}



/* -- sidebar style -- */

#footer p {

  margin: 0;

  padding: 12px 8px;

  font-size: 0.9em;

}



.profile-textblock { 

  margin-$startSide: 0;

  clear: both;

}



.profile-img { 

  float: $startSide;

  margin-top: 0;

  margin-$endSide: 10px;

  margin-bottom: 5px;

  margin-$startSide: 0;

  border: 1px solid #7C78B5;

  padding: 4px;

}



/** Page structure tweaks for layout editor wireframe */



body#layout #header-wrapper { 

  margin-top: 0;

}

body#layout #main-wrapper { 

  padding:0;

 }

]]></b:skin>

  </head>



  <body>

  <div id='outer-wrapper'><div id='wrap2'>



    <!-- skip links for text browsers -->

    <span id='skiplinks' style='display:none;'>

      <a href='#main'>skip to main </a> |

      <a href='#sidebar'>skip to sidebar</a>

    </span>



    <div id='header-wrapper'>

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='google affiliate (رأس الصفحة)' type='Header'/>

</b:section>

    </div>

 

    <div id='content-wrapper'>



      <div id='crosscol-wrapper' style='text-align:center'>

        <b:section class='crosscol' id='crosscol' showaddelement='no'/>

      </div>



      <div id='main-wrapper'>

        <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'/>

</b:section>

      </div>



      <div id='sidebar-wrapper'>

        <b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='BlogArchive2' locked='false' title='أرشيف المدونة الإلكترونية' type='BlogArchive'/>

<b:widget id='Profile2' locked='false' title='من أنا' type='Profile'/>

</b:section>

      </div>



      <!-- spacer for skins that want sidebar and main to be the same height-->

      <div class='clear'> </div>



    </div> <!-- end content-wrapper -->



    <div id='footer-wrapper'>

      <b:section class='footer' id='footer'/>

    </div>



  </div></div> <!-- end outer-wrapper -->

</body>

</html>