• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
چطور برا footer استایل مناسب بنویسم؟
#1
Question 
سلام

بچه ها من برا سایتم یه footer گذاشتم و fix کردمش. یعنی برا اینکه بره بچسبه به ته صفحه این کارو کردم

کد پی‌اچ‌پی:
footer {
    
padding4px 0px;
    
positionrelative;
    
bottom0px;
    
width100%;
    
min-width1000px;
    
overflowhidden;


حالا مشکلم اینه که وقتی تو مرورگر زوم می کنم (با + + Ctrl) فوتر میاد و میره روی المان های دیگه که اصلا خوب نیست Confused
چیکار کنم تا مثله فوتر گوگل بشه؟ یه نیگا به فوتر گوگل بندازین Blush
تا جایی که overlap نشده با المانهای دیگه زوم میشه ولی وقتی میاد روی بقیه دیگه نشونش نمی ده Tongue
W H A T E V E R   Sleepy 
  پاسخ
تشکر شده توسط :
#2
اولاً داداش مسعود پوزیشن fixed واسه اینه که با اسکرول کردن همون پایین بمونه و از جاش تکون نخوره و همش تو چشم باشه. مثل تولبار خز بالای همین انجمن Big Grin تو بهتره absolute پوزیشن رو تعریف کنی.
خب حالا واسه اینکه نرن رو همدیگه من راهی که بلدم، اینه که هر دو پوزیشن absolute یا relative داشته باشن. اینم یه نمونه
کد:
<!--ino test konid miran roo hamdige-->
<div style="background-color:blue;height:200px;">dfdf</div>
<footer>test</footer>
<!--payan-->
<!--ino test konid nemiran roo hamdige-->
<div style="position:absolute;bottom:60px;background-color:blue;left:0;right:0;height:200px;">dfdf</div>
<footer>test</footer>
<!--payan-->
در ضمن واسه ساخت فوتر یا امثالش که طول 100% دارن و میخوای پوزیشن براشون درنظر بگیری بهترین راه بنظرم اینه:
کد:
<style type="text/css">
footer {
    padding: 4px 0;
    position: absolute;
    bottom:0;
    left:0;right:0;
    height:50px;
    background-color: red;
}
</style>
غایب
  پاسخ
تشکر شده توسط : masoudmanson undefined Hamid hidensoft
#3
(۱۳۹۱ خرداد ۱۹, ۰۲:۲۷ ب.ظ)cyletech نوشته: اولاً داداش مسعود پوزیشن fixed واسه اینه که با اسکرول کردن همون پایین بمونه و از جاش تکون نخوره و همش تو چشم باشه. مثل تولبار خز بالای همین انجمن Big Grin تو بهتره absolute پوزیشن رو تعریف کنی.

مرسی داداشی Heart
یه جوری حلش کردم
راسی من که نگفتم پوزیشنش رو fix کردم ، منظورم این بود که جا افتاد یعنی fix شد. css منظورم نبود Tongue
بازم خیلی ممنون Blush
W H A T E V E R   Sleepy 
  پاسخ
تشکر شده توسط :
#4
نقل قول:یه جوری حلش کردم

چه جوری؟
مشکل تو نیست که! منم الان همین مشکل رو پیدا کردم

البته روش علیرضا هم خوبه منتها نمیخوام کلاس های دیگه رو ویرایش کنم.

این کلاس رو هم، الان نوشتم و ظاهرا مشکل رو برطرف کرده.

کد:
.footer {background:url(footer.gif) center no-repeat; width:100%; height:105px; position:absolute ;bottom:0px;}

البته برای زمانی خوبه که توی فوتر از تصویر استفاده میکنی. برای متن رو هنوز تست نکردم
هر چیزی که در جستن آنی آنی...
غایب
  پاسخ
تشکر شده توسط : masoudmanson hidensoft


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان