pclordweb
دوشنبه 28 اسفند 1391, 18:02 عصر
من هر کاری میکنم فوتر نمیره پایین ، با اینکه یه عالمه محتوا وجود داره ولی هیچکدوم روبادمجون هم حساب نمیکنه. از صبح درگیر اونم اگه تموم بشه کاره منم تموم شده.
عکس دمو پیوست شد. میخوام اون قسمت آبیه که پشت بنر های تبلیغاتی هستش بره پایین تر از همه و با اضافه شدن محتوا یا ستون اون هم تغییر مکان بده بره پایین تر
این کد های اچ تی ام ال :
<!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" dir="rtl">
<!-- Head Part -->
<head>
<meta name="keywords" content="وی کی پی سی ,wikipc,آموزش کامپیوتر,آموزش برنامه نویسی,طراحی وب" />
<meta name="description" content="وی کی پی سی , آموزش کامپیوتر , گرافیک , اینترنت , طراحی وب و برنامه نویسی" />
<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon" />
<link href="Style/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="nofollow" />
<title>Wikipc|ویکی پی سی,آموزش کامپیوتر</title>
<style type="text/css">
body {
background-image: url(Images/bg.png);
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
color: #FFF;
}
</style>
</head>
<!-- Body part -->
<body>
<!-- HEader part -->
<div id="header"><div id="headbody">
<a href="index.html"><div id="logo"></div></a>
<a href="#"><div id="videotop"></div></a><a href="#"><div id="downloadtop"></div></a>
</div></div>
<!-- Navbar Part -->
<div id="navbar">
<div id="navbody">
<div id="navtext">
<ul>
<li><a href="index.html"> صفحه نخست </a></li>
<li><a href="http://www.video.wikipc.ir"> بخش ویدئو </a></li>
<li><a href="http://www.download.wikipc.ir"> بخش دانلود </a></li>
<li><a href="about.html"> درباره ما </a></li>
<li><a href="sitemap.html"> نقشه سایت </a></li>
<li><a href="ads.html"> تبلیغات </a></li>
<li><a href="conect.html"> تماس با ما </a></li>
</ul>
</div>
</div>
</div>
<!-- ADS Box -->
<div id="adsbox"><div id="adsimg"></div>
<table align="center" class="adsbanner">
<td> <a href="http://www.macdesign.ir"/><img src="ads.gif" alt="ADS Banner" /></a> </td>
<td><a href="http://www.macdesign.ir"/><img src="ads.gif" alt="ADS Banner" /></a> </td>
</table>
</div>
<div id="main">
<!-- content -->
<div class="content"><div class="context">شاید روزی روزگاری </div></div>
<!-- to content -->
<div class="concon">
<!-- hrtop -->
<div class="hrtop">
موضوعات: کامپیوتر ، اینترنت ، ترایا
</div>
<!-- orgcont -->
<div class="sidetext">
شاید روزی روزگاری
<!-- hrbottom -->
<a href="#"><div class="more"></div></a>
<div class="hrbottom">
<table width="500px">
<tr>
<td> نویسنده : مهدی اصل علینژاد </td>
<td> تاریخ : 00/00/00 </td>
<td><a href="#"> نظرات </a></td>
</tr>
</table>
</div>
</div>
</div>
<!-- content -->
<div class="content"><div class="context">شاید روزی روزگاری </div></div>
<!-- to content -->
<div class="concon">
<!-- hrtop -->
<div class="hrtop">
موضوعات: کامپیوتر ، اینترنت ، ترایا
</div>
<!-- orgcont -->
<div class="sidetext">
شاید روزی روزگاری
<!-- hrbottom -->
<a href="#"><div class="more"></div></a>
<div class="hrbottom">
<table width="500px">
<tr>
<td> نویسنده : مهدی اصل علینژاد </td>
<td> تاریخ : 00/00/00 </td>
<td><a href="#"> نظرات </a></td>
</tr>
</table>
</div>
</div>
</div>
<!-- sidebar -->
<div class="sideright"><div class="righttext">شاید روزی روزگاری </div></div>
<div class="sidecon"><div class="sidetext">شاید روزی روزگاری</div></div>
<div class="sideright"><div class="righttext">شاید روزی روزگاری </div></div>
<div class="sidecon"><div class="sidetext">شاید روزی روزگاری</div></div>
</div>
<div id="footer"></div>
</body>
</html>
اینم سی اس اس ها :
}
#header {
background-image:url(../Images/header.png);
width:auto;
height:185px;
margin:-8px;
}
#navbar {
background-image:url(../Images/navbarbg.png);
width:auto;
height:78px;
margin: -29px -8px 0px -8px;
}
#main {
width:980px;
padding-bottom:40px;
height:auto;
background:-moz-linear-gradient(100% 100% 88deg, #e5e5e5, #FFFFFF 80%);
margin-top:72px;
margin-right:78px;
border:solid 1px #e5e5e5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
position:absolute;
}
#adsbox {
width:980px;
min-height:70px;
background-color:#FFFFFF;
margin:auto;
margin-bottom:-60px;
border:solid 1px #d4d4d4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#headbody {
width:900px;
height:185px;
margin:auto;
}
#navbody {
width:900px;
height:78px;
margin:auto;
}
#adsimg {
background-image:url(../Images/ads.png);
width:173px;
height:36px;
margin-top:-21px;
margin-right:10px;
position:absolute;
}
.adsbanner {
margin-top:3px;
}
#logo {
background-image:url(../Images/logotop.png);
width:55%;
height:156px;
float:right;
margin-top:15px;
margin-right:5px;
}
#videotop {
background-image:url(../Images/partsite.png);
background-position:top;
width:251px;
float:left;
height:56px;
margin-top:10px;
opacity:0.75;
transition: all 0.10s ease-in 1.5s;
-webkit-transition: all 0.10s ease-in 1.5s;
-moz-transition: all 0.10s ease-in 1.5s;
}
#videotop:hover {
opacity:1;
transition:ease-in 0.8s;
-webkit-transition:ease-in 0.8s;
-moz-transition:ease-in 0.8s;
}
#downloadtop {
background-image:url(../Images/partsite.png);
background-position:bottom;
width:251px;
float:left;
height:56px;
margin-top:30px;
opacity:0.75;
transition: all 0.10s ease-in 1.5s;
-webkit-transition: all 0.10s ease-in 1.5s;
-moz-transition: all 0.10s ease-in 1.5s;
}
#downloadtop:hover {
opacity:1;
transition:ease-in 0.8s;
-webkit-transition:ease-in 0.8s;
-moz-transition:ease-in 0.8s;
}
#navtext{
color:#FFFFFF;
font-family:Byekan;
font-size:16px;
position:relative;top:23px;
}
ul li{
display:inline-block;
padding-left:10px;
margin-left:5px;
padding-right:8px;
margin-right:-4px;
transition: all 0.50s ease-in 0.2s;
-webkit-transition: all 0.50s ease-in 0.2s;
-moz-transition: all 0.50s ease-in 0.2s;
height:25px;
}
li:hover{
background-color:#069;
opacity:0.8;
-moz-box-shadow: 0px 0px 5px #069;
-webkit-box-shadow: 0px 0px 5px #069;
box-shadow: 0px 0px 5px #069;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
z-index:100px;
}
.sideright {
background-image:url(../Images/rightside.png);
height:49px;
width:260px;
margin-top:10px;
margin-right:-7px;
}
.sidecon {
background-color:#F4F4F4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border:1px solid #CCC;
width:250px;
height:auto;
margin-top:-10px;
}
.content {
background-image:url(../Images/contenthead.png);
width:630px;
height:41px;
float:left;
margin-left:40px;
margin-top:10px;
}
.concon {
background-color:#F4F4F4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border:1px solid #CCC;
width:626px;
height:auto;
float:left;
margin-left:42px;
margin-top:-3px;
margin-bottom:10px;
}
.context {
font-family:Byekan;
font-size:100%;
color:#FFFFFF;
margin-top:8px;
margin-right:15px;
}
.righttext {
font-family:Byekan;
font-size:100%;
color:#FFFFFF;
margin-right:10px;
position:relative;top:7px;
}
.sidetext {
font-family:Byekan;
color:#333;
font-size:12px;
margin:5px;
}
.hrtop{
font-family:Byekan;
font-size:12px;
color:#666;
margin:6px;
margin-bottom:15px;
border-bottom:1px #666666 solid;
}
.hrbottom{
font-family:Byekan;
font-size:12px;
color:#666;
margin:6px;
margin-top:15px;
border-top:1px #666666 solid;
}
.hrbottom a{
font-family:Byekan;
font-size:12px;
color:#666 !important;
}
.more {
background-image:url(../Images/more2.png);
width:100px;
height:35px;
float:left;
position:relative;left:2px;top:10px;
margin-bottom:20px;
}
.more:hover {
background-image:url(../Images/more1.png);
}
#footer {
background-image:url(../Images/header.png);
width:auto;
height:185px;
margin:auto;
}
عکس دمو پیوست شد. میخوام اون قسمت آبیه که پشت بنر های تبلیغاتی هستش بره پایین تر از همه و با اضافه شدن محتوا یا ستون اون هم تغییر مکان بده بره پایین تر
این کد های اچ تی ام ال :
<!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" dir="rtl">
<!-- Head Part -->
<head>
<meta name="keywords" content="وی کی پی سی ,wikipc,آموزش کامپیوتر,آموزش برنامه نویسی,طراحی وب" />
<meta name="description" content="وی کی پی سی , آموزش کامپیوتر , گرافیک , اینترنت , طراحی وب و برنامه نویسی" />
<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon" />
<link href="Style/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="nofollow" />
<title>Wikipc|ویکی پی سی,آموزش کامپیوتر</title>
<style type="text/css">
body {
background-image: url(Images/bg.png);
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
color: #FFF;
}
</style>
</head>
<!-- Body part -->
<body>
<!-- HEader part -->
<div id="header"><div id="headbody">
<a href="index.html"><div id="logo"></div></a>
<a href="#"><div id="videotop"></div></a><a href="#"><div id="downloadtop"></div></a>
</div></div>
<!-- Navbar Part -->
<div id="navbar">
<div id="navbody">
<div id="navtext">
<ul>
<li><a href="index.html"> صفحه نخست </a></li>
<li><a href="http://www.video.wikipc.ir"> بخش ویدئو </a></li>
<li><a href="http://www.download.wikipc.ir"> بخش دانلود </a></li>
<li><a href="about.html"> درباره ما </a></li>
<li><a href="sitemap.html"> نقشه سایت </a></li>
<li><a href="ads.html"> تبلیغات </a></li>
<li><a href="conect.html"> تماس با ما </a></li>
</ul>
</div>
</div>
</div>
<!-- ADS Box -->
<div id="adsbox"><div id="adsimg"></div>
<table align="center" class="adsbanner">
<td> <a href="http://www.macdesign.ir"/><img src="ads.gif" alt="ADS Banner" /></a> </td>
<td><a href="http://www.macdesign.ir"/><img src="ads.gif" alt="ADS Banner" /></a> </td>
</table>
</div>
<div id="main">
<!-- content -->
<div class="content"><div class="context">شاید روزی روزگاری </div></div>
<!-- to content -->
<div class="concon">
<!-- hrtop -->
<div class="hrtop">
موضوعات: کامپیوتر ، اینترنت ، ترایا
</div>
<!-- orgcont -->
<div class="sidetext">
شاید روزی روزگاری
<!-- hrbottom -->
<a href="#"><div class="more"></div></a>
<div class="hrbottom">
<table width="500px">
<tr>
<td> نویسنده : مهدی اصل علینژاد </td>
<td> تاریخ : 00/00/00 </td>
<td><a href="#"> نظرات </a></td>
</tr>
</table>
</div>
</div>
</div>
<!-- content -->
<div class="content"><div class="context">شاید روزی روزگاری </div></div>
<!-- to content -->
<div class="concon">
<!-- hrtop -->
<div class="hrtop">
موضوعات: کامپیوتر ، اینترنت ، ترایا
</div>
<!-- orgcont -->
<div class="sidetext">
شاید روزی روزگاری
<!-- hrbottom -->
<a href="#"><div class="more"></div></a>
<div class="hrbottom">
<table width="500px">
<tr>
<td> نویسنده : مهدی اصل علینژاد </td>
<td> تاریخ : 00/00/00 </td>
<td><a href="#"> نظرات </a></td>
</tr>
</table>
</div>
</div>
</div>
<!-- sidebar -->
<div class="sideright"><div class="righttext">شاید روزی روزگاری </div></div>
<div class="sidecon"><div class="sidetext">شاید روزی روزگاری</div></div>
<div class="sideright"><div class="righttext">شاید روزی روزگاری </div></div>
<div class="sidecon"><div class="sidetext">شاید روزی روزگاری</div></div>
</div>
<div id="footer"></div>
</body>
</html>
اینم سی اس اس ها :
}
#header {
background-image:url(../Images/header.png);
width:auto;
height:185px;
margin:-8px;
}
#navbar {
background-image:url(../Images/navbarbg.png);
width:auto;
height:78px;
margin: -29px -8px 0px -8px;
}
#main {
width:980px;
padding-bottom:40px;
height:auto;
background:-moz-linear-gradient(100% 100% 88deg, #e5e5e5, #FFFFFF 80%);
margin-top:72px;
margin-right:78px;
border:solid 1px #e5e5e5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
position:absolute;
}
#adsbox {
width:980px;
min-height:70px;
background-color:#FFFFFF;
margin:auto;
margin-bottom:-60px;
border:solid 1px #d4d4d4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#headbody {
width:900px;
height:185px;
margin:auto;
}
#navbody {
width:900px;
height:78px;
margin:auto;
}
#adsimg {
background-image:url(../Images/ads.png);
width:173px;
height:36px;
margin-top:-21px;
margin-right:10px;
position:absolute;
}
.adsbanner {
margin-top:3px;
}
#logo {
background-image:url(../Images/logotop.png);
width:55%;
height:156px;
float:right;
margin-top:15px;
margin-right:5px;
}
#videotop {
background-image:url(../Images/partsite.png);
background-position:top;
width:251px;
float:left;
height:56px;
margin-top:10px;
opacity:0.75;
transition: all 0.10s ease-in 1.5s;
-webkit-transition: all 0.10s ease-in 1.5s;
-moz-transition: all 0.10s ease-in 1.5s;
}
#videotop:hover {
opacity:1;
transition:ease-in 0.8s;
-webkit-transition:ease-in 0.8s;
-moz-transition:ease-in 0.8s;
}
#downloadtop {
background-image:url(../Images/partsite.png);
background-position:bottom;
width:251px;
float:left;
height:56px;
margin-top:30px;
opacity:0.75;
transition: all 0.10s ease-in 1.5s;
-webkit-transition: all 0.10s ease-in 1.5s;
-moz-transition: all 0.10s ease-in 1.5s;
}
#downloadtop:hover {
opacity:1;
transition:ease-in 0.8s;
-webkit-transition:ease-in 0.8s;
-moz-transition:ease-in 0.8s;
}
#navtext{
color:#FFFFFF;
font-family:Byekan;
font-size:16px;
position:relative;top:23px;
}
ul li{
display:inline-block;
padding-left:10px;
margin-left:5px;
padding-right:8px;
margin-right:-4px;
transition: all 0.50s ease-in 0.2s;
-webkit-transition: all 0.50s ease-in 0.2s;
-moz-transition: all 0.50s ease-in 0.2s;
height:25px;
}
li:hover{
background-color:#069;
opacity:0.8;
-moz-box-shadow: 0px 0px 5px #069;
-webkit-box-shadow: 0px 0px 5px #069;
box-shadow: 0px 0px 5px #069;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
z-index:100px;
}
.sideright {
background-image:url(../Images/rightside.png);
height:49px;
width:260px;
margin-top:10px;
margin-right:-7px;
}
.sidecon {
background-color:#F4F4F4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border:1px solid #CCC;
width:250px;
height:auto;
margin-top:-10px;
}
.content {
background-image:url(../Images/contenthead.png);
width:630px;
height:41px;
float:left;
margin-left:40px;
margin-top:10px;
}
.concon {
background-color:#F4F4F4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border:1px solid #CCC;
width:626px;
height:auto;
float:left;
margin-left:42px;
margin-top:-3px;
margin-bottom:10px;
}
.context {
font-family:Byekan;
font-size:100%;
color:#FFFFFF;
margin-top:8px;
margin-right:15px;
}
.righttext {
font-family:Byekan;
font-size:100%;
color:#FFFFFF;
margin-right:10px;
position:relative;top:7px;
}
.sidetext {
font-family:Byekan;
color:#333;
font-size:12px;
margin:5px;
}
.hrtop{
font-family:Byekan;
font-size:12px;
color:#666;
margin:6px;
margin-bottom:15px;
border-bottom:1px #666666 solid;
}
.hrbottom{
font-family:Byekan;
font-size:12px;
color:#666;
margin:6px;
margin-top:15px;
border-top:1px #666666 solid;
}
.hrbottom a{
font-family:Byekan;
font-size:12px;
color:#666 !important;
}
.more {
background-image:url(../Images/more2.png);
width:100px;
height:35px;
float:left;
position:relative;left:2px;top:10px;
margin-bottom:20px;
}
.more:hover {
background-image:url(../Images/more1.png);
}
#footer {
background-image:url(../Images/header.png);
width:auto;
height:185px;
margin:auto;
}