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

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

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

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

اضغط على الصورة لعرض أكبر

الاســـم: SSITE.gif
المشاهدات: 72
الحجـــم: 5.6 كيلوبايت
الرقم: 39862

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

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 آخر تكون خلفيته بيضاء

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
سؤال مهم جدا ,, كيف تعرف اذا كنت مبرمج	محمد الرحيلي	PHP	2	10-01-2006 01:57 PM
سؤال مهم جدا بس مدري هو مهم لي أو للجميع	هكرز المنتديات	إصلاح وصيانة المنتديات	5	15-06-2005 06:21 AM
طريقة الترقيه من نسخة منتدى 2.2.0 وما بعدها الى نسخة منتدى 2.3.0 بالتفصيل الممل	Khaled774	إصلاح وصيانة المنتديات	14	25-03-2004 10:20 AM
سؤال الى خبراء منتديات ال في بي هام جدا	elkaser	إصلاح وصيانة المنتديات	4	23-01-2004 01:22 PM
شباب مين الشاطر فيكم ويقوللي كيف اسوي شعاااااااااار.؟	MaRWaN	قسم التصميم والرسومات والمونتاج	6	12-12-2000 03:52 PM

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق