 |
السلام عليكم
صممت موقع من ثلاث اعمدة اليسار وهذا العامود يحتوي على القوائم
اليمين يحتوي على محتوى الاخبار
والثالث الفوتر يحتوي على الحقوق
المشلكة هيه كل ما يطول اليمين ( المحتوى ) اليسار ما يطول معة ويصير مضهر الصفحة مشوة الصور توضح لكم اكثر
ارجو الحل باسرع وقت
شكرا
__________________
#
ضع الكود لنرى اين نعدل
اهلا .
ضع الكود حتى نستطيع مساعدتك .
عموما جرب هذا الكود في الكلاس الخاص بالعمود الايسر
كود:min-height:100%
ضع موقعك أخي الكريم لنرى كيف يمكننا أن نساعدك
هذا الكود
كود 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;"> </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;"> </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;"> </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;"> </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>
__________________
#
uppppppppppppppp
__________________
#
أشعر أخي الكريم أن كود الصفحة غير واضح تماما غير ذلك أن الصفحة تستخدم الجداول بكثرة
لكن الحل المؤقت لما تريد لابد ان يكون المحتوى في نفس حجم الكود الآتي:
كود:.Right { background-color:#FFFFFF; float: right; height: 612px; width: 570px; }
أو
قم بأحد التعديلان وليس كلاهماكود:.Left { background-color:#FFFFFF; float: left; min-height:900px; width: 200px; }
اجعل العموادن الأيمن والأيسر داخل div آخر تكون خلفيته بيضاء
__________________
مدونة المبدع العربي
ضوابط المشاركة
رد مع اقتباس