PDA

View Full Version : سوال: تنظیم div به عنوان header and footer


ya30ien2
دوشنبه 10 مهر 1391, 13:58 عصر
سلام به دوستان
چطور میشه یک div برای heder و یکی برای foter تنظیم کرد که طول در 100% باشه و گوشه ها چفت بشن که از کنارش پشتش دیده نشه و
وقتی که مرورگر رو کوچیک و بزرگ کنیم مشکلی برای اجزا داخلش پیش نیاد یعنی هماهنگ جابجا بشن یا مثلا اسکرول بار براش تنظیم باشه
و البته heder همیشه بالا و foter همیشه پائین چسبیده باشن
لطفا بگید چه خصلت ها یی باید تنظیم بشه و روی چی تنظیم بشه
hamed_hossani
دوشنبه 10 مهر 1391, 18:18 عصر
قالب های زیر را نگاه کن!
http://demo.templateworld.com/zero/in_action/apple_web/
http://www.freecsstemplates.org/preview/oilpainting/
http://www.4templates.com/website-templates/962291553-WT00686/#red


http://www.freecsstemplates.org/css-templates/
http://www.templateworld.com/free_templates_3_10_4.html

از دایو برای قالب بندی استفاده کردن
ya30ien2
دوشنبه 10 مهر 1391, 19:22 عصر
ممنون دوست عزیز
خیلی سعی کردم از روی قالب های مختلف بتونم یکی شبیهشون طراحی کنم
اما بازم موفق نشدم
ممنونم میشم فقط نمونه اولیه قرار بدید که هیچ کنترل اضافی نداشته باشه و بیتونم از روش الگو بگیرم
hamed_hossani
سه شنبه 11 مهر 1391, 00:08 صبح
سلام
صفحه با div قالب بندی شده! فایل index.html
و با css ان را تنظیم کرده!styleSheet.css
http://up.vatandownload.com/images2/m55rwhy418wnhflh1t5e.gif
ya30ien2
سه شنبه 11 مهر 1391, 10:41 صبح
سلام
صفحه با div قالب بندی شده! فایل index.html
و با css ان را تنظیم کرده!styleSheet.css
http://up.vatandownload.com/images2/m55rwhy418wnhflh1t5e.gif
ممنون
مثال خیلی خوبی بود
اما بازم یک مشکل :
وقتی مرورگر رو کوچیک کنی یک طرف هدر و فوتر خالی میشه
hamed_hossani
سه شنبه 11 مهر 1391, 12:03 عصر
اصلان اصلنو متوجه نمیشم!
ya30ien2
سه شنبه 11 مهر 1391, 13:36 عصر
اون عکسی که شما گذاشتی واسه واسه وقتی هست که مرورگر در فول سایز هستش
اما عکس پائین مربوط به زمانی هستش که مرورگر رو از فول سایز خارج میکنیم
اگه دقت کنید سمت راست هدر سفید هستش
93493
hamed_hossani
سه شنبه 11 مهر 1391, 14:57 عصر
من ie 9 دارم
مشکلی ندارم برای نمایش صفحه ای که گفتید.
ya30ien2
سه شنبه 11 مهر 1391, 18:54 عصر
من ie 9 دارم
مشکلی ندارم برای نمایش صفحه ای که گفتید.
هم داخل ie هم mozila هر دو همینجوری نمایش میده
ya30ien2
سه شنبه 11 مهر 1391, 18:55 عصر
فقط این قالب نیست
هر کدوم که خودم طراحی کردم تنظیماتش رو دست زدم هر کاری کردم آخرش به نتیجه نرسیدم
همش همینجوریه
ya30ien2
سه شنبه 11 مهر 1391, 22:18 عصر
کسی در مورد این مشکل چیزی نداره بگه؟
Mohsen.
سه شنبه 11 مهر 1391, 23:21 عصر
این شاید کمکتون کنه.
ya30ien2
چهارشنبه 12 مهر 1391, 15:07 عصر
این شاید کمکتون کنه.
دوست عزیز اینم مشکل داره
لینک عکس (http://img4up.com/up2/62397393181733361322.jpg)

با عرض پوزش فعلا اینترنت اینجا خرابه نمیشه رو سایت برنامه نویس عکس آپلود کرد
ya30ien2
چهارشنبه 12 مهر 1391, 15:13 عصر
البته میشه این مشکل رو دور زد
مثلا یک div دیگه زیر اون که روی 100% هستش میزاریم و به اندازه div بالایی در میاریم با خصوصیات div وسط یعنی در کل 3 تا باید روی هم قرار بگیره
ولی میخوام که مشکل به صورت علمی حل بشه نه دور زدن
اگه امکان داره طراحان عزیز راه حل بدن
ya30ien2
چهارشنبه 12 مهر 1391, 21:26 عصر
دوستان و اساتید راه حلی نداشتند ما رو راهنمایی کنند؟
sajjadnajafi
شنبه 15 مهر 1391, 22:31 عصر
ya30ien2 (http://barnamenevis.org/member.php?210845-ya30ien2) سلام
چه جالب من داشتم نوی نت دنبال این میگشتم که چطوری فوتر و هدر رو به ترتیب به پایین و بالا بچسبونیم می گشتم که به این تاپیک رسیدم :) اول فکر کردم تاپیک قدیمیه اما دیدم نه تازه تازس :)
حالا براتون بگم که آقا یاسین من نصف جواب خودمو که نصف جواب شما هم میشه رو پیدا کردم :
من با گشت و گذاری که توی نت داشتم فهمیدم چطور میشه هدر رو به بالای صفحه چسبوند!
برای این که هدر به بالای صفحه بچسبه این کد رو توی فایل استایل قالبت کپی کن (اول فایل style.css ):


