سؤال مهم جدا ومستعجل الى خبراء ال CSS

Dr_xXx · 03-04-2008, 12:43 AM

السلام عليكم
صممت موقع من ثلاث اعمدة اليسار وهذا العامود يحتوي على القوائم
اليمين يحتوي على محتوى الاخبار
والثالث الفوتر يحتوي على الحقوق

المشلكة هيه كل ما يطول اليمين ( المحتوى ) اليسار ما يطول معة ويصير مضهر الصفحة مشوة الصور توضح لكم اكثر

إضغط على الصورة لرؤيتها بحجمها الطبيعي

الاسم: SSITE.gif
الزيارات: 87
الحجم: 5.6 كيلوبايت

ارجو الحل باسرع وقت
شكرا

Zizwar · 03-04-2008, 06:40 PM

ضع الكود لنرى اين نعدل

owner · 03-04-2008, 07:14 PM

اهلا .

ضع الكود حتى نستطيع مساعدتك .

عموما جرب هذا الكود في الكلاس الخاص بالعمود الايسر

كود:

min-height:100%

lm4web · 03-04-2008, 09:04 PM

ضع موقعك أخي الكريم لنرى كيف يمكننا أن نساعدك

Dr_xXx · 04-04-2008, 02:51 PM

هذا الكود

كود PHP:

 
<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; windows-1256" />

<title>Arnob Blog not jus a blog its a arnod blog</title>

<style type="text/css">

<!--

body {

 
    background-color: #CCCCCC;

    width: 770px;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 0px;

    margin-left: auto;

}

.header {

    height: 175px;

    width: 770px;

    background-color:#000000;

    

    

}

.Left {

background-color:#FFFFFF;

    float: left;

    min-height:100%;

    width: 200px;

}

.Right {

background-color:#FFFFFF;

    float: right;

    height: 900px;

    width: 570px;

}

.footer {

    background-color:#666666;

    clear: right;

    height: 40px;

    width: 770px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;

    color: #CCCCCC;

    line-height: normal;

    border-bottom-width: 1px;

    border-bottom-style: dotted;

    border-bottom-color: #FFFFFF;

    background-image: url(images/manu-bg.gif);

    }

.style1 {color: #0A0809}

#apDiv1 {

    position:absolute;

    left:944px;

    top:1px;

    width:145px;

    height:307px;

    z-index:1;

}

#apDiv2 {

    position:absolute;

    left:68px;

    top:2px;

    width:89px;

    height:302px;

    z-index:2;

}

a {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #666666;

}

a:link {

    text-decoration: none;

}

a:visited {

    text-decoration: none;

    color: #333333;

}

a:hover {

    text-decoration: underline;

    color: #333333;

}

a:active {

    text-decoration: none;

    color: #333333;

}

body,td,th {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #000000;

}

.style3 {font-size: 12px; font-family: Tahoma; color: #666666;}

-->

</style>

</head>

 
<body>

<?

function template($output) {

?>

 
<div id="apDiv1"><img src="images/right.gif" width="106" height="304" /></div>

<div id="apDiv2"><img src="images/left.gif" width="106" height="304" /></div>

<div class="header" style="" > 

<div >

 
<script type="text/javascript" src="chrome.js"></script>

<style>

#MainMenu 

{

    height:54px;

    background: #FFFFFF url("images/bmid_108.gif");

    margin:0;

    border:0;

}

#tab 

{

    margin:0;

    top:0;

}

#tab ul 

{

    margin:0;

    padding:0;

    list-style:none;

    float:left;

}

#tab li 

{

display:inline;

    float:left;

    margin:0 1px 0 0 ;

    padding:0;

}

#tab a 

{

    background: url("images/bright_108.gif") no-repeat right top;

    margin:0;

    padding:0;

    text-decoration:none;

    border:0;

    display:block;

    float:left;

}

#tab a span 

{

    display:block;

    background:url("images/bleft_108.gif") no-repeat left top;

    padding:0 25px 0 25px;

    font-family:Arial, Helvetica, sans-serif;

    font-size:11;

    color:#FFFFFF;

    font-weight:bold;

    line-height:54px;

}

#tab a:hover,#tab li.item_active a 

{

    background-position:right bottom;

    border-color:;

}

#tab a:hover span,#tab li.item_active a span 

{

    background-position:left bottom;

    color:#6A888A;

    font-weight:bold;

    font-style:normal;

    text-decoration:none;

}

.dropmenudiv

{

    position:absolute;

    top:0;

    float:left;

    display:block;

    visibility:hidden;

    border:0 solid ;

    background: #FFFFFF url("images/bmid_108.gif");

    color:#FFFFFF;

    z-index:100;

    text-decoration:none;

    padding:0;

}

.dropmenudiv ul 

{

    margin:0;

    padding:0;

    list-style:none;

}

.dropmenudiv li 

{

    display:inline;

    margin:0;

    padding:0;

}

.dropmenudiv a:link, .dropmenudiv a:visited

{

    width:180px;

    margin:0 1px 0 0 ;

    padding:0;

    display:block;

    border:0 solid ;

    color:#FFFFFF;

    background:url("images/bleft_108.gif") no-repeat left top;

    font-weight:bold;

    font-style:normal;

    text-decoration:none;

}

.dropmenudiv a span 

{

    float:left;

    display:block;

    line-height:54px;

    background:url("images/bright_108.gif") no-repeat right top;

    padding:0 25px 0 25px;

    font-family:Arial, Helvetica, sans-serif;

    font-size:11;

    color:#FFFFFF;

}

.dropmenudiv a span 

{

    float:none;

}

.dropmenudiv a:hover

{

    border:0 solid ;

    background-position:left bottom;

    font-weight:bold;

    font-style:normal;

    text-decoration:none;

    color:#6A888A;

}

.dropmenudiv a:hover span 

{

    background-position:right bottom;

    color:#6A888A;

    font-weight:bold;

}

 
</style>

<div id="MainMenu" >

    <div id="tab">

        <ul>

            <li ><a href="?display=main"><span>Home</span></a></li>

            <li><a href="#"><span>Portfolio</span></a></li>

            <li><a href="#"><span>Blog</span></a></li>

            <li><a href="#"><span>Resources </span></a></li>

            <li><a href="#"><span>Links </span></a></li>

          <li><a href="#"><span>Contact Us </span></a></li>

             <li><a href="?display=About"><span>About us </span></a></li>

        </ul>

    </div>

</div>

</div>

<img   src="images/HDIM.gif" />

</div>

<div class="Right">

  <table width="560" border="0" cellspacing="0" cellpadding="0">

    <tr>

      <td background="images/RIGHTBG1.gif" style="background-repeat:no-repeat">

      <p >

      <table width="550" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td ><div style="margin-left:20px; margin-top:25px;"><?= $output;?></div></td>

  </tr>

</table>

 
      </p></td>

    </tr>

  </table>

  <br />

</div>

<div  class="Left" > <p style=" margin:10px;">&nbsp;</p> 

  <table width="200" border="0" cellpadding="0" cellspacing="0">

  <tr>

    <td height="49px" style="background-image: url(images/top-manu.gif); background-repeat:no-repeat; background-position:center;"><p><img style="margin-left:20px;" src="images/dot.gif" width="10" height="10" /> Blog Category</p>

      </td>

    </tr>

  <tr>

    <td style="background-image:url(images/midmanu.gif); background-repeat:repeat-y; background-position:center;"><table width="170" border="0" align="center" cellpadding="0" cellspacing="0">

      <tr>

        <td width="25"><div align="center"><img src="images/dot.gif" width="10" height="10" /></div></td>

        <td width="145"><a href="?display=IraqNews">About Iraq</a></td>

      </tr>

      <tr>

        <td><div align="center"><img src="images/dot.gif" width="10" height="10" /></div></td>

        <td><a href="?display=News">News</a></td>

      </tr>

      <tr>

        <td><div align="center"><img src="images/dot.gif" width="10" height="10" /></div></td>

        <td><a href="?display=Cartoons">Cartoons</a></td>

      </tr>

      <tr>

        <td><div align="center"><img src="images/dot.gif" width="10" height="10" /></div></td>

        <td><a href="?display=internet">internet</a></td>

      </tr>

      <tr>

        <td><div align="center"><img src="images/dot.gif" width="10" height="10" /></div></td>

        <td><a href="?display=technology">technology</a></td>

      </tr>

      <tr>

        <td><div align="center"><img src="images/dot.gif" width="10" height="10" /></div></td>

        <td><a href="?display=Fun">Fun</a></td>

      </tr>

      <tr>

        <td><div align="center"><img src="images/dot.gif" width="10" height="10" /></div></td>

        <td><a href="?display=NoCat.php">No Cat</a></td>

      </tr>

    </table></td>

    </tr>

  <tr>

    <td height="27px" style="background-image:url(images/footer.gif); background-repeat:no-repeat; background-position:center;">&nbsp;</td>

    </tr>

</table><br>

  <table width="200" border="0" cellpadding="0" cellspacing="0">

    <tr>

      <td height="49px" style="background-image: url(images/top-manu.gif); background-repeat:no-repeat; background-position:center;"><p><img style="margin-left:20px;" src="images/dot2.gif" width="10" height="10" /> Tutorials Catorgys</p></td>

    </tr>

    <tr>

      <td style="background-image:url(images/midmanu.gif); background-repeat:repeat-y; background-position:center;"><table width="170" border="0" align="center" cellpadding="0" cellspacing="0">

        <tr>

          <td width="25"><div align="center"><img src="images/dot2.gif" width="10" height="10" /></div></td>

          <td><a href="#">Photoshop</a></td>

        </tr>

        <tr>

          <td width="25"><div align="center"><img src="images/dot2.gif" width="10" height="10" /></div></td>

          <td><a href="#">DreamWaver</a></td>

        </tr>

        <tr>

          <td width="25"><div align="center"><img src="images/dot2.gif" width="10" height="10" /></div></td>

          <td><a href="#">PHP</a></td>

        </tr>

        <tr>

          <td width="25"><div align="center"><img src="images/dot2.gif" width="10" height="10" /></div></td>

          <td><a href="#">Html</a></td>

        </tr>

        <tr>

          <td width="25"><div align="center"><img src="images/dot2.gif" width="10" height="10" /></div></td>

          <td><a href="#">Indesign</a></td>

        </tr>

      </table></td>

    </tr>

    <tr>

      <td height="27px" style="background-image:url(images/footer.gif); background-repeat:no-repeat; background-position:center;">&nbsp;</td>

    </tr>

  </table><br />

  <table width="200" border="0" align="center" cellpadding="0" cellspacing="0">

    <tr>

      <td height="49px" style="background-image: url(images/top-manu.gif); background-repeat:no-repeat; background-position:center;"><p><img style="margin-left:20px;" src="images/dot3.gif" width="10" height="10" /> Famous Pages</p></td>

    </tr>

 
    <tr>

      <td style="background-image:url(images/midmanu.gif); background-repeat:repeat-y; background-position:center;"><table width="170" border="0" align="center" cellpadding="0" cellspacing="0">

        <tr>

          <td width="25"><div align="center"><img src="images/dot3.gif" width="10" height="10" /></div></td>

          <td width="145"><a href="#">Home Page</a></td>

        </tr>

        <tr>

          <td><div align="center"><img src="images/dot3.gif" width="10" height="10" /></div></td>

          <td><a href="#">Links</a></td>

        </tr>

        <tr>

          <td><div align="center"><img src="images/dot3.gif" width="10" height="10" /></div></td>

          <td><a href="#">About us</a></td>

        </tr>

        <tr>

          <td><div align="center"><img src="images/dot3.gif" width="10" height="10" /></div></td>

          <td><a href="#">Resources</a></td>

        </tr>

        <tr>

          <td><div align="center"><img src="images/dot3.gif" width="10" height="10" /></div></td>

          <td>Blog</td>

        </tr>

        <tr>

          <td><div align="center"><img src="images/dot3.gif" width="10" height="10" /></div></td>

          <td>Contact us</td>

        </tr>

        <tr>

          <td><div align="center"><img src="images/dot3.gif" width="10" height="10" /></div></td>

          <td>Ads</td>

        </tr>

      </table></td>

    </tr>

    <tr>

      <td height="27px" style="background-image:url(images/footer.gif); background-repeat:no-repeat; background-position:center;">&nbsp;</td>

    </tr>

  </table>

 
  

  <table width="200" border="0" cellpadding="0" cellspacing="1">

    <tr>

      <td><img src="images/fwork.gif" width="160" height="20" /></td>

    </tr>

    <tr>

      <td><div align="center"><img src="images/flow.gif" width="170" height="44" border="1" /><br />

      </div></td>

    </tr>

    <tr>

      <td><div align="center"><img src="images/bestwebgallery.gif" width="170" height="44" border="1" /></div></td>

    </tr>

  </table>

</div>

<div  class="footer">

  <p style="margin:5px;"><span class="style1">© 2007 13styles.com. All Rights Reserved. Work provided via <a href="http://creativecommons.org/licenses/by-sa/3.0/us/" rel="nofollow'">Creative Commons License</a>. Powered by <a href="http://wordpress.org/" rel="nofollow">WordPress</a>. <a href="http://www.13styles.com/feed/">RSS Feed</a>. Ads powered by <a href="http://buysellads.com/buy/detail/33/">BuySellAds.com</a></span>   Sponsors: <a href="http://www.buydomains.com/find-premium-domains/" rel="nofollow">Domain Names</a></p>

</div>

<? } ?>

 
</body>

</html>

Dr_xXx · 06-04-2008, 05:53 PM

uppppppppppppppp

lm4web · 06-04-2008, 10:14 PM

أشعر أخي الكريم أن كود الصفحة غير واضح تماما غير ذلك أن الصفحة تستخدم الجداول بكثرة

لكن الحل المؤقت لما تريد لابد ان يكون المحتوى في نفس حجم الكود الآتي:

كود:

.Right {
background-color:#FFFFFF;
    float: right;
    height: 612px;
    width: 570px;
}

أو

كود:

.Left {
background-color:#FFFFFF;
    float: left;
    min-height:900px;
    width: 200px;
}

قم بأحد التعديلان وليس كلاهما

المبدع العربي · 18-04-2008, 05:09 PM

اجعل العموادن الأيمن والأيسر داخل div آخر تكون خلفيته بيضاء