سلام
من به یه مشکل عجیب برخوردم
اینکه فوتر به پایین صفحه نمیچسبه و زیر آخرین عنصر صفحه قرار گرفته !!!!!!
خیلی عجیبه
کدی هم که نوشتم اینه :
footer{
background-color:#17555c;
height:100px;
}
کد HTML:<footer></footer>
سلام
من به یه مشکل عجیب برخوردم
اینکه فوتر به پایین صفحه نمیچسبه و زیر آخرین عنصر صفحه قرار گرفته !!!!!!
خیلی عجیبه
کدی هم که نوشتم اینه :
footer{
background-color:#17555c;
height:100px;
}
کد HTML:<footer></footer>
سلام
باید از position:absolute استفاده کنی.
نمونه کد:
کد HTML:<!doctype html> <html> <head> <style> *{margin: 0;padding: 0;} footer{ background-color:#17555c; position:absolute;width:100%;height:100px;bottom:0; } </style> </head> <body> <footer></footer> </body> </html>
نشد این هم
چرا نشد؟
دقیقا این کدی که دادم رو بریز تو یه فایل و اجراش کن ببین همونی هست که میخوای؟
اگه این کدها رو داخل قالبت استفاده کردی و نشده به خاطر کدهای دیگه ای هست که نوشتی و یا ساختارت درست نیست! در هر صورت قالبت رو بزار تا بررسی کنیم.
اون کدی که شما دادین کار میکنه اما تو قالب من نه :(
کدهای من ایناس :
/*@font-face{
font-family:'Far.Two Light';
src:url('font/FarTwoLight.eot?#') format('eot'),
url('font/FarTwoLight.woff') format('woff'),
url('font/FarTwoLight.svg') format('svg'),
url('font/FarTwoLight.ttf') format('truetype')
}
@font-face{
font-family:'Century Gothic';
src:url('font/gomic.eot?#') format('eot'),
url('font/gomic.woff') format('woff'),
url('font/gomic.svg') format('svg'),
url('font/gomic.ttf') format('truetype')
}
*/
*{
text-decoration:none;
margin: 0 auto;
padding: 0;
border: 0;
outline: 0;
direction: rtl;
font-family:"Far.Two Light", "Century Gothic";
}
*::selection {
background-color: rgba(252, 174, 50, 0.8);
color: #FFFFFF;
}
*::-moz-selection {
background-color: rgba(252, 174, 50, 0.8);
color: #FFFFFF;
}
html{
background:url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#wraper{
width:960px;
}
header{
background-color:#17555c;
height:17px;
}
#logo{
background-image:url(../img/logo.png);
background-repeat:no-repeat;
height:265px;
width:600px;
margin-top:30px;
}
#nav ul{
list-style:none;
}
#nav ul li{
background-image:url(../img/circle.png);
width:140px;
height:132px;
display: inline-block;
transition-duration: 0.2s, 0.2s;
transition: all linear 0.2s;
-o-transition: all linear 0.2s;
-moz-transition: all linear 0.2s;
-webkit-transition: all linear 0.2s;
-ms-transition: all linear 0.2s;
}
#nav ul li:nth-child(2){
top:30px;
position:relative;
}
#nav ul li:nth-child(4){
top:30px;
position:relative;
}
#nav ul li:nth-child(3){
top:60px;
position:relative;
}
#nav ul li:hover{
background-image:url(../img/li.png);
width:140px;
height:132px;
display: inline-block;
-moz-transition-duration: 0.2s, 0.2s;
-o-transition-duration: 0.2s, 0.2s;
-ms-transition-duration: 0.2s, 0.2s;
-webkit-transition-duration: 0.2s, 0.2s;
}
#nav ul li a {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 25px;
position: relative;
right: 35px;
top: 28px;
}
#nav ul li a {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 25px;
position: relative;
right: 35px;
top: 28px;
}
#nav{
width: 740px;
}
#about {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 25px;
position: relative;
}
#abouten {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 16px;
position: relative;
top: -6px;
display: block;
right: -3px;
}
#price {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 25px;
position: relative;
}
#pricen {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 16px;
position: relative;
top: -6px;
display: block;
right: 14px;
}
#portfolio {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 25px;
position: relative;
right: -15px;
}
#portfolioen {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 16px;
position: relative;
top: -6px;
display: block;
}
#services {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 25px;
position: relative;
right: 4px;
}
#servicesen {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 16px;
position: relative;
top: -6px;
display: block;
right: 5px;
}
#contact {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 25px;
position: relative;
right: -11px;
}
#contacten {
color: #fff;
font-family: "B Koodak", "Century Gothic";
font-size: 16px;
position: relative;
top: -6px;
display: block;
right: -11px;
}
footer{
background-color:#17555c;
width:100%;
height:50px;
bottom:0;
}
باید کدهای html رو هم بزاری! وگرنه نمیشه علت یابی کرد!
کد HTML:<body> <div id="wraper"> <header></header> <div id="logo"></div><!--logo--> <nav id="nav"> <ul> <li><a href=""> <span id="about">درباره ما</span> <span id="abouten">About We</span> </a></li> <li><a href=""> <span id="price">تعرفه ها</span> <span id="pricen">price</span> </a></li> <li><a href=""> <span id="portfolio">نمونه کارها</span> <span id="portfolioen">portfolio</span> </a></li> <li><a href=""> <span id="services">خدمات</span> <span id="servicesen">services</span> </a></li> <li><a href=""> <span id="contact">تماس با ما</span> <span id="contacten">contact we</span> </a></li> </ul> </nav> <footer></footer> </div><!--wraper--> </body>
position: absolute رو به فوتر ندادی که! این دو خط رو به فوترت اضافه کن:
position: absolute;left: 0;
نمیشه چرا!!!!!!!
واسه من که کار میکنه:
کد HTML:<!doctype html> <html> <head> <meta charset="UTF-8"/> <style> *{ text-decoration:none; margin: 0 auto; padding: 0; border: 0; outline: 0; direction: rtl; font-family:"Far.Two Light", "Century Gothic"; } *::selection { background-color: rgba(252, 174, 50, 0.8); color: #FFFFFF; } *::-moz-selection { background-color: rgba(252, 174, 50, 0.8); color: #FFFFFF; } html{ background:url(../img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #wraper{ width:960px; } header{ background-color:#17555c; height:17px; } #logo{ background-image:url(../img/logo.png); background-repeat:no-repeat; height:265px; width:600px; margin-top:30px; } #nav ul{ list-style:none; } #nav ul li{ background-image:url(../img/circle.png); width:140px; height:132px; display: inline-block; transition-duration: 0.2s, 0.2s; transition: all linear 0.2s; -o-transition: all linear 0.2s; -moz-transition: all linear 0.2s; -webkit-transition: all linear 0.2s; -ms-transition: all linear 0.2s; } #nav ul li:nth-child(2){ top:30px; position:relative; } #nav ul li:nth-child(4){ top:30px; position:relative; } #nav ul li:nth-child(3){ top:60px; position:relative; } #nav ul li:hover{ background-image:url(../img/li.png); width:140px; height:132px; display: inline-block; -moz-transition-duration: 0.2s, 0.2s; -o-transition-duration: 0.2s, 0.2s; -ms-transition-duration: 0.2s, 0.2s; -webkit-transition-duration: 0.2s, 0.2s; } #nav ul li a { color: #fff; font-family: "B Koodak", "Century Gothic"; font-size: 25px; position: relative; right: 35px; top: 28px; } #nav ul li a { color: #fff; font-family: "B Koodak", "Century Gothic"; font-size: 25px; position: relative; right: 35px; top: 28px; } #nav{ width: 740px; } #about { color: #fff; font-family: "B Koodak", "Century Gothic"; font-size: 25px; position: relative; } #abouten { color: #fff; font-family: "B Koodak", "Century Gothic"; font-size: 16px; position: relative; top: -6px; display: block; right: -3px; } #price { color: #fff; font-family: "B Koodak", "Century Gothic"; font-size: 25px; position: relative; } #pricen { color: #fff; font-family: "B Koodak", "Century Gothic"; font-size: 16px; position: relative; top: -6px; display: block; right: 14px; } #portfolio { color: #fff; font-family: "B Koodak", "Century Gothic"; font-size: 25px; position: relative; right: -15px; } #portfolioen { color: #fff; font-family: "B Koodak", "Century Gothic"; font-size: 16px; position: relative; top: -6px; display: block; } #services { color: #fff; font-family: "B Koodak", "Century Gothic"; font-size: 25px; position: relative; right: 4px; } #servicesen { color: #fff; font-family: "B Koodak", "Century Gothic"; font-size: 16px; position: relative; top: -6px; display: block; right: 5px; } #contact { color: #fff; font-family: "B Koodak", "Century Gothic"; font-size: 25px; position: relative; right: -11px; } #contacten { color: #fff; font-family: "B Koodak", "Century Gothic"; font-size: 16px; position: relative; top: -6px; display: block; right: -11px; } footer{ background-color:#17555c; width:960px; height:50px; bottom:0; position: absolute; } </style> </head> <body> <div id="wraper"> <header></header> <div id="logo"></div><!--logo--> <nav id="nav"> <ul> <li><a href=""> <span id="about">درباره ما</span> <span id="abouten">About We</span> </a></li> <li><a href=""> <span id="price">تعرفه ها</span> <span id="pricen">price</span> </a></li> <li><a href=""> <span id="portfolio">نمونه کارها</span> <span id="portfolioen">portfolio</span> </a></li> <li><a href=""> <span id="services">خدمات</span> <span id="servicesen">services</span> </a></li> <li><a href=""> <span id="contact">تماس با ما</span> <span id="contacten">contact we</span> </a></li> </ul> </nav> <footer></footer> </div><!--wraper--> </body> </html>
آخرین ویرایش به وسیله SlowCode : جمعه 11 مهر 1393 در 22:39 عصر
خب الان این 100% هست و کل عرض صفحه رو گرفته من میخوام 960 پیکسل باشه و وسط باشه و وقتی width : 960px میدم درست میشه ولی وسط نیست
چه باید کرد
پست قبلی رو ویرایش کردم، باید left:0 رو حذف کنی.
خیلی ممنون از کمکتون
یه دنیا ممنون
خیلی ممنون برای من کار کردنوشته شده توسط SlowCode
قوانین ایجاد تاپیک در تالار
پاسخ با نقل قول