* {
margin: 0;
padding: 0;

}

با کد بالا مارجین و پدینگ مقدار اولیه صفر میگیرن! پس div های ما به بالای صفحه میچسبن! حالا دارم تو نت دنبال قسمت دوم سوال خودم و شما میگردم که چطور همزمانی که هدر چسبیده به بالاست فوتر هم چسبیده به پایین باشه (خودم هم تلاش هایی برای انجام این کار کردم اما نشد! )
حالا اگر دوستان css نویس حرفه ای مون کمک کنن که خیلی خوب میشه اگر نه هم اگرکه از جستجو تو نت پیدا کردم سعی میکنم اینجا نتیجه جستجو رو بذارم :)
موفق باشید
sajjadnajafi
شنبه 15 مهر 1391, 23:29 عصر
یافتم که چرا فوتر به ته نمی چسبید!
چون بین هدر و فوتر یه div میخواست که بین هدر و فوتر یه فاصله ایجاد کنه پس کد html رو به صورت زیر قرار بده:


<!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; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Untitled Document</title>
</head>

<body><div id="wrapper">
</div>
<div align="center">
<div id="been"></div>
</div>
<div id="footer">
</div>
</body>
</html>


و بعد ذخیرش کن و بعد یه فایل با نام style.css در کنار فایل html بساز و کد های زیر رو توی style.css کپی کن:

/* CSS Document */
body {
margin: 0;
padding: 0;
list-style: none;
height: 100%;
background-image: url(images/test.png);
background-repeat:repeat;
}


#wrapper{
background:url(images/test.png) center no-repeat;
width:100%;
height:227px;
}
#been{
height:250px;
}
#footer{
background:url(images/test.png) center no-repeat;
height:227px;
}

حالا در کنار این دو فایل یه پوشه درست کن و اسمو بذار انقوضه! اه ببخشید اسمشو بزار images و بکگراند خودتو بذار توش البته به سلیقه خودته دیگه میتونی به جاش رنگش کنی یا اصلا بدون زمینه باشه :)
ya30ien2
شنبه 22 مهر 1391, 23:43 عصر
دوستان خودم به نتیجه رسیدم شاید کسه دیگه ای هم همین مشکل رو داشته باشه
باید طول رو هم برای اندازه فول و هم کوچک شده تعیین کرد


width:100%;
min-wdth:900px;


ینجوری مشکل حل میشه
دقت کنید هر دو رو برای هر کدوم تعریف کنید