setareh2013
چهارشنبه 06 فروردین 1393, 22:05 عصر
سلام
من یک سری کد نوشتم به صورت زیر : مشکل اینه که وقتی صفحه مرورگر رو کوچک می کنم سمت راست هدر و فوتر مثل عکسی که قرار دادم خالی می مونه . یه مشکل دیگه هم داشتم این که عکس ها به پایین دیویژن سبز رنگ نمی چسبند باید چه کار کنم که اون پایین قرار بگیرند ؟ با تشکر
117320
<div class="page">
<div class="header">
Header
</div>
<div class="leftmenu">
</div>
<div class="rightmenu">
</div>
<div class="centerpage">
<div id="pic1"> <img alt="" src="pic/img/pg_1.jpg" height="300" width="100%" /></div>
<div id="pic2"> <img alt="" src="pic/img/pg_2.jpg" height="300" width="100%" /></div>
<div id="pic3"> <img alt="" src="pic/img/pg_3.jpg" height="300" width="100%" /></div>
<div id="pic4"> <img alt="" src="pic/img/pg_4.jpg" height="300" width="100%" /></div>
</div>
<div class="footer">
Footer
</div>
</div>
.page
{
width:100%;
margin:0 auto;
background-image: url('pic/site-background.jpg');
}
.leftmenu
{
direction:ltr;
font-size:10pt;
font-family:Tahoma;
float:left;
width:150px;
text-align:center;
}
.rightmenu
{
direction:rtl;
font-size:10pt;
font-family:Tahoma;
float:right;
width:150px;
text-align:center;
}
.footer
{
border:1px solid gray;
direction:rtl;
width:100%;
height:30px;
text-align: center;
font-family: Tahoma;
font-size:10pt;
float:left;
margin-top:5px;
background-color:Yellow;
}
.header
{
border:1px solid gray;
margin-bottom:5px;
direction:rtl;
width:100%;
height:30px;
text-align: center;
font-family: Tahoma;
font-size:10pt;
float:left;
background-color:Gray;
}
.centerpage
{
text-align:center;
direction:ltr;
border: 1px solid gray;
font-family: Tahoma;
font-size: 10pt;
width:790px;
margin-left:auto;
margin-right:auto;
background-color:Green;
height:100%;
}
#pic1
{
margin-left:4%;
margin-top:20px;
float:left;
width:20%;
}
#pic2
{
float
:left;
margin-left:4%;
margin-top:20px;
width:20%;
}
#pic3
{
float
:left;
margin-left:4%;
margin-top:20px;
width:20%;
}
#pic4
{
margin-left:4%;
margin-top:20px;
float
:left;
width:20%;
}
من یک سری کد نوشتم به صورت زیر : مشکل اینه که وقتی صفحه مرورگر رو کوچک می کنم سمت راست هدر و فوتر مثل عکسی که قرار دادم خالی می مونه . یه مشکل دیگه هم داشتم این که عکس ها به پایین دیویژن سبز رنگ نمی چسبند باید چه کار کنم که اون پایین قرار بگیرند ؟ با تشکر
117320
<div class="page">
<div class="header">
Header
</div>
<div class="leftmenu">
</div>
<div class="rightmenu">
</div>
<div class="centerpage">
<div id="pic1"> <img alt="" src="pic/img/pg_1.jpg" height="300" width="100%" /></div>
<div id="pic2"> <img alt="" src="pic/img/pg_2.jpg" height="300" width="100%" /></div>
<div id="pic3"> <img alt="" src="pic/img/pg_3.jpg" height="300" width="100%" /></div>
<div id="pic4"> <img alt="" src="pic/img/pg_4.jpg" height="300" width="100%" /></div>
</div>
<div class="footer">
Footer
</div>
</div>
.page
{
width:100%;
margin:0 auto;
background-image: url('pic/site-background.jpg');
}
.leftmenu
{
direction:ltr;
font-size:10pt;
font-family:Tahoma;
float:left;
width:150px;
text-align:center;
}
.rightmenu
{
direction:rtl;
font-size:10pt;
font-family:Tahoma;
float:right;
width:150px;
text-align:center;
}
.footer
{
border:1px solid gray;
direction:rtl;
width:100%;
height:30px;
text-align: center;
font-family: Tahoma;
font-size:10pt;
float:left;
margin-top:5px;
background-color:Yellow;
}
.header
{
border:1px solid gray;
margin-bottom:5px;
direction:rtl;
width:100%;
height:30px;
text-align: center;
font-family: Tahoma;
font-size:10pt;
float:left;
background-color:Gray;
}
.centerpage
{
text-align:center;
direction:ltr;
border: 1px solid gray;
font-family: Tahoma;
font-size: 10pt;
width:790px;
margin-left:auto;
margin-right:auto;
background-color:Green;
height:100%;
}
#pic1
{
margin-left:4%;
margin-top:20px;
float:left;
width:20%;
}
#pic2
{
float
:left;
margin-left:4%;
margin-top:20px;
width:20%;
}
#pic3
{
float
:left;
margin-left:4%;
margin-top:20px;
width:20%;
}
#pic4
{
margin-left:4%;
margin-top:20px;
float
:left;
width:20%;
